Soft Studio Product Spine

/softStudioProductSpine
A precise, studio-inspired design system for vertically presenting shipped products with clarity and credibility. Focuses on restraint, tonal color, and immaculate visual structure for confident product portfolios and case studies.
0 likes
0 bookmarks
Jun 18, 2026
Design System Content
# Soft Studio Product Spine Design System

A restrained, studio-like design language for presenting a vertical sequence of shipped products with clarity, credibility, and immaculate visual control.

---

## Philosophy

> “A portfolio should feel less like a showcase and more like a quiet archive of proof.”

Soft Studio Product Spine is built for product builders, studios, founders, and designers who need to present shipped work with confidence and restraint. The interface behaves like a refined editorial spine: one centered path, one clear sequence, no visual noise.

The system favors white space, pale surfaces, precise typographic contrast, rounded project sections, soft contact shadows, and near-black calls to action. It avoids saturated accent colors, ornamental gradients, loud badges, and decorative effects.

### Core Beliefs

1. **The page is a spine** — Content flows through a single centered vertical axis: avatar, headline, introduction, CTAs, proof, then stacked product sections.
2. **Shipped work is the hierarchy** — Project cards carry the most visual weight through generous scale, large media frames, and disciplined internal structure.
3. **Restraint signals maturity** — White, ivory, pale gray, stone, and near-black create credibility without needing bright accent color.
4. **Depth should feel physical, not digital** — Use soft contact shadows, hairline borders, and subtle tonal elevation instead of dramatic shadows.
5. **Every product card is an artifact** — Each section should feel like a polished studio presentation: media, icon, label, metric, status, and optional testimonial.
6. **Typography creates confidence** — Large hero type should be bold and composed; supporting copy should be compact, legible, and secondary.
7. **Buttons are intentional** — CTAs are near-black, white, or lightly bordered. No saturated colored buttons.
8. **Spacing is the luxury layer** — The system depends on generous vertical rhythm and ample breathing room around every major element.

### Strict Rules

* **No saturated accent buttons** — Primary CTAs use near-black or deep charcoal only.
* **No decorative gradients** — Backgrounds, cards, and buttons remain flat or subtly tonal.
* **No colorful status systems** — Status badges use stone, ivory, gray, or near-black only.
* **No heavy shadows** — Shadows must appear like soft contact with a surface, never floating panels.
* **No crowded grids** — Product sections stack vertically; avoid dense multi-column case-study walls.
* **No loud borders** — Borders should remain pale and structural.
* **No emoji-based UI** — Use app icons, logomarks, initials, or precise iconography instead.
* **No glossy visual effects** — Avoid glassmorphism, neon glow, chromatic blur, and highly reflective surfaces.

---

## Color Palette

The palette is intentionally narrow: white, ivory, pale gray, soft stone, muted graphite, and near-black. This system avoids saturated accent hues and relies on tonal contrast.

### Core Surface Scale

```css
/* Primary Backgrounds */
--studio-white:        #ffffff; /* Main canvas */
--studio-ivory:        #fbfaf7; /* Warm page background alternative */
--studio-cream:        #f7f4ee; /* Soft section background */
--studio-mist:         #f6f6f4; /* Pale neutral panel */
--studio-fog:          #efefec; /* Secondary surface */
--studio-stone:        #e5e1da; /* Structural muted stone */
--studio-stone-deep:   #d6d0c7; /* Stronger dividers and subtle badges */

/* Elevated Surfaces */
--surface-card:        #ffffff;
--surface-raised:      #fcfbf8;
--surface-inset:       #f3f2ef;
--surface-media:       #f4f4f2;
--surface-proof:       #faf9f6;

/* Dark Treatments */
--ink:                 #171717; /* Primary near-black CTA and text */
--ink-soft:            #262626; /* Hover state, secondary dark */
--graphite:            #3f3f3f; /* Strong supporting text */
--slate-stone:         #5f5d58; /* Secondary text */
--muted-stone:         #86817a; /* Metadata */
--pale-stone:          #aaa49b; /* Disabled labels and muted icons */
```

### Tailwind-Inspired Utility Mapping

```css
/* Backgrounds */
bg-white               /* #ffffff — main page canvas */
bg-[#fbfaf7]           /* warm ivory page background */
bg-[#f7f4ee]           /* soft product section background */
bg-[#f6f6f4]           /* pale gray studio panel */
bg-[#efefec]           /* inset surfaces, subtle media backgrounds */
bg-[#171717]           /* primary CTA */
bg-[#262626]           /* primary CTA hover */

/* Borders */
border-[#f0eee9]       /* ultra-subtle card border */
border-[#e5e1da]       /* default structural border */
border-[#d6d0c7]       /* hover/focus structural border */
border-[#bdb6ab]       /* active muted border */

/* Text */
text-[#171717]         /* primary headings and CTA text */
text-[#262626]         /* strong labels */
text-[#3f3f3f]         /* supporting copy */
text-[#5f5d58]         /* body copy and intro */
text-[#86817a]         /* metadata and small labels */
text-[#aaa49b]         /* disabled, placeholder, tertiary metadata */
text-white             /* text on near-black CTA */
```

### Functional Color Use

Functional states remain tonal, not colorful.

```css
/* Success / Shipped */
bg-[#f3f2ef]
text-[#3f3f3f]
border-[#d6d0c7]

/* In Progress */
bg-[#fbfaf7]
text-[#5f5d58]
border-[#e5e1da]

/* Archived */
bg-[#efefec]
text-[#86817a]
border-[#d6d0c7]

/* Private / Locked */
bg-[#171717]
text-white
border-[#171717]

/* Destructive Actions Only */
hover:bg-red-50
hover:text-red-700
hover:border-red-200
```

### Color Application Rules

| Element | Preferred Color |
| --- | --- |
| Main page background | `#ffffff` or `#fbfaf7` |
| Hero avatar border | `#e5e1da` |
| Hero headline | `#171717` |
| Intro copy | `#5f5d58` |
| Primary CTA | `#171717` background, white text |
| Primary CTA hover | `#262626` background |
| Secondary CTA | white or ivory background, stone border |
| Proof row labels | `#86817a` |
| Project card background | `#ffffff` or `#fbfaf7` |
| Project section shell | `#f7f4ee` or `#f6f6f4` |
| Media frame background | `#efefec` |
| Status badge | tonal gray, stone, or near-black |
| Divider lines | `#e5e1da` or `#f0eee9` |

---

## Typography

Soft Studio Product Spine uses a distinctive sans for display typography and a compact, highly readable sans for body and product metadata.

### Font Families

```css
/* Display / Hero / Large Product Titles */
font-family: "Satoshi", "Onest", ui-sans-serif, system-ui, sans-serif;

/* Body / Labels / Compact UI */
font-family: "DM Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
```

### Recommended Pairings

| Use Case | Display Font | Body Font |
| --- | --- | --- |
| Refined studio portfolio | Satoshi | DM Sans |
| Slightly more technical product archive | Onest | Inter |
| Founder/operator page | Satoshi | Inter |
| Product design case-study spine | Onest | DM Sans |

### Font Weights

```css
font-normal      /* Body copy, intro text, testimonial text */
font-medium      /* Buttons, navigation, project labels */
font-semibold    /* App names, metrics, badges */
font-bold        /* Hero headline, major product titles only */
font-black       /* Not allowed */
```

### Weight Rules

* Hero typography may use `font-bold`, but should remain clean and not overly compressed.
* Body copy should avoid heavy weights.
* Labels should use `font-medium` or `font-semibold`.
* Metrics should use `font-semibold` for confidence without becoming aggressive.
* Avoid ultra-light typography; this system is soft but not fragile.

### Font Size Scale

```css
text-[10px]      /* Tiny editorial labels, status details */
text-[11px]      /* Project metadata, product category tags */
text-xs          /* Badges, proof labels, compact UI text */
text-sm          /* Body copy, buttons, project descriptions */
text-[15px]      /* Primary intro copy, testimonial strips */
text-base        /* Card descriptions, strong supporting copy */
text-lg          /* Proof numbers, compact section headings */
text-xl          /* Product names, feature callouts */
text-2xl         /* Mobile hero headline, small product titles */
text-3xl         /* Large card headings */
text-4xl         /* Mobile/tablet hero */
text-5xl         /* Desktop hero */
text-6xl         /* Large desktop hero */
text-7xl         /* Maximum hero scale for spacious landing pages */
```

### Letter Spacing

```css
tracking-[-0.04em]  /* Large hero headlines */
tracking-[-0.03em]  /* Product titles */
tracking-[-0.02em]  /* Section headings */
tracking-normal     /* Body copy */
tracking-[0.01em]   /* Compact labels */
tracking-[0.08em]   /* Editorial uppercase labels */
tracking-[0.12em]   /* Tiny proof and status labels */
```

### Line Height

```css
leading-[0.95]    /* Very large hero headlines */
leading-none      /* Tight hero lines, if multi-line */
leading-tight     /* Product titles and section headers */
leading-snug      /* Intro and supporting paragraphs */
leading-relaxed   /* Testimonials and longer body copy */
```

### Typography Hierarchy

| Element | Font | Size | Weight | Color | Tracking | Line Height |
| --- | --- | --- | --- | --- | --- | --- |
| Hero Headline | Satoshi/Onest | `text-5xl md:text-7xl` | bold | `#171717` | `-0.04em` | `0.95` |
| Hero Intro | DM Sans/Inter | `text-[15px] md:text-base` | normal | `#5f5d58` | normal | relaxed |
| CTA Text | DM Sans/Inter | `text-sm` | medium | white / `#171717` | normal | normal |
| Proof Number | Satoshi/Onest | `text-lg` | semibold | `#171717` | `-0.02em` | tight |
| Proof Label | DM Sans/Inter | `text-[10px]` | medium | `#86817a` | `0.12em` | normal |
| Project Title | Satoshi/Onest | `text-2xl md:text-3xl` | bold | `#171717` | `-0.03em` | tight |
| Project Description | DM Sans/Inter | `text-sm md:text-base` | normal | `#5f5d58` | normal | relaxed |
| Editorial Label | DM Sans/Inter | `text-[10px]` | semibold | `#86817a` | `0.12em` | normal |
| Outcome Metric | Satoshi/Onest | `text-xl md:text-2xl` | semibold | `#171717` | `-0.03em` | tight |
| Status Badge | DM Sans/Inter | `text-[10px]` | semibold | tonal | `0.08em` | normal |
| Testimonial | DM Sans/Inter | `text-[15px]` | normal | `#3f3f3f` | normal | relaxed |

---

## Layout System

The system is structured as a single elegant vertical spine. The content should feel centered, sequenced, and highly intentional.

### Page Structure

```txt
Page Canvas
└── Centered Spine Container
    ├── Avatar Hero
    ├── Short Confident Headline
    ├── Concise Intro
    ├── CTA Pair
    ├── Proof Row
    └── Stacked Project Sections
        ├── Project Card 01
        ├── Project Card 02
        ├── Project Card 03
        └── Project Card 04
```

### Spine Container

```tsx
"mx-auto w-full max-w-[1120px] px-5 sm:px-6 lg:px-8"
```

### Narrow Hero Container

```tsx
"mx-auto flex max-w-[720px] flex-col items-center text-center"
```

### Project Stack Container

```tsx
"mx-auto mt-20 flex w-full max-w-[1040px] flex-col gap-8 md:gap-10"
```

### Vertical Rhythm

| Section | Top Spacing | Bottom Spacing |
| --- | --- | --- |
| Page top to avatar | `pt-20 md:pt-28` | — |
| Avatar to headline | `mt-7` | — |
| Headline to intro | `mt-5` | — |
| Intro to CTAs | `mt-8` | — |
| CTAs to proof row | `mt-10` | — |
| Proof row to project stack | `mt-20 md:mt-24` | — |
| Between project cards | `gap-8 md:gap-10` | — |
| Final project to page bottom | — | `pb-24 md:pb-32` |

### Grid Behavior

Soft Studio Product Spine is not a dense bento system. It uses stacked vertical product sections with optional internal two-column arrangements.

```css
/* Mobile */
grid-template-columns: 1fr;

/* Desktop Project Card */
grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
```

### Responsive Structure

| Breakpoint | Behavior |
| --- | --- |
| Mobile | Single column, centered hero, project content stacks below media |
| Tablet | Wider hero text, CTAs remain centered, project cards maintain vertical stacking |
| Desktop | Project cards may use media-left/details-right layout |
| Large desktop | Maintain max-width; do not stretch cards past studio proportions |

---

## Spacing Tokens

Spacing should feel generous but disciplined. Avoid arbitrary values unless required for optical correction.

```css
--space-1:   4px;
--space-2:   8px;
--space-3:   12px;
--space-4:   16px;
--space-5:   20px;
--space-6:   24px;
--space-8:   32px;
--space-10:  40px;
--space-12:  48px;
--space-14:  56px;
--space-16:  64px;
--space-20:  80px;
--space-24:  96px;
--space-28:  112px;
--space-32:  128px;
```

### Component Padding

| Component | Mobile Padding | Desktop Padding |
| --- | --- | --- |
| Hero container | `px-5` | `px-8` |
| Project card | `p-4` | `p-6 md:p-8` |
| Media frame | `p-3` | `p-4` |
| Testimonial strip | `p-4` | `p-5` |
| Proof row | `px-4 py-4` | `px-6 py-5` |
| CTA button | `px-5 py-3` | `px-5 py-3` |
| Badge | `px-2.5 py-1` | `px-2.5 py-1` |

---

## Radius System

Rounded forms are important to the aesthetic, but should remain controlled and architectural.

```css
rounded-sm       /* Tiny labels, icon details */
rounded-md       /* Small badges, compact controls */
rounded-lg       /* Buttons, small interactive surfaces */
rounded-xl       /* App icons, testimonial strips */
rounded-2xl      /* Media frames, proof row */
rounded-3xl      /* Main project sections */
rounded-[2rem]   /* Large premium feature cards */
rounded-full     /* Avatar, small pills, circular indicators */
```

### Radius Usage

| Element | Radius |
| --- | --- |
| Avatar | `rounded-full` |
| Primary/secondary CTA | `rounded-full` or `rounded-xl` |
| Proof row | `rounded-2xl` |
| Main project card | `rounded-3xl` |
| Media frame | `rounded-2xl` |
| App icon | `rounded-xl` |
| Status badge | `rounded-full` |
| Testimonial strip | `rounded-2xl` |

---

## Shadow & Elevation

Depth is created through soft contact shadows and pale borders. Nothing should look like it is floating far above the page.

### Shadow Tokens

```css
/* Barely visible contact */
shadow-[0_1px_2px_rgba(23,23,23,0.04)]

/* Soft card contact */
shadow-[0_8px_24px_rgba(23,23,23,0.05)]

/* Large section contact */
shadow-[0_20px_60px_rgba(23,23,23,0.07)]

/* Inner media grounding */
shadow-[inset_0_0_0_1px_rgba(23,23,23,0.04)]

/* CTA tactile shadow */
shadow-[0_8px_20px_rgba(23,23,23,0.12)]
```

### Elevation Scale

| Level | Use | Style |
| --- | --- | --- |
| 0 | Page canvas | No shadow |
| 1 | Small pills, proof row | Hairline border only |
| 2 | App icons, small cards | Tiny contact shadow |
| 3 | Project sections | Soft card contact shadow |
| 4 | Featured project | Larger but diffused contact shadow |
| 5 | Overlays/popovers | Soft shadow with crisp border |

### Shadow Rules

* Shadows should be neutral black at very low opacity.
* Avoid large blur values paired with strong opacity.
* Do not use colored shadows.
* Project sections may have visible softness, but media frames should stay more grounded.
* Hover states can increase contact slightly, but should never feel animated upward dramatically.

---

## Border System

Borders are structural and nearly quiet. They define surfaces without making cards feel boxed in.

```css
border-[#f0eee9]       /* whisper border */
border-[#e5e1da]       /* default border */
border-[#d6d0c7]       /* hover border */
border-[#bdb6ab]       /* selected/focused tonal border */
border-[#171717]       /* dark badge or CTA only */
```

### Border Usage

| Element | Border |
| --- | --- |
| Page sections | `border border-[#f0eee9]` |
| Project cards | `border border-[#e5e1da]` |
| Media frames | `border border-[#e5e1da]` |
| App icons | `border border-white/70` or `border-[#e5e1da]` |
| Secondary buttons | `border border-[#d6d0c7]` |
| Proof row | `border border-[#e5e1da]` |
| Testimonial strips | `border border-[#ebe7df]` |

---

## Animation System

### Core Philosophy: The Quiet Reveal

Motion should feel like a composed studio presentation: elements appear with slight softness, align into the spine, and settle quickly. Avoid bouncy, playful, or exaggerated effects.

### Page Entrance

```tsx
initial={{ opacity: 0, y: 12, filter: "blur(6px)" }}
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
```

### Staggered Spine Reveal

```tsx
const container = {
  hidden: {},
  show: {
    transition: {
      staggerChildren: 0.08,
      delayChildren: 0.08
    }
  }
};

const item = {
  hidden: { opacity: 0, y: 10, filter: "blur(5px)" },
  show: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: {
      duration: 0.42,
      ease: [0.22, 1, 0.36, 1]
    }
  }
};
```

### Project Card Reveal

```tsx
initial={{ opacity: 0, y: 18, scale: 0.985 }}
whileInView={{ opacity: 1, y: 0, scale: 1 }}
viewport={{ once: true, margin: "-80px" }}
transition={{ duration: 0.5, ease: [0.22, 1, 0.36, 1] }}
```

### Hover Interaction

```tsx
whileHover={{ y: -2 }}
transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
```

### Button Interaction

```tsx
whileTap={{ scale: 0.985 }}
transition={{ duration: 0.12, ease: "easeOut" }}
```

### Motion Rules

* Movement should be vertical and minimal.
* Blur should clear quickly and never obscure content for long.
* Avoid elastic springs for primary page motion.
* Hover lift should stay between `-1px` and `-3px`.
* No spinning icons, decorative parallax, or animated gradients.
* Media can fade in, but should not slide dramatically.

---

## Core Components

---

## Avatar Hero

The hero begins with a centered avatar or studio mark. It anchors the spine and humanizes the presentation without becoming oversized.

### Structure

```txt
Avatar Hero
├── Circular avatar
├── Optional availability/status pill
├── Headline
├── Intro paragraph
└── CTA pair
```

### Avatar Styling

```tsx
"relative h-20 w-20 overflow-hidden rounded-full border border-[#e5e1da] bg-[#f6f6f4] shadow-[0_8px_24px_rgba(23,23,23,0.06)]"
```

### Avatar Image

```tsx
"h-full w-full object-cover"
```

### Optional Availability Pill

```tsx
"mt-4 inline-flex items-center gap-2 rounded-full border border-[#e5e1da] bg-white px-3 py-1.5 text-xs font-medium text-[#5f5d58] shadow-[0_1px_2px_rgba(23,23,23,0.04)]"
```

### Status Dot

```tsx
"h-1.5 w-1.5 rounded-full bg-[#171717]"
```

### Hero Headline

```tsx
"mt-7 max-w-[780px] font-display text-5xl font-bold leading-[0.95] tracking-[-0.04em] text-[#171717] md:text-7xl"
```

### Hero Intro

```tsx
"mt-5 max-w-[560px] font-body text-[15px] leading-relaxed text-[#5f5d58] md:text-base"
```

---

## CTA Pair

The CTA pair should be centered, compact, and visually quiet. The primary action uses near-black. The secondary action uses white or ivory with a stone border.

### Container

```tsx
"mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row"
```

### Primary CTA

```tsx
"inline-flex h-11 items-center justify-center rounded-full bg-[#171717] px-5 text-sm font-medium text-white shadow-[0_8px_20px_rgba(23,23,23,0.12)] transition-all duration-200 hover:bg-[#262626] hover:shadow-[0_10px_24px_rgba(23,23,23,0.14)] active:scale-[0.985]"
```

### Secondary CTA

```tsx
"inline-flex h-11 items-center justify-center rounded-full border border-[#d6d0c7] bg-white px-5 text-sm font-medium text-[#262626] shadow-[0_1px_2px_rgba(23,23,23,0.04)] transition-all duration-200 hover:border-[#bdb6ab] hover:bg-[#fbfaf7] active:scale-[0.985]"
```

### Text Link CTA

```tsx
"inline-flex items-center gap-1 text-sm font-medium text-[#3f3f3f] underline decoration-[#d6d0c7] underline-offset-4 transition-colors hover:text-[#171717] hover:decoration-[#171717]"
```

### CTA Rules

* Use a maximum of two CTAs in the hero.
* Primary CTA must be near-black, not colored.
* Secondary CTA must remain pale and bordered.
* Avoid large button sizes; buttons should feel precise, not promotional.
* Do not use icon-heavy CTAs unless the icon is very small and monochrome.

---

## Proof Row

The proof row sits below the hero CTAs and summarizes credibility with quiet metrics.

### Structure

```txt
Proof Row
├── Proof Item 01
│   ├── Number
│   └── Label
├── Divider
├── Proof Item 02
├── Divider
└── Proof Item 03
```

### Container

```tsx
"mt-10 grid w-full max-w-[680px] grid-cols-1 overflow-hidden rounded-2xl border border-[#e5e1da] bg-[#fbfaf7] shadow-[0_1px_2px_rgba(23,23,23,0.04)] sm:grid-cols-3"
```

### Proof Item

```tsx
"flex flex-col items-center justify-center px-5 py-5 text-center"
```

### Proof Number

```tsx
"font-display text-lg font-semibold tracking-[-0.02em] text-[#171717]"
```

### Proof Label

```tsx
"mt-1 font-body text-[10px] font-medium uppercase tracking-[0.12em] text-[#86817a]"
```

### Divider

```tsx
"hidden w-px bg-[#e5e1da] sm:block"
```

### Mobile Divider

```tsx
"h-px w-full bg-[#e5e1da] sm:hidden"
```

---

## Project Sections

Project sections are the core of the system. They are generous rounded containers stacked vertically along the spine.

### Required Elements

Each project section should include:

1. Large media frame
2. App icon
3. Tiny editorial label
4. Product name
5. Short project description
6. Outcome metric
7. Status badge
8. Optional testimonial strip

### Project Card Structure

```txt
Project Section
├── Large Media Frame
│   └── Product screenshot / video / mockup
└── Details Column
    ├── Top Row
    │   ├── App Icon
    │   └── Status Badge
    ├── Editorial Label
    ├── Product Title
    ├── Description
    ├── Outcome Metric
    └── Optional Testimonial Strip
```

### Project Section Shell

```tsx
"grid gap-6 rounded-3xl border border-[#e5e1da] bg-[#fbfaf7] p-4 shadow-[0_20px_60px_rgba(23,23,23,0.07)] transition-all duration-300 hover:border-[#d6d0c7] hover:shadow-[0_24px_70px_rgba(23,23,23,0.08)] md:grid-cols-[1.2fr_0.8fr] md:gap-8 md:p-6 lg:p-8"
```

### Featured Project Section

```tsx
"grid gap-6 rounded-[2rem] border border-[#d6d0c7] bg-white p-4 shadow-[0_24px_80px_rgba(23,23,23,0.08)] transition-all duration-300 hover:border-[#bdb6ab] md:grid-cols-[1.25fr_0.75fr] md:gap-8 md:p-8"
```

### Compact Project Section

```tsx
"grid gap-5 rounded-3xl border border-[#e5e1da] bg-white p-4 shadow-[0_8px_24px_rgba(23,23,23,0.05)] md:grid-cols-[1fr_0.75fr] md:p-6"
```

---

## Media Frame

The media frame should be the largest visual element in each project section. It presents the shipped product clearly, without decorative treatment.

### Standard Media Frame

```tsx
"relative aspect-[4/3] overflow-hidden rounded-2xl border border-[#e5e1da] bg-[#efefec] shadow-[inset_0_0_0_1px_rgba(23,23,23,0.04)]"
```

### Wide Media Frame

```tsx
"relative aspect-[16/10] overflow-hidden rounded-2xl border border-[#e5e1da] bg-[#efefec] shadow-[inset_0_0_0_1px_rgba(23,23,23,0.04)]"
```

### Tall Mobile App Frame

```tsx
"relative mx-auto aspect-[9/16] max-h-[560px] overflow-hidden rounded-[1.75rem] border border-[#d6d0c7] bg-[#efefec] p-2 shadow-[0_8px_24px_rgba(23,23,23,0.06)]"
```

### Media Image

```tsx
"h-full w-full object-cover"
```

### Contained Product Screenshot

```tsx
"h-full w-full object-contain p-3 md:p-5"
```

### Media Caption

```tsx
"absolute bottom-3 left-3 rounded-full border border-white/70 bg-white/90 px-3 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-[#86817a] backdrop-blur-sm"
```

### Media Rules

* Use product screenshots, interface frames, or clean mockups.
* Avoid ornamental abstract graphics.
* Avoid saturated background fills behind screenshots.
* Media should sit inside a pale gray, ivory, or white frame.
* Use `object-cover` for editorial product imagery.
* Use `object-contain` for UI screenshots that require full visibility.

---

## App Icon

Each project section requires an app icon or product mark. It should be clean, tactile, and monochrome or softly tonal.

### Icon Container

```tsx
"flex h-12 w-12 items-center justify-center overflow-hidden rounded-xl border border-[#e5e1da] bg-white shadow-[0_8px_20px_rgba(23,23,23,0.06)]"
```

### Larger Icon

```tsx
"flex h-14 w-14 items-center justify-center overflow-hidden rounded-2xl border border-[#e5e1da] bg-white shadow-[0_8px_24px_rgba(23,23,23,0.06)]"
```

### Icon Image

```tsx
"h-full w-full object-cover"
```

### Lettermark Icon

```tsx
"font-display text-base font-bold tracking-[-0.03em] text-[#171717]"
```

### Icon Rules

* Icons may use brand artwork if it does not overpower the card.
* Prefer monochrome, neutral, ivory, or soft stone treatments.
* Do not use neon icon backgrounds.
* Do not use emoji as app icons.
* Keep icon corners rounded and consistent.

---

## Editorial Label

A tiny label gives each project an editorial classification: product type, platform, role, or category.

### Label Styling

```tsx
"font-body text-[10px] font-semibold uppercase tracking-[0.12em] text-[#86817a]"
```

### Label Container

```tsx
"inline-flex items-center rounded-full border border-[#e5e1da] bg-white px-2.5 py-1 font-body text-[10px] font-semibold uppercase tracking-[0.12em] text-[#86817a]"
```

### Label Rules

* Keep labels short.
* Use uppercase.
* Use muted stone text.
* Do not use colorful labels.
* Labels should support hierarchy, not compete with the product title.

---

## Product Details Column

The details column gives context, outcome, and status. It should be compact compared to the media frame.

### Details Container

```tsx
"flex min-w-0 flex-col justify-between gap-6"
```

### Top Row

```tsx
"flex items-start justify-between gap-4"
```

### Product Title

```tsx
"mt-3 font-display text-2xl font-bold leading-tight tracking-[-0.03em] text-[#171717] md:text-3xl"
```

### Product Description

```tsx
"mt-3 max-w-[420px] font-body text-sm leading-relaxed text-[#5f5d58] md:text-base"
```

### Metadata Row

```tsx
"mt-5 flex flex-wrap items-center gap-2"
```

### Metadata Item

```tsx
"rounded-full border border-[#e5e1da] bg-white px-3 py-1 text-xs font-medium text-[#5f5d58]"
```

---

## Outcome Metric

Each project card should include one short outcome metric. It should be easy to scan and visually confident.

### Metric Block

```tsx
"rounded-2xl border border-[#e5e1da] bg-white p-4 shadow-[0_1px_2px_rgba(23,23,23,0.04)]"
```

### Metric Value

```tsx
"font-display text-2xl font-semibold leading-none tracking-[-0.03em] text-[#171717]"
```

### Metric Label

```tsx
"mt-1 font-body text-xs leading-snug text-[#86817a]"
```

### Inline Metric

```tsx
"inline-flex items-baseline gap-2 rounded-full border border-[#e5e1da] bg-white px-3 py-1.5"
```

```tsx
<span className="font-display text-sm font-semibold tracking-[-0.02em] text-[#171717]">
  +38%
</span>
<span className="font-body text-xs text-[#86817a]">
  activation
</span>
```

### Metric Rules

* Keep to one primary metric per card.
* Use short numerical outcomes when possible.
* Metrics should use near-black text, never bright color.
* Avoid red/green performance coloring.
* Do not overload cards with dashboards or complex charts.

---

## Status Badges

Status badges indicate shipped state, availability, or project type. They remain tonal and restrained.

### Default Status Badge

```tsx
"inline-flex items-center rounded-full border border-[#d6d0c7] bg-[#f3f2ef] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-[#5f5d58]"
```

### Shipped Badge

```tsx
"inline-flex items-center rounded-full border border-[#d6d0c7] bg-white px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-[#3f3f3f]"
```

### Live Badge

```tsx
"inline-flex items-center rounded-full border border-[#171717] bg-[#171717] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-white"
```

### Private Badge

```tsx
"inline-flex items-center rounded-full border border-[#d6d0c7] bg-[#efefec] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-[#86817a]"
```

### Badge Dot

```tsx
"mr-1.5 h-1.5 w-1.5 rounded-full bg-current opacity-70"
```

### Status Rules

* Badges should be small and quiet.
* Never use saturated green, yellow, orange, purple, or blue status pills.
* Use dark badges sparingly for active/live emphasis.
* Badge text should be uppercase and short.

---

## Testimonial Strip

Optional testimonial strips provide proof inside project cards without breaking the visual system.

### Testimonial Container

```tsx
"rounded-2xl border border-[#ebe7df] bg-white p-4 shadow-[0_1px_2px_rgba(23,23,23,0.04)]"
```

### Testimonial Text

```tsx
"font-body text-[15px] leading-relaxed text-[#3f3f3f]"
```

### Attribution Row

```tsx
"mt-4 flex items-center gap-3"
```

### Attribution Avatar

```tsx
"h-8 w-8 overflow-hidden rounded-full border border-[#e5e1da] bg-[#f6f6f4]"
```

### Attribution Name

```tsx
"font-body text-xs font-semibold text-[#262626]"
```

### Attribution Role

```tsx
"font-body text-xs text-[#86817a]"
```

### Quote Mark Treatment

If a quote mark is used, keep it subtle.

```tsx
"font-display text-3xl font-bold leading-none tracking-[-0.04em] text-[#d6d0c7]"
```

### Testimonial Rules

* Use testimonial strips only when they add credibility.
* Keep them visually secondary to the media and metric.
* Do not use colored quote marks.
* Avoid oversized quote components.

---

## Navigation

Navigation should be minimal and nearly invisible compared to the page spine.

### Top Navigation Container

```tsx
"mx-auto flex h-16 w-full max-w-[1120px] items-center justify-between px-5 sm:px-6 lg:px-8"
```

### Wordmark

```tsx
"font-display text-sm font-bold tracking-[-0.03em] text-[#171717]"
```

### Nav Links

```tsx
"hidden items-center gap-6 md:flex"
```

### Nav Link

```tsx
"font-body text-sm font-medium text-[#86817a] transition-colors hover:text-[#171717]"
```

### Nav CTA

```tsx
"inline-flex h-9 items-center justify-center rounded-full bg-[#171717] px-4 text-xs font-medium text-white transition-colors hover:bg-[#262626]"
```

### Sticky Navigation

```tsx
"sticky top-0 z-40 border-b border-[#f0eee9] bg-white/85 backdrop-blur-xl"
```

### Navigation Rules

* Navigation should not dominate the hero.
* Use minimal link count.
* Keep nav CTAs smaller than hero CTAs.
* Avoid colored active states.

---

## Section Headers

Use section headers sparingly. The product stack should be visually self-explanatory.

### Eyebrow

```tsx
"font-body text-[10px] font-semibold uppercase tracking-[0.12em] text-[#86817a]"
```

### Section Title

```tsx
"mt-3 font-display text-3xl font-bold tracking-[-0.035em] text-[#171717] md:text-4xl"
```

### Section Intro

```tsx
"mt-3 max-w-[560px] font-body text-sm leading-relaxed text-[#5f5d58] md:text-base"
```

### Centered Section Header

```tsx
"mx-auto max-w-[680px] text-center"
```

### Left-Aligned Section Header

```tsx
"max-w-[640px]"
```

---

## Forms & Inputs

Forms should be quiet, compact, and consistent with the soft studio surface system.

### Input

```tsx
"w-full rounded-xl border border-[#d6d0c7] bg-white px-4 py-3 font-body text-sm text-[#171717] placeholder:text-[#aaa49b] shadow-[0_1px_2px_rgba(23,23,23,0.04)] outline-none transition-all duration-200 focus:border-[#171717] focus:bg-white focus:ring-2 focus:ring-[#171717]/5"
```

### Textarea

```tsx
"min-h-[140px] w-full resize-none rounded-xl border border-[#d6d0c7] bg-white px-4 py-3 font-body text-sm leading-relaxed text-[#171717] placeholder:text-[#aaa49b] shadow-[0_1px_2px_rgba(23,23,23,0.04)] outline-none transition-all duration-200 focus:border-[#171717] focus:ring-2 focus:ring-[#171717]/5"
```

### Label

```tsx
"mb-2 block font-body text-xs font-medium text-[#5f5d58]"
```

### Helper Text

```tsx
"mt-2 font-body text-xs text-[#86817a]"
```

### Form Group

```tsx
"space-y-2"
```

### Form Card

```tsx
"rounded-3xl border border-[#e5e1da] bg-[#fbfaf7] p-5 shadow-[0_8px_24px_rgba(23,23,23,0.05)] md:p-6"
```

---

## Links

Links are understated. Underlines are preferred over color changes.

### Inline Link

```tsx
"font-medium text-[#171717] underline decoration-[#d6d0c7] underline-offset-4 transition-colors hover:decoration-[#171717]"
```

### Muted Link

```tsx
"text-[#5f5d58] underline decoration-[#d6d0c7] underline-offset-4 transition-colors hover:text-[#171717] hover:decoration-[#171717]"
```

### Card Link Overlay

```tsx
"absolute inset-0 rounded-3xl focus:outline-none focus:ring-2 focus:ring-[#171717]/10 focus:ring-offset-2"
```

---

## Dividers

Dividers should be pale and sparse.

### Horizontal Divider

```tsx
"h-px w-full bg-[#e5e1da]"
```

### Whisper Divider

```tsx
"h-px w-full bg-[#f0eee9]"
```

### Vertical Divider

```tsx
"w-px self-stretch bg-[#e5e1da]"
```

### Divider Rules

* Use dividers only when spacing alone cannot clarify structure.
* Avoid dark dividers.
* Avoid repeated horizontal rules in project cards.
* Prefer card spacing over excessive lines.

---

## Icons

Icons should be monochrome and functional. Use Lucide, Phosphor, or custom stroke icons.

### Standard Icon

```tsx
"h-4 w-4 text-[#86817a]"
```

### Strong Icon

```tsx
"h-4 w-4 text-[#171717]"
```

### Icon Button

```tsx
"inline-flex h-9 w-9 items-center justify-center rounded-full border border-[#d6d0c7] bg-white text-[#5f5d58] shadow-[0_1px_2px_rgba(23,23,23,0.04)] transition-all duration-200 hover:border-[#bdb6ab] hover:bg-[#fbfaf7] hover:text-[#171717]"
```

### Icon Rules

* Use `1.5px` or `2px` stroke width.
* Keep icons small.
* Icons should never introduce saturated color.
* Avoid filled decorative icons unless part of an app mark.

---

## Data & Micro Charts

If data visualization is needed, it should be minimal and monochromatic.

### Single Progress Bar

```tsx
<div className="h-1.5 overflow-hidden rounded-full bg-[#e5e1da]">
  <div className="h-full rounded-full bg-[#171717]" style={{ width: "68%" }} />
</div>
```

### Segmented Bar

```tsx
<div className="flex h-1.5 overflow-hidden rounded-full bg-[#e5e1da]">
  <div className="h-full bg-[#171717]" style={{ width: "55%" }} />
  <div className="h-full bg-[#86817a]" style={{ width: "25%" }} />
  <div className="h-full bg-[#d6d0c7]" style={{ width: "20%" }} />
</div>
```

### Mini Stat Row

```tsx
"grid grid-cols-3 gap-2"
```

### Mini Stat Item

```tsx
"rounded-xl border border-[#e5e1da] bg-white px-3 py-2"
```

### Data Rules

* Use near-black for the primary value.
* Use stone tones for secondary values.
* Avoid green/red chart semantics unless destructive action is involved.
* Keep visualizations small and supportive.

---

## Page Templates

---

## Home / Portfolio Spine Template

### Structure

```txt
Main
├── Navigation
├── Hero Spine
│   ├── Avatar
│   ├── Headline
│   ├── Intro
│   ├── CTA Pair
│   └── Proof Row
└── Project Stack
    ├── Featured Project
    ├── Project
    ├── Project
    └── Project
```

### Page Wrapper

```tsx
"min-h-screen bg-white text-[#171717]"
```

### Main Content

```tsx
"mx-auto w-full max-w-[1120px] px-5 pb-24 pt-20 sm:px-6 md:pb-32 md:pt-28 lg:px-8"
```

### Hero

```tsx
"mx-auto flex max-w-[760px] flex-col items-center text-center"
```

### Project Stack

```tsx
"mx-auto mt-20 flex max-w-[1040px] flex-col gap-8 md:mt-24 md:gap-10"
```

---

## Case Study Detail Template

A case study page can expand from the same system while keeping the spine.

### Structure

```txt
Case Study
├── Back Link
├── Product Header
│   ├── App Icon
│   ├── Label
│   ├── Title
│   ├── Description
│   └── Status / Metric Row
├── Large Media Frame
├── Content Sections
└── Related Projects
```

### Product Header

```tsx
"mx-auto max-w-[780px] text-center"
```

### Case Study Title

```tsx
"mt-5 font-display text-4xl font-bold leading-[0.98] tracking-[-0.04em] text-[#171717] md:text-6xl"
```

### Case Study Intro

```tsx
"mx-auto mt-5 max-w-[620px] font-body text-base leading-relaxed text-[#5f5d58]"
```

### Case Study Media

```tsx
"mt-12 overflow-hidden rounded-[2rem] border border-[#e5e1da] bg-[#efefec] shadow-[0_20px_60px_rgba(23,23,23,0.07)]"
```

### Content Section

```tsx
"mx-auto mt-16 grid max-w-[880px] gap-6 md:grid-cols-[220px_1fr]"
```

### Content Section Label

```tsx
"font-body text-[10px] font-semibold uppercase tracking-[0.12em] text-[#86817a]"
```

### Content Body

```tsx
"font-body text-base leading-relaxed text-[#3f3f3f]"
```

---

## Footer

The footer should close the spine with restraint.

### Footer Container

```tsx
"mx-auto flex w-full max-w-[1120px] flex-col items-center justify-between gap-4 border-t border-[#f0eee9] px-5 py-10 text-center sm:px-6 md:flex-row md:text-left lg:px-8"
```

### Footer Text

```tsx
"font-body text-xs text-[#86817a]"
```

### Footer Links

```tsx
"flex items-center gap-5"
```

### Footer Link

```tsx
"font-body text-xs font-medium text-[#86817a] transition-colors hover:text-[#171717]"
```

---

## Component Catalog

### Standard Project Card

```tsx
<section className="grid gap-6 rounded-3xl border border-[#e5e1da] bg-[#fbfaf7] p-4 shadow-[0_20px_60px_rgba(23,23,23,0.07)] transition-all duration-300 hover:border-[#d6d0c7] md:grid-cols-[1.2fr_0.8fr] md:gap-8 md:p-6 lg:p-8">
  <div className="relative aspect-[4/3] overflow-hidden rounded-2xl border border-[#e5e1da] bg-[#efefec] shadow-[inset_0_0_0_1px_rgba(23,23,23,0.04)]">
    <img className="h-full w-full object-cover" src="/product.jpg" alt="" />
  </div>

  <div className="flex min-w-0 flex-col justify-between gap-6">
    <div>
      <div className="flex items-start justify-between gap-4">
        <div className="flex h-12 w-12 items-center justify-center overflow-hidden rounded-xl border border-[#e5e1da] bg-white shadow-[0_8px_20px_rgba(23,23,23,0.06)]">
          <span className="font-display text-base font-bold tracking-[-0.03em] text-[#171717]">P</span>
        </div>

        <span className="inline-flex items-center rounded-full border border-[#d6d0c7] bg-white px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-[#3f3f3f]">
          Shipped
        </span>
      </div>

      <p className="mt-6 font-body text-[10px] font-semibold uppercase tracking-[0.12em] text-[#86817a]">
        Product Design / SaaS
      </p>

      <h3 className="mt-3 font-display text-2xl font-bold leading-tight tracking-[-0.03em] text-[#171717] md:text-3xl">
        Product Name
      </h3>

      <p className="mt-3 max-w-[420px] font-body text-sm leading-relaxed text-[#5f5d58] md:text-base">
        A concise product description that explains the shipped work and its purpose.
      </p>
    </div>

    <div className="rounded-2xl border border-[#e5e1da] bg-white p-4 shadow-[0_1px_2px_rgba(23,23,23,0.04)]">
      <p className="font-display text-2xl font-semibold leading-none tracking-[-0.03em] text-[#171717]">
        +42%
      </p>
      <p className="mt-1 font-body text-xs leading-snug text-[#86817a]">
        improvement in activation after launch
      </p>
    </div>
  </div>
</section>
```

---

### Featured Project Card

```tsx
<section className="grid gap-6 rounded-[2rem] border border-[#d6d0c7] bg-white p-4 shadow-[0_24px_80px_rgba(23,23,23,0.08)] transition-all duration-300 hover:border-[#bdb6ab] md:grid-cols-[1.25fr_0.75fr] md:gap-8 md:p-8">
  <div className="relative aspect-[16/10] overflow-hidden rounded-2xl border border-[#e5e1da] bg-[#efefec] shadow-[inset_0_0_0_1px_rgba(23,23,23,0.04)]">
    <img className="h-full w-full object-cover" src="/featured-product.jpg" alt="" />
  </div>

  <div className="flex flex-col justify-between gap-6">
    <div>
      <div className="flex items-start justify-between gap-4">
        <div className="flex h-14 w-14 items-center justify-center overflow-hidden rounded-2xl border border-[#e5e1da] bg-white shadow-[0_8px_24px_rgba(23,23,23,0.06)]">
          <span className="font-display text-lg font-bold tracking-[-0.03em] text-[#171717]">F</span>
        </div>

        <span className="inline-flex items-center rounded-full border border-[#171717] bg-[#171717] px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.08em] text-white">
          Live
        </span>
      </div>

      <p className="mt-6 font-body text-[10px] font-semibold uppercase tracking-[0.12em] text-[#86817a]">
        Featured Launch
      </p>

      <h3 className="mt-3 font-display text-3xl font-bold leading-tight tracking-[-0.03em] text-[#171717]">
        Featured Product
      </h3>

      <p className="mt-3 font-body text-base leading-relaxed text-[#5f5d58]">
        A polished summary of a major shipped product with a clear result.
      </p>
    </div>

    <div className="space-y-3">
      <div className="rounded-2xl border border-[#e5e1da] bg-[#fbfaf7] p-4">
        <p className="font-display text-2xl font-semibold leading-none tracking-[-0.03em] text-[#171717]">
          $1.2M
        </p>
        <p className="mt-1 font-body text-xs text-[#86817a]">
          pipeline influenced within first quarter
        </p>
      </div>

      <div className="rounded-2xl border border-[#ebe7df] bg-[#fbfaf7] p-4">
        <p className="font-body text-[15px] leading-relaxed text-[#3f3f3f]">
          “The redesign gave the product the clarity it needed to sell into larger teams.”
        </p>
      </div>
    </div>
  </div>
</section>
```

---

### Proof Row Component

```tsx
<div className="mt-10 grid w-full max-w-[680px] grid-cols-1 overflow-hidden rounded-2xl border border-[#e5e1da] bg-[#fbfaf7] shadow-[0_1px_2px_rgba(23,23,23,0.04)] sm:grid-cols-3">
  <div className="flex flex-col items-center justify-center px-5 py-5 text-center">
    <span className="font-display text-lg font-semibold tracking-[-0.02em] text-[#171717]">
      18
    </span>
    <span className="mt-1 font-body text-[10px] font-medium uppercase tracking-[0.12em] text-[#86817a]">
      Products Shipped
    </span>
  </div>

  <div className="hidden w-px bg-[#e5e1da] sm:block" />

  <div className="flex flex-col items-center justify-center px-5 py-5 text-center">
    <span className="font-display text-lg font-semibold tracking-[-0.02em] text-[#171717]">
      6 yrs
    </span>
    <span className="mt-1 font-body text-[10px] font-medium uppercase tracking-[0.12em] text-[#86817a]">
      Product Practice
    </span>
  </div>

  <div className="hidden w-px bg-[#e5e1da] sm:block" />

  <div className="flex flex-col items-center justify-center px-5 py-5 text-center">
    <span className="font-display text-lg font-semibold tracking-[-0.02em] text-[#171717]">
      4.9/5
    </span>
    <span className="mt-1 font-body text-[10px] font-medium uppercase tracking-[0.12em] text-[#86817a]">
      Client Rating
    </span>
  </div>
</div>
```

---

## Interaction States

### Project Card Hover

```tsx
"transition-all duration-300 hover:-translate-y-0.5 hover:border-[#d6d0c7] hover:shadow-[0_24px_70px_rgba(23,23,23,0.08)]"
```

### Media Hover

```tsx
"transition-transform duration-500 ease-out group-hover:scale-[1.015]"
```

### Secondary Button Hover

```tsx
"hover:border-[#bdb6ab] hover:bg-[#fbfaf7] hover:text-[#171717]"
```

### Focus Ring

```tsx
"focus:outline-none focus:ring-2 focus:ring-[#171717]/10 focus:ring-offset-2 focus:ring-offset-white"
```

### Disabled State

```tsx
"pointer-events-none opacity-45"
```

---

## Accessibility

### Contrast

| Element | Requirement |
| --- | --- |
| Primary text on white | Use `#171717` |
| Body copy on white | Use `#5f5d58` or darker |
| Metadata | Use `#86817a`; avoid going lighter for essential text |
| CTA text | White on `#171717` |
| Secondary button text | `#262626` on white |
| Borders | Do not rely on borders alone for critical information |

### Focus

All interactive elements must include a visible focus state.

```tsx
"focus:outline-none focus:ring-2 focus:ring-[#171717]/10 focus:ring-offset-2"
```

### Touch Targets

```css
minimum-height: 44px;
minimum-width: 44px;
```

### Reduced Motion

```tsx
const prefersReducedMotion = useReducedMotion();

const animation = prefersReducedMotion
  ? { opacity: 1, y: 0, filter: "blur(0px)" }
  : { opacity: 1, y: 0, filter: "blur(0px)" };
```

```css
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
```

---

## Implementation Tokens

### CSS Variables

```css
:root {
  /* Fonts */
  --font-display: "Satoshi", "Onest", ui-sans-serif, system-ui, sans-serif;
  --font-body: "DM Sans", "Inter", ui-sans-serif, system-ui, sans-serif;

  /* Surfaces */
  --color-white: #ffffff;
  --color-ivory: #fbfaf7;
  --color-cream: #f7f4ee;
  --color-mist: #f6f6f4;
  --color-fog: #efefec;
  --color-stone: #e5e1da;
  --color-stone-deep: #d6d0c7;

  /* Text */
  --color-ink: #171717;
  --color-ink-soft: #262626;
  --color-graphite: #3f3f3f;
  --color-copy: #5f5d58;
  --color-muted: #86817a;
  --color-disabled: #aaa49b;

  /* Borders */
  --border-whisper: #f0eee9;
  --border-default: #e5e1da;
  --border-strong: #d6d0c7;
  --border-active: #bdb6ab;

  /* Radius */
  --radius-button: 999px;
  --radius-card: 24px;
  --radius-section: 28px;
  --radius-feature: 32px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(23, 23, 23, 0.04);
  --shadow-sm: 0 8px 24px rgba(23, 23, 23, 0.05);
  --shadow-md: 0 20px 60px rgba(23, 23, 23, 0.07);
  --shadow-lg: 0 24px 80px rgba(23, 23, 23, 0.08);
  --shadow-cta: 0 8px 20px rgba(23, 23, 23, 0.12);
}
```

### Tailwind Theme Extension

```tsx
theme: {
  extend: {
    fontFamily: {
      display: ["Satoshi", "Onest", "ui-sans-serif", "system-ui", "sans-serif"],
      body: ["DM Sans", "Inter", "ui-sans-serif", "system-ui", "sans-serif"],
    },
    colors: {
      studio: {
        white: "#ffffff",
        ivory: "#fbfaf7",
        cream: "#f7f4ee",
        mist: "#f6f6f4",
        fog: "#efefec",
        stone: "#e5e1da",
        stoneDeep: "#d6d0c7",
        ink: "#171717",
        inkSoft: "#262626",
        graphite: "#3f3f3f",
        copy: "#5f5d58",
        muted: "#86817a",
        disabled: "#aaa49b",
      },
    },
    boxShadow: {
      "studio-xs": "0 1px 2px rgba(23,23,23,0.04)",
      "studio-sm": "0 8px 24px rgba(23,23,23,0.05)",
      "studio-md": "0 20px 60px rgba(23,23,23,0.07)",
      "studio-lg": "0 24px 80px rgba(23,23,23,0.08)",
      "studio-cta": "0 8px 20px rgba(23,23,23,0.12)",
    },
    borderRadius: {
      studio: "28px",
      "studio-lg": "32px",
    },
  },
}
```

---

## Quality Checklist

* [ ] Does the page follow a single centered vertical spine?
* [ ] Is the hero composed of avatar, headline, intro, CTA pair, and proof row?
* [ ] Are the primary CTAs near-black instead of saturated accent colors?
* [ ] Are project sections stacked vertically rather than placed in a crowded grid?
* [ ] Does each project card include a large media frame?
* [ ] Does each project card include an app icon?
* [ ] Does each project card include a tiny editorial label?
* [ ] Does each project card include one clear outcome metric?
* [ ] Does each project card include a tonal status badge?
* [ ] Are testimonial strips optional and visually secondary?
* [ ] Are shadows soft contact shadows rather than heavy drop shadows?
* [ ] Are all borders pale stone or whisper gray?
* [ ] Is typography using Satoshi or Onest for display and DM Sans or Inter for body?
* [ ] Is the color palette restricted to white, ivory, pale gray, stone, graphite, and near-black?
* [ ] Are decorative gradients completely avoided?
* [ ] Are saturated status colors avoided?
* [ ] Does the page feel spacious, quiet, and studio-like?

---

## Allowed vs Not Allowed

### Allowed

* White, ivory, pale gray, soft stone, graphite, and near-black.
* Near-black primary buttons.
* White or ivory secondary buttons with stone borders.
* Large rounded project sections.
* Stacked vertical product presentation.
* Soft contact shadows.
* Hairline borders.
* Compact uppercase editorial labels.
* Monochrome status badges.
* Large media frames.
* App icons or lettermarks.
* Short outcome metric blocks.
* Optional testimonial strips.
* Subtle blur-to-clear reveal animations.
* Minimal monochrome icons.

### Not Allowed

* Saturated blue, purple, green, orange, or pink CTA buttons.
* Decorative gradients.
* Neon glows.
* Glassmorphism-heavy panels.
* Loud colorful badges.
* Dense bento grids for the primary product sequence.
* Heavy dark shadows.
* Overly large navigation.
* Emoji-based app icons.
* Confetti or celebratory decorative effects.
* Complex multi-color charts.
* Crowded project cards with too many metrics.
* Floating cards with exaggerated hover motion.
* Dark full-page backgrounds.