# Design System Inspiration of Hidden Brains

## 1. Visual Theme & Atmosphere

Hidden Brains' interface is the portfolio site of a two-decade-old software and AI engineering studio dressed in editorial confidence — a digital showroom that wants to read "trusted legacy" and "contemporary AI lab" in the same breath. The canvas is a deliberate duet: near-black ink (`#121212`) hero and footer slabs framing generous pure-white (`#ffffff`) work-showcase sections, so the page moves like a magazine that alternates black-and-white spreads.

The signature move is the **serif-sans editorial pairing of Inria Serif + Roboto**, set against a **quartet of pastel accent cards** (lavender `#e2dbfd`, cream `#feffcf`, sky `#ebf5fc`, mint `#d7ffe9`) arranged in a **staggered grid** where every other card drops 40 pixels lower than its neighbor. A single saturated brand red (`#fc3441`) is rationed across CTAs, pill buttons, and accordion-active states — it never colors a section background. The pastel quartet carries the personality; the red carries the action; the black-and-white stage holds everything together.

Typography is an intentional **serif-for-impact / sans-for-work split**. Inria Serif Bold drives every hero headline and section anchor at fluid `calc()` sizes up to 54px+, giving the page the cadence of a broadsheet. Roboto Medium handles every interactive surface — nav, buttons, body — in uppercase button labels and neutral 16px paragraphs. The contrast between the two faces is the whole system's voice.

**Key Characteristics:**
- Alternating `#121212` dark slabs and `#ffffff` light sections — no middle-gray canvas
- Inria Serif Bold headlines paired with Roboto Medium UI — a strict editorial duet
- Rationed brand red (`#fc3441`) on 150px radius pill CTAs only
- Four pastel accent tints (purple, gold, blue, green) used as **card backgrounds** with matching saturated accent bars
- Staggered card grids where alternating cards translate `translateY(40px)` downward
- Uppercase button labels with wide tracking — "EXPLORE OUR SOLUTIONS" is the brand voice
- 56px tall pill CTAs with 228px minimum width — substantial, confident, never dainty
- Circular 115px "view all" buttons with rotating border animations

## 2. Color Palette & Roles

### Primary
- **Signal Red** (`#fc3441`): The single most important action color. Reserved for primary CTAs, pill buttons, accordion-active fills, and link hover states. It is never used as a section background — always as a rationed punctuation.
- **Obsidian** (`#121212`): The dominant dark surface color and the primary text color on light backgrounds. A true near-black that reads as confident and editorial rather than soft. Used for hero slabs, footer, body headlines, and Inria Serif display copy.
- **Pure White** (`#ffffff`): The alternating light canvas for showcase sections, service grids, and card surfaces. It is exactly 50% of the page — dark and light alternate in near-equal rhythm.

### Secondary & Accent
Hidden Brains uses a **four-color accent quartet**, each with a saturated primary and a pastel tint pair. The saturated color lives on accent bars, icon badges, and numerals; the pastel tint lives on card backgrounds.

- **Heritage Purple** (`#6762ab`) + **Lavender Mist** (`#e2dbfd`): Strategic and planning content, service cards, step numerals.
- **Afternoon Gold** (`#f3ba19`) + **Cream Tint** (`#feffcf`): Achievements, testimonials, case-study highlights.
- **Clear Blue** (`#0086c3`) + **Pale Sky** (`#ebf5fc`): Technology and process steps, secondary informational cards.
- **Orchard Green** (`#2ba44a`) + **Spring Mint** (`#d7ffe9`): Growth, success metrics, AI offerings.
- **Cyan Pulse** (`#32ade6`): A secondary process indicator used sparingly in progress rings and phase markers.

### Surface & Background
- **Pure White** (`#ffffff`): The light section canvas and card background on dark slabs.
- **Obsidian** (`#121212`): The dark hero slab, the footer, and full-bleed dark feature bands.
- **Deep Ink** (`#1a1a1a`): One step lighter than Obsidian for nested dark cards and elevated surfaces on dark sections.
- **Fog** (`#f5f5f5`): The softest off-white for alternating light sections and subtle card separation.
- **Mist Border** (`#e5e5e5`): Hairline card borders and table dividers on white.

### Neutrals & Text
- **Obsidian** (`#121212`): Primary text on white, display headlines, dark surfaces.
- **Graphite** (`#555555`): Secondary body text, paragraph copy after a headline.
- **Ash** (`#8a8a8a`): Tertiary captions, metadata, form helper text.
- **Silver** (`#cccccc`): Disabled text, decorative dividers, subtle marks on dark surfaces.
- **White Soft** (`#f5f5f5`): Text on dark surfaces — never pure white at full opacity for body copy on `#121212`.

### Semantic & Borders
- **Mist Border** (`#e5e5e5`): Standard light-theme borders, card outlines, input outlines.
- **Fog** (`#f5f5f5`): Softest separator for nested content blocks.
- **Border Dark** (`#2a2a2a`): Borders on dark slabs — footer column dividers, dark cards.
- **Focus Ring** (`#fc3441` at 22% opacity): The focus halo on interactive elements, built from the brand red.
- **Hover Card Border** (`#cccccc`): The idle-to-hover border shift on AI offering cards.

### Gradient System
Hidden Brains is **deliberately gradient-light**. Where gradients exist they are functional overlays, not decorative fills.

- **Card Image Overlay**: `linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%)` — applied to the bottom of image-lead cards to ensure caption legibility.
- **Dark Slab Vignette**: `linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 100%)` — used behind video hero backgrounds for subtle depth.
- **No brand gradient.** The red (`#fc3441`) is always a solid fill — there is no "red-to-orange sunrise" pattern. Accent cards use solid pastel tints, not gradients.

## 3. Typography Rules

### Font Family
- **Display / Headlines**: `Inria Serif`, fallback `'Georgia', 'Times New Roman', serif`. Loaded weights: 400 (Regular) and 700 (Bold).
- **UI / Body / Buttons**: `Roboto`, fallback `'Helvetica Neue', Helvetica, Arial, sans-serif`. Loaded weights: 400 (Regular), 500 (Medium), 700 (Bold).
- **Numerical Emphasis**: `Inria Serif Regular` at large sizes — used for statistic numerals and step counters so the editorial serif voice appears in data as well as prose.

*Note: The serif/sans pairing is the core identity. Do not substitute a single-family system. Inria Serif supplies sophistication and legacy feel; Roboto supplies modern reliability. Every role must pick one or the other deliberately.*

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Hero Display | Inria Serif | clamp(36px, 6vw, 68px) | 700 | 1.15 | -0.01em | Main hero headline, dark slab |
| Section Heading H2 | Inria Serif | clamp(30px, 4.5vw, 54px) | 700 | 1.20 | -0.01em | Major section anchors |
| Sub-heading H3 | Inria Serif | clamp(24px, 3vw, 36px) | 700 | 1.30 | normal | Card group titles, mid-section |
| Card Title H4 | Inria Serif | clamp(20px, 2.2vw, 26px) | 700 | 1.35 | normal | Service and offering cards |
| Eyebrow Label | Roboto | 13px | 500 | 1.40 | 2px (UPPERCASE) | Section markers above headings |
| Statistic Numeral | Inria Serif | clamp(48px, 6vw, 72px) | 400 | 1.00 | -0.02em | Stat counters, step numbers |
| Body Large | Roboto | 18px | 400 | 1.65 | normal | Hero subheadlines, intros |
| Body Standard | Roboto | 16px (14.8px mobile) | 400 | 1.65 | normal | Default paragraph text |
| Body Small | Roboto | 14px | 400 | 1.55 | normal | Compact descriptions |
| Caption | Roboto | 13px | 500 | 1.50 | 0.2px | Metadata, timestamps |
| Nav Link | Roboto | 15px | 500 | 1.00 | 0.2px | Top navigation items |
| Button Label | Roboto | 14px | 500 | 1.00 | 1.2px (UPPERCASE) | All button text — always uppercase |

### Principles
- **Two families, strict roles**: Inria Serif lives in headlines and statistic numerals only. Roboto owns every interactive surface and all paragraph copy. Never mix roles.
- **Uppercase button labels**: Every button label uses `text-transform: uppercase` with 1.2px letter-spacing. "EXPLORE OUR SOLUTIONS," "READ MORE," "VIEW CASE STUDY" — the uppercase voice is part of the brand.
- **Serif for numerals**: Statistic blocks and step counters use Inria Serif Regular at 48–72px. The serif cut on a number is the signature "editorial data" moment.
- **Fluid sizing with `calc()` or `clamp()`**: Headlines scale smoothly from mobile to desktop. Hidden Brains uses `calc(18.4px + 1.75vw)` style expressions, but `clamp(min, vw, max)` achieves the same effect and is the recommended modern form.
- **Tight headline tracking**: Inria Serif headlines use -0.01em letter-spacing to counter the slight looseness of the bold weight at large sizes.
- **Generous body line-height**: Body copy sits at 1.65 — editorial, readable, never cramped.

## 4. Component Stylings

### Buttons

**Brand Pill (Primary CTA)** — the hero button of the system
- Background: Signal Red (`#fc3441`)
- Text: Pure White (`#ffffff`), uppercase, 14px Roboto Medium, 1.2px letter-spacing
- Min width: 228px
- Min height: 56px
- Padding: 0 24px
- Radius: 150px (fully pilled)
- Shadow: `0 4px 14px rgba(252,52,65,0.22)`
- Hover: background → white, text → Signal Red, 1.5px solid Signal Red border appears, shadow grows to `0 8px 22px rgba(252,52,65,0.28)`
- Used for "EXPLORE OUR SOLUTIONS," "GET IN TOUCH," and every conversion CTA

**Brand Pill Thin** — a compact inline variant
- Same color and radius as the primary pill
- Min width: 140px, height: 44px
- Padding: 0 20px
- Used inside dense card layouts and nav CTAs

**Outline Pill**
- Background: transparent
- Text: Obsidian (`#121212`) on light, White on dark, uppercase
- Border: `1.5px solid #121212` (or `#ffffff` on dark slabs)
- Same 150px radius, 56px min-height
- Hover: fills with Obsidian, text inverts to white

**Circular Arrow Button**
- 56px × 56px circle
- Background: Signal Red (`#fc3441`)
- White arrow icon (→) centered
- Hover: arrow translates 4px right, background darkens slightly
- Paired with text buttons as an icon-only affordance

**Circular "View All" Button**
- 115px × 115px circle
- Background: transparent
- Border: dashed 1px Obsidian
- Rotating border animation: the dashed border rotates 20s linear infinite on hover
- Label inside: "VIEW ALL" in 13px Roboto Medium uppercase
- A distinctive Hidden Brains component — an animated invitation rather than a static link

### Cards & Containers

**Pastel Accent Card** (the signature Hidden Brains card)
- Background: one of the four pastel tints (`#e2dbfd`, `#feffcf`, `#ebf5fc`, `#d7ffe9`)
- Min height: 246px
- Padding: 38px 40px
- Radius: 26px
- Left accent bar: 2px wide, 40px tall, positioned absolute left, colored in the saturated pair (`#6762ab`, `#f3ba19`, `#0086c3`, `#2ba44a`)
- Large Inria Serif Regular numeral (48–72px) in the same saturated accent color
- Title: Inria Serif Bold, `clamp(20px, 2.2vw, 26px)`
- Body: Roboto Regular 16px, Graphite `#555555`
- Hover: background shifts to pure white, `box-shadow: 0 5px 17px -1px rgba(0,0,0,0.15)`, title color stays

**Staggered Card Grid**: In a 2- or 4-column row, every other card receives `transform: translateY(40px)` so the grid reads as a wave rather than a strict baseline. On mobile this collapses to single-column with no translation.

**Service / AI Offering Card**
- Background: Pure White
- Max width: 512px
- Radius: 8px
- Border: `2px solid transparent` at rest
- Hover: border `#cccccc`, subtle `0 0 20px rgba(0,0,0,0.14)` glow
- Image section: 232px tall, `object-fit: cover`
- Content padding: 30px 60px
- Title: Inria Serif Bold clamp(22px, 2.4vw, 28px)
- Body: Roboto 15px, Graphite
- Bottom: Circular Arrow Button in the bottom-right corner

**Testimonial / Client Card**
- Background: Pure White or Cream Tint (`#feffcf`)
- Width: 520px, min-height: 293px
- Padding: 44px
- Radius: 26px
- Decorative circular pseudo-elements positioned top-right (64px Lavender circle + 32px Cream circle)
- Large opening quote mark in Inria Serif 72px, Heritage Purple (`#6762ab`), positioned absolute

### Inputs & Forms
- Background: Pure White on light sections, Deep Ink (`#1a1a1a`) on dark
- Border: `1.5px solid #e5e5e5` on light, `1.5px solid #2a2a2a` on dark
- Radius: 8px
- Padding: 16px 18px
- Font: Roboto Regular 15px
- Focus: border-color → Signal Red, outline → `0 0 0 4px rgba(252,52,65,0.18)`
- Label: 13px Roboto Medium uppercase, 1.2px tracking, Obsidian
- Helper text: 13px Ash (`#8a8a8a`), 6px below input

### Navigation
- Fixed top header — **transparent at hero** over the `#121212` slab, white text (`#ffffff`)
- On scroll: background transitions to `#ffffff`, text transitions to Obsidian (`#121212`), drop shadow appears (`0 2px 12px rgba(0,0,0,0.08)`)
- Height: 88px desktop, 68px mobile
- Logo mark on the left
- Links: Roboto Medium 15px, 36px gap
- Mega menu: white background, 30px padding, drops below nav with slight reveal animation
- Hover: link color shifts to Signal Red, no underline
- Right side: Brand Pill Thin CTA in Signal Red
- Mobile: 3-bar hamburger (3px tall spans), animated to cross on open

### Image Treatment
- Photography: high-saturation business and team shots — real people, not stock
- Border radius: 26px for featured card images, 8px for inline, 16px for tight thumbnails
- Subtle `box-shadow: 0 5px 17px -1px rgba(0,0,0,0.14)` on elevated imagery
- Video cards overlay `linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.6) 100%)` at the bottom for caption legibility
- Decorative circular pseudo-element shapes often orbit images (lavender or cream circles, 32–64px)

### Distinctive Components

**Four-Tile Hero Info Strip**
- A horizontal row of 4 cards sitting at the bottom of the dark hero slab
- Each card: pastel tint background, 26px radius, 2px colored left accent bar
- Content: short label + short value, all in Roboto
- The row uses the staggered pattern: card 2 and card 4 translate `translateY(40px)` down
- This is the single most recognizable Hidden Brains hero element

**Rotating Circular Badge**
- 166px or 214px diameter circle
- Transparent background, dashed border (1px Obsidian)
- Text wraps around the circle via SVG textPath
- Rotates 20s linear infinite
- Used for trust badges ("20 YEARS OF LEGACY • ESTABLISHED 2003 •")

**Sticky Client Marquee**
- Auto-scrolling horizontal logo strip
- Grayscale logos at 60% opacity
- Edge mask gradient for soft fade-in/out
- Pauses on hover

**Accordion (Service Expander)**
- Row padding: 18px 20px
- Idle: white background, Obsidian text
- Active: Signal Red (`#fc3441`) background, white text
- +/- icon on the right, rotates 45° on open
- Border-bottom `1px solid #e5e5e5` between rows

## 5. Layout Principles

### Spacing System
- Base unit: 4px
- Scale: 4px, 8px, 12px, 16px, 20px, 26px, 38px, 40px, 60px, 80px, 100px, 140px
- Card internal padding: 38–44px (generous, never cramped)
- Section vertical padding: `clamp(64px, 9vw, 140px)` — tall, editorial
- Container side padding: 20px mobile → 40px tablet → 80px desktop

### Grid & Container
- Max container width: **1280px** centered (wider than typical to accommodate the staggered quartet)
- 12-column grid with 30px gutters at desktop, 20px on tablet, 16px on mobile
- Hero: dark full-bleed slab, content constrained to 1280px with 4-tile info strip docked to the bottom
- Service/offering grids: 2-column or 4-column with the staggered translate pattern
- Testimonial cards: 2-column on desktop, 1-column mobile
- Footer: 4-column on desktop (company / services / resources / contact), 2-column tablet, 1-column mobile

### Whitespace Philosophy
- **Editorial rhythm**: Dark slabs and white sections alternate in near-equal proportion — the page reads like a bound magazine, not an infinite scroll.
- **Staggered asymmetry**: Cards deliberately break baseline alignment via the 40px translate. This is not an accident or an animation — it is the fixed layout.
- **Ration the red**: 90%+ of the page is black, white, and pastel. A single red button or accordion-active state carries the action. Never a red background band.

### Border Radius Scale
- Sharp (2px): Accent bars, thin dividers
- Subtly rounded (8px): Service cards, inputs, small containers
- Moderately rounded (16px): Inline imagery, nested cards
- Generously rounded (26px): Signature pastel accent cards, hero info tiles, testimonial cards
- Pill (150px / 999px): Primary CTAs, brand buttons, chips

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow, no border | Page background, body copy, dark slabs |
| Hairline (Level 1) | `1px solid #e5e5e5` | Standard cards on white, table dividers |
| Soft (Level 2) | `0 2px 12px rgba(0,0,0,0.08)` | Nav scroll state, resting AI offering cards |
| Lifted (Level 3) | `0 5px 17px -1px rgba(0,0,0,0.15)` | Hover card state, pastel → white transform |
| Glow (Level 4) | `0 0 20px rgba(0,0,0,0.14)` | AI offering card hover, image-lead elevation |
| Brand Halo | `0 4px 14px rgba(252,52,65,0.22)` | Primary CTA resting state |
| Brand Halo Hover | `0 8px 22px rgba(252,52,65,0.28)` | Primary CTA hover state |

**Shadow Philosophy**: Hidden Brains uses **near-black drop shadows with moderate spread** on light sections — never pure `rgba(0,0,0,1)` and never tinted with a hue beyond the brand red halo on CTAs. Dark sections avoid shadows entirely and rely on subtle border-color differences (`#2a2a2a` vs `#121212`) for elevation. The result is a system where shadows exist on white and colors exist on black — two different elevation languages for the two alternating canvases.

### Decorative Depth
- **Black ↔ White alternation**: Sections alternate between `#121212` and `#ffffff` rather than using shadows to define breaks. The luminosity flip is enough.
- **Pastel → White hover transform**: Pastel accent cards literally become white on hover, as if the color "lifts away" to reveal a clean card beneath. This is the system's most characteristic interaction.
- **Staggered translate**: The 40px baseline offset on alternating cards is a form of positional depth — it creates a physical wave effect across the grid.

## 7. Do's and Don'ts

### Do
- Use Obsidian (`#121212`) and Pure White (`#ffffff`) in roughly equal alternating slabs
- Use Inria Serif Bold for every headline and statistic numeral — the serif voice is the system
- Use Roboto Medium for every button, nav link, and body paragraph
- Ration Signal Red (`#fc3441`) to primary CTAs and accordion-active states only
- Use the pastel quartet (`#e2dbfd`, `#feffcf`, `#ebf5fc`, `#d7ffe9`) as **card backgrounds**, always with their saturated accent pair (`#6762ab`, `#f3ba19`, `#0086c3`, `#2ba44a`) as a left accent bar
- Use 150px radius pill buttons at 228×56px minimum for primary CTAs
- Use uppercase button labels with 1.2px letter-spacing — always
- Use the staggered card grid pattern (`translateY(40px)` on alternate cards) on desktop
- Use the pastel-to-white hover transform on accent cards
- Use large Inria Serif Regular numerals (48–72px) for statistics and step counters

### Don't
- Don't use a single font family — the Inria Serif + Roboto pair is the entire identity
- Don't use sentence-case button labels — always uppercase with tracking
- Don't use the brand red as a section background — it must remain a punctuation color
- Don't introduce multi-stop gradients beyond the functional image overlay
- Don't mix the pastel tints with each other on a single card — each card uses exactly one tint + its matching saturated accent
- Don't use middle-gray section backgrounds — only black, white, or pastel tints
- Don't use thin (<400) font weights — Inria reads spindly, Roboto loses presence
- Don't centre all content — the staggered grid and asymmetric card translation are the fingerprint
- Don't skip the uppercase eyebrow labels above section headings — they anchor the editorial voice
- Don't use pure black (`#000`) shadows — always at low opacity through rgba

## 8. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, hamburger nav, 4-tile hero becomes vertical stack, no stagger |
| Tablet | 640–991px | 2-column card grids, condensed nav with hamburger, stagger reduced to 20px |
| Desktop | 992–1279px | Full 4-column staggered grids, horizontal mega-nav, full 40px stagger |
| Large Desktop | 1280px+ | Container clamps at 1280px, maximum type scale, full hero info strip |

### Touch Targets
- Pill buttons: 56px min-height always — a single touch target spec across breakpoints
- Nav links: 48×48px hit area minimum on mobile
- Circular arrow buttons: 56px at desktop, 48px at mobile

### Collapsing Strategy
- **Navigation**: Transparent-over-dark horizontal mega nav → sticky white header → hamburger drawer
- **Hero**: 4-tile info strip → 2×2 grid → vertical stack; stagger is removed on mobile
- **Staggered card grid**: 4 columns → 2 columns → 1 column with stagger removed entirely on mobile (cards return to baseline)
- **Service grids**: 3 columns → 2 → 1 with consistent 20px gap
- **Statistics**: 4 columns → 2×2 grid, Inria Serif numerals stay large
- **Section padding**: `clamp(64px, 9vw, 140px)` auto-scales from desktop to mobile
- **Type**: `clamp()` ensures headlines shrink gracefully from 68px → 36px

### Image Behavior
- Card images scale proportionally inside their 26px radius containers
- Service card images crop with `object-fit: cover` to preserve card height consistency
- Client logos scale via SVG, maintaining grayscale and opacity on all sizes
- Decorative circular pseudo-elements shrink proportionally on mobile to avoid crowding

## 9. Agent Prompt Guide

### Quick Color Reference
- Primary CTA: "Signal Red (#fc3441)"
- Dark Canvas: "Obsidian (#121212)"
- Light Canvas: "Pure White (#ffffff)"
- Primary Text (light): "Obsidian (#121212)"
- Secondary Text: "Graphite (#555555)"
- Tertiary Text: "Ash (#8a8a8a)"
- Pastel Card — Purple: "Lavender Mist (#e2dbfd) + Heritage Purple accent (#6762ab)"
- Pastel Card — Gold: "Cream Tint (#feffcf) + Afternoon Gold accent (#f3ba19)"
- Pastel Card — Blue: "Pale Sky (#ebf5fc) + Clear Blue accent (#0086c3)"
- Pastel Card — Green: "Spring Mint (#d7ffe9) + Orchard Green accent (#2ba44a)"
- Borders (light): "Mist Border (#e5e5e5)"
- Borders (dark): "Border Dark (#2a2a2a)"
- Display Font: "Inria Serif Bold"
- UI Font: "Roboto Medium"

### Example Component Prompts
- "Create a dark hero section on Obsidian (#121212) with white text. Add a 13px Roboto Medium uppercase eyebrow label with 2px letter-spacing in white. Below it, a headline at clamp(36px, 6vw, 68px) Inria Serif Bold, line-height 1.15, tracking -0.01em. Subheadline at 18px Roboto Regular in #cccccc, line-height 1.65. Place a Brand Pill CTA in Signal Red (#fc3441) with white uppercase label 'EXPLORE OUR SOLUTIONS,' 228px min-width, 56px min-height, 150px radius, shadow 0 4px 14px rgba(252,52,65,0.22). Dock a 4-tile info strip at the bottom with cards in Lavender Mist (#e2dbfd), Cream Tint (#feffcf), Pale Sky (#ebf5fc), and Spring Mint (#d7ffe9) — each 26px radius, 2px colored left accent bar, staggered so tiles 2 and 4 translateY(40px) down."
- "Design a pastel accent card with background Lavender Mist (#e2dbfd), 26px radius, 38px padding, 246px min-height. Add a 2px wide 40px tall Heritage Purple (#6762ab) vertical accent bar on the left. Place a large Inria Serif Regular numeral at 72px in Heritage Purple. Below it, an Inria Serif Bold title at clamp(20px, 2.2vw, 26px) in Obsidian. Body text in Graphite (#555555) at 16px Roboto Regular, line-height 1.65. On hover, background becomes Pure White with box-shadow 0 5px 17px -1px rgba(0,0,0,0.15)."
- "Build a 4-column staggered card grid on Pure White. Each card uses a different pastel tint from the quartet. Apply transform: translateY(40px) to cards in positions 2 and 4 so the row reads as a wave. On mobile (<640px) remove the translate entirely and stack to single column."
- "Create a circular 'VIEW ALL' button at 115px diameter with transparent background and a dashed 1px Obsidian border. Inside, the label 'VIEW ALL' in 13px Roboto Medium uppercase, 1.2px letter-spacing. On hover, the dashed border rotates 20s linear infinite."
- "Build a service accordion with white rows, Obsidian text, 18px 20px padding, 1px Mist Border (#e5e5e5) bottom borders. On active, the row background becomes Signal Red (#fc3441) and text becomes white. The +/- icon on the right rotates 45° on open. Title uses Inria Serif Bold at 20px."

### Iteration Guide
1. Always specify the font by role — "Inria Serif Bold" for headlines, "Roboto Medium" for UI, never just "serif" or "sans"
2. Reference colors by name and hex — "Signal Red (#fc3441)" not "red"
3. Every button label must be uppercase with 1.2px letter-spacing
4. Ration the red — one red button per section, never a red section background
5. Pastel cards always pair with their saturated accent color, never mix tints
6. Use the staggered `translateY(40px)` pattern on desktop card grids of 2 or more
7. Sections should alternate between `#121212` dark slabs and `#ffffff` light canvases in roughly equal proportion
8. Use Inria Serif Regular for statistic numerals at 48–72px — the editorial numeral is a signature
9. Primary CTAs are 228×56px pills with 150px radius — never rectangular, never smaller
10. Hover states on pastel cards should transform background to Pure White with a `0 5px 17px -1px rgba(0,0,0,0.15)` shadow