--- version: alpha name: Rippling description: Black-canvas HR/IT platform — Basel custom sans at medium weight, signature amber-yellow CTA on obsidian backgrounds, warm-tinted border palette, and 4–8px corners that read as precise without ever being corporate-cold. colors: # Canvas + surfaces background: "#ffffff" surface: "#f9f8f7" # warm off-white — slightly warmer than pure white surface-dark: "#000000" # obsidian hero and dark sections surface-dark-alt: "#0d0d0d" # slightly lifted dark tile on dark canvas # Ink / text ink: "#000000" ink-secondary: "#3d3331" # warm dark brown for supporting copy ink-muted: "#756b67" # captions, metadata, muted labels ink-warm: "#cec1b8" # placeholder / disabled on dark; warm parchment tone on-dark: "#ffffff" # headings and body on dark sections on-dark-secondary: "#b5a9a3" # subdued copy on dark; was rgba(255,255,255,0.7) — Google format requires hex # Brand accent — the signature Rippling amber primary: "#ffa81d" # amber CTA, primary action, brand stamp primary-hover: "#d98f19" # darkened amber on hover (from dembrandt hover data) on-primary: "#000000" # black text on amber for legibility # Semantic success: "#22c55e" # standard green /* estimated */ warning: "#f59e0b" # standard amber /* estimated */ error: "#ef4444" # standard red /* estimated */ info: "#3b82f6" # standard blue /* estimated */ # Borders border: "#e1d8d2" # primary warm-beige border (most frequent in data) border-subtle: "#e5e7eb" # neutral cool gray rule / nav underline border-accent: "#ffa81d" # amber border on button outlines and focus # Focus focus-ring: "#2780ce" # blue focus ring (from --tw-ring-color); was rgba(39,128,206,0.5) — Google format requires hex # Shadow tints shadow-warm: "#281619" # was rgba(40,22,29,0.08) — Google format requires hex shadow-black: "#000000" # was rgba(0,0,0,0.2) — Google format requires hex typography: display-hero: fontFamily: "Basel, Plus Jakarta Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 48px fontWeight: 500 lineHeight: 1.08 letterSpacing: -1.5px display: fontFamily: "Basel, Plus Jakarta Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 42px fontWeight: 500 lineHeight: 1.14 letterSpacing: -1.5px heading-section: fontFamily: "Basel, Plus Jakarta Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 36px fontWeight: 500 lineHeight: 1.17 letterSpacing: -1px heading-sub: fontFamily: "Basel, Plus Jakarta Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 30px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0px title: fontFamily: "Basel, Plus Jakarta Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.33 letterSpacing: 0.25px body-large: fontFamily: "Basel, Plus Jakarta Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.44 letterSpacing: 0.25px body: fontFamily: "Basel, Plus Jakarta Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-medium: fontFamily: "Basel, Plus Jakarta Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px nav-link: fontFamily: "Basel, Plus Jakarta Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.47 letterSpacing: 0.25px button-ui: fontFamily: "Basel, Plus Jakarta Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.47 letterSpacing: 0.25px label: fontFamily: "Basel, Plus Jakarta Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.47 letterSpacing: 0.25px fontVariant: "uppercase" caption: fontFamily: "Basel, Plus Jakarta Sans, ui-sans-serif, system-ui, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0.25px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 80px 5xl: 120px rounded: none: 0px xs: 2px sm: 4px md: 8px lg: 12px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 16px 24px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 16px 24px button-secondary: backgroundColor: "transparent" textColor: "{colors.on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" border: "2px solid {colors.primary}" padding: 16px 24px button-secondary-hover: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" border: "2px solid {colors.primary}" padding: 16px 24px button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" border: "2px solid {colors.primary}" padding: 16px 24px button-ghost-hover: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 16px 24px button-video: backgroundColor: "{colors.border}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 8px 20px 8px 8px card: backgroundColor: "{colors.surface}" rounded: "{rounded.lg}" border: "1px solid {colors.border}" padding: 24px card-elevated: backgroundColor: "{colors.surface}" rounded: "{rounded.lg}" border: "1px solid {colors.border}" padding: 24px boxShadow: "2px 8px 12px 0px {colors.shadow-warm}" card-dark: backgroundColor: "{colors.surface-dark}" rounded: "{rounded.lg}" border: "1px solid {colors.border}" padding: 24px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" border: "1px solid {colors.border}" padding: 12px 16px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" border: "1px solid {colors.ink-secondary}" outline: "2px solid {colors.focus-ring}" padding: 12px 16px input-dark: backgroundColor: "transparent" textColor: "{colors.on-dark}" typography: "{typography.body}" rounded: "{rounded.sm}" border: "none" padding: 12px 16px badge: backgroundColor: "{colors.surface}" textColor: "{colors.ink-secondary}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 2px 6px nav: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" borderBottom: "1px solid {colors.border-subtle}" link: textColor: "{colors.ink}" typography: "{typography.body}" textDecoration: "none" link-hover: textColor: "{colors.on-dark}" textDecoration: "underline" --- # Rippling Design System ## Overview Rippling's design language is a study in controlled confidence. The canvas is white — clinical, even — but the design refuses to read as sterile. A warm-toned border palette (`{colors.border}`, a biscuit-toned `#e1d8d2`) infuses subtle humanity into card edges and dividers, pulling the eye away from the cold utility you'd expect from an HR platform and toward something more grounded. Section breaks and hero compositions frequently flip to obsidian (`{colors.surface-dark}`), creating hard contrast moments that signal Rippling's ambitions: this isn't legacy HR software in a new coat of paint, it's a company-wide command layer that means business. The typeface is Basel — Rippling's proprietary geometric sans — set consistently at weight 500 with tight negative tracking (−1.5px on hero sizes). It's confident without being boastful, precise without being sterile. The closest public analog is Plus Jakarta Sans, and it shares that typeface's quality of reading technical without feeling institutional. Body copy steps down to weight 400 with slightly positive tracking at 0.25px, creating a comfortable reading rhythm inside the tight headline architecture. The only moment of chromatic heat is `{colors.primary}`, a warm amber-yellow deployed exclusively on primary CTAs and the occasional icon accent — spending that color precisely, never casually. The overall impression is of a platform that has earned its complexity. Rippling handles payroll, devices, compliance, and headcount in one surface — and the design reflects that scope without letting the visual weight crush smaller affordances. Cards shadow warmly (a whisper of `rgba(40,22,29,0.08)`), dark-section text uses a muted warm secondary (`{colors.on-dark-secondary}`) so contrast never feels punishing, and animation is fast and purpose-driven (0.15–0.25s, cubic-bezier-eased) — a system built for people who use it every workday. **Key Characteristics:** - `{colors.primary}` amber is the only saturated color in the palette — every CTA, every focal highlight traces back to this single warm signal - `{colors.surface-dark}` obsidian sections create hard tonal breaks, never gradients, anchoring Rippling's serious-tool positioning - Basel at weight 500, −1.5px tracking for hero text — precision over personality, confidence without warmth-washing - `{colors.border}` warm-beige borders (`#e1d8d2`) humanize an otherwise black-and-white structural palette - `{rounded.sm}` (4px) dominates CTAs and inputs; `{rounded.md}` (8px) and `{rounded.lg}` (12px) for cards — geometry is precise, corners just barely softened - 8px base spacing grid, generous vertical rhythm: 48–120px section gutters - Motion budget: 0.15–0.25s cubic-bezier(0.4,0,0.2,1) for buttons, cards, media transforms - Dark-section secondary copy uses `{colors.on-dark-secondary}` (warm gray), never pure 70%-white, to stay warm in tone - Button outline variant uses a 2px amber border — the brand accent even at rest - Typography scale consolidates to Basel across all roles; no serif accent or mono display mix-ins - `{colors.focus-ring}` is a Tailwind blue (extracted from `--tw-ring-color`), contrasting with the amber CTA palette so keyboard state is always visible - Content-to-edge padding shrinks aggressively below 768px, with navigation collapsing behind a hamburger well before tablet breakpoints ## Colors ### Primary Surfaces - **White** (`{colors.background}`): the default page canvas — clean, unhinted - **Warm off-white** (`{colors.surface}`): cards, tiles, and raised modules — a warm `#f9f8f7` that reads subtly warmer than background - **Obsidian** (`{colors.surface-dark}`): hero sections, pricing, major dark-mode breaks ### Brand Accent - **Amber** (`{colors.primary}`): the single saturated hit — primary CTA buttons, icon accents, and focus border. On-color text is always `{colors.on-primary}` (black), maintaining legibility at low contrast - **Amber hover** (`{colors.primary-hover}`): darkened to `#d98f19` on interaction — same warmth, deeper value ### Ink / Text - **Ink** (`{colors.ink}`): pure black for all headings and primary body text on light - **Ink secondary** (`{colors.ink-secondary}`): `#3d3331` — warm dark brown for supporting copy, avoids the cool-gray flatness of standard secondary text - **Ink muted** (`{colors.ink-muted}`): `#756b67` — captions and metadata with a warm undertone - **On dark** (`{colors.on-dark}`): white for text on obsidian backgrounds - **On dark secondary** (`{colors.on-dark-secondary}`): warm parchment-gray for supporting copy on dark sections; was approx. rgba(255,255,255,0.7) — Google format requires hex ### Borders & States - **Border** (`{colors.border}`): `#e1d8d2` — dominant border color; warm, slightly peachy - **Border subtle** (`{colors.border-subtle}`): `#e5e7eb` — Tailwind-standard neutral rule for nav underlines and list dividers - **Border accent** (`{colors.border-accent}`): amber on button outlines - **Focus ring** (`{colors.focus-ring}`): a Tailwind blue (`#2780ce`), derived from `--tw-ring-color`, providing keyboard-state contrast independent of the amber accent ### Shadows - **Shadow warm** (`{colors.shadow-warm}`): used in card elevation at `2px 8px 12px 0px` — warmth-tinted, never cold - **Shadow black** (`{colors.shadow-black}`): baseline modal/overlay shadow ## Typography ### Font Family - **Primary**: Basel (proprietary), with public fallback: `Plus Jakarta Sans`, then `ui-sans-serif, system-ui, sans-serif` - Self-hosted as woff2 files (e.g. `61c4fc9417abf277-s.p.woff2`). Inter is also loaded as a secondary face for legacy or application UI (`Inter-Regular`, `Inter-SemiBold`, `Inter-roman.var`) - **No OpenType stylistic sets detected** in the Basel implementation (vs. sohne's ss01 or Inter's cv01 — Basel ships as a display-ready face without explicit feature overrides) ### Hierarchy The complete type scale is declared in the `typography:` token block above. Reference tokens directly via `{typography.display-hero}`, `{typography.body}`, etc. | Token | Use | |---|---| | `display-hero` | Primary hero headline: 48px/500/−1.5px | | `display` | Large feature sections: 42px/500/−1.5px | | `heading-section` | Section-level H2s: 36px/500/−1px | | `heading-sub` | Feature group headings: 30px/500 | | `title` | Card titles, feature callout headers: 24px/500 | | `body-large` | Feature description text, lead copy: 18px/400 | | `body` | Default paragraph and UI text: 16px/400 | | `body-medium` | Emphasized body copy, form labels: 16px/500 | | `nav-link` | Navigation items: 15px/500/+0.25px | | `button-ui` | Button labels: 15px/500/+0.25px | | `label` | Eyebrow labels, tags (uppercase): 15px/500/uppercase | | `caption` | Timestamps, footnotes, helper text: 12px/400 | ### Principles - Weight 500 dominates — there is no 700 or 900 on the marketing surface, making bold feel bold by context not by raw weight - Negative tracking tightens with size: −1.5px at display, neutral at body, slightly positive (+0.25px) for small UI labels and nav — the standard optically-correct rhythm - Line height compresses tightly at display (1.08–1.14) and opens generously for body (1.44–1.5) - All roles use Basel — no serif accent, no mono display. Typography personality comes from weight and size contrast, not font mixing - Inter is available as a fallback / application-UI face for the product layer but does not appear prominently on the marketing surface ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. Rippling's vertical rhythm is generous, even ambitious — `{spacing.5xl}` (120px) section gutters appear regularly on the homepage, separating major feature blocks with visual breathing room that signals a premium product. Horizontal gutters are more conservative (24–48px), keeping content dense and efficient. ### Grid & Container - Max content width: approximately 1280px - 12-column grid with 24px gutters on desktop - Prominent use of 2-column and asymmetric feature splits (large product screenshot left, copy column right) - Full-bleed dark sections break the grid at page edges ### Whitespace Philosophy - Section whitespace is used architecturally, not decoratively — 80–120px vertical gaps frame feature groups as chapters, not slides - Card internal padding is consistent at 24px, giving content room to breathe within the warm-bordered tile - Inline spacing between icon and label is tight (8px), reflecting the precision-first approach ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, `{colors.border}` rule | Default cards, list items, table rows | | Card (Level 1) | `2px 8px 12px 0px {colors.shadow-warm}` | Hovered cards, feature tiles, video play buttons | | Elevated (Level 2) | `0px 4px 8px 0px {colors.shadow-black}` at 20% | Dropdowns, tooltips, floating chrome | | Modal (Level 3) | `0px 96px 160px 48px rgba(27,16,20,0.6)` | Full overlay modals — deep, dramatic lift | | Focus Ring | `2px solid {colors.focus-ring}` | Keyboard-focused inputs and buttons | **Shadow Philosophy**: Rippling's shadow system is warm-tinted and restrained. The primary elevation signal is the card shadow (`shadow-warm` at very low opacity), which creates depth without calling attention to itself — consistent with a platform used daily where heavy visual chrome becomes fatiguing. Modal depth is dramatic by contrast, a very large blur radius on a deep near-black, signaling that leaving the current context is a significant state change. ## Shapes The complete radius scale is in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Full-bleed sections, horizontal rules, image bleeds | | `xs` | 2px | Micro badges, status indicators | | `sm` | 4px | Primary CTAs, secondary buttons, inputs, image corners | | `md` | 8px | Cards, modals, product screenshot frames | | `lg` | 12px | Large cards, feature tiles, elevated panels | | `pill` | 9999px | Rare; circular icon containers, avatar frames | The system skews toward `{rounded.sm}` and `{rounded.md}`. Buttons, inputs, and the most-used card type all land at 4px or 8px — corners are softened enough to read as modern, not so soft they feel consumer. There is no 16px+ large radius in frequent use; the design avoids the "friendly startup" rounded-rectangle look that would undermine Rippling's enterprise positioning. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly via `{components.button-primary}`, `{components.card}`, etc. ### Button variants - **`button-primary`** — Solid amber (`{colors.primary}`) fill with black label (`{colors.on-primary}`), 4px radius, 16px/24px padding. The single warm-saturated element on most pages; its scarcity is the source of its authority - **`button-secondary`** — Transparent fill with 2px amber border and white label, used on dark sections. Hover fills with solid amber - **`button-ghost`** — Same amber outline as secondary but with black label, for light-section secondary CTAs. Hover fills with amber - **`button-video`** — Warm beige fill (`{colors.border}`), 8px radius, generous left-padding for a play icon, used for inline video triggers ### Cards Cards come in two flavors: flat-border (`{components.card}`) for static listing contexts, and warm-shadow (`{components.card-elevated}`) for interactive or featured tiles. Dark variants (`{components.card-dark}`) flip to `{colors.surface-dark}` fill. All share `{rounded.lg}` (12px) and `{colors.border}` outlines. ### Inputs Light-surface inputs sit on a white background with the warm beige border (`{colors.border}`) at rest. On focus, border sharpens to `{colors.ink-secondary}` and a blue focus ring appears (`{colors.focus-ring}`). Dark-section email capture inputs remove the border entirely and rely on placeholder text contrast against the obsidian surface. ### Badges / Tags Micro-badges use `{rounded.xs}` (2px) — nearly square corners, reinforcing the precision aesthetic. Background is `{colors.surface}`, text in `{colors.ink-secondary}`. ### Navigation The nav uses a white background (`{colors.background}`) with a subtle bottom border (`{colors.border-subtle}`). Nav links are `{typography.nav-link}` (15px/500). On scroll, a box-shadow appears to separate the sticky nav from content. On mobile, items collapse behind a hamburger; the mega-menu panel beneath uses white card surfaces with warm-bordered sections. ## Do's and Don'ts ### Do - Use `{colors.primary}` amber exclusively for primary CTA buttons and the highest-priority interactive signal on any given view — its power comes from scarcity - Use `{colors.border}` (warm beige) on all card and tile outlines — the warm undertone is what separates Rippling's aesthetic from cold-gray SaaS defaults - Set hero and section headlines at weight 500 with negative tracking; weight 400 is for body copy only - Use `{colors.surface-dark}` obsidian for major tonal breaks — full-bleed sections, pricing, hero moments — never as a card color inside a light section - Maintain 4px (`{rounded.sm}`) on CTAs and inputs; reserve 12px (`{rounded.lg}`) for card containers and screenshot frames - Animate interactions at 0.15–0.25s with `cubic-bezier(0.4,0,0.2,1)` — perceived snappiness matches a platform where every second of daily use adds up - Use `{colors.focus-ring}` blue for keyboard states — the amber palette doesn't provide enough contrast for accessible focus indication - Keep body copy at `{typography.body}` weight 400 — the medium (500) variant is reserved for labels, nav, and emphasized callouts - Use the warm shadow (`{colors.shadow-warm}`) for card elevation; avoid cold black shadows which break the warm-tinted palette - Apply 120px (`{spacing.5xl}`) vertical gutters between major sections on marketing pages — the generosity signals premium without decoration ### Don't - Don't introduce a second saturated color — the amber's authority depends on it being the only warm-saturated element in a black-and-white structure - Don't use `{rounded.pill}` on CTA buttons — fully rounded buttons read as consumer-app, not enterprise platform - Don't set display text below weight 500 — the tightly-tracked headlines require the optical mass of 500 to read at their intended sizes - Don't use cold gray borders (`#d1d5db` and cooler) for card outlines — use `{colors.border}` (warm beige) to maintain palette warmth - Don't mix Basel with a display serif or decorative display face — the system is intentionally single-font-family - Don't use the amber (`{colors.primary}`) as a section background or text color — it exists only as a fill for CTA buttons and borders - Don't scale `{spacing.5xl}` (120px) section gutters down to 24px on mobile — they should halve (to ~48–64px), not collapse - Don't apply drop shadows to inline text or navigation items — shadow use is reserved for surface elevation only - Don't place white text directly on `{colors.primary}` amber — the contrast ratio is insufficient; always use `{colors.on-primary}` (black) - Don't break the 8px grid for arbitrary half-steps — Rippling's density depends on consistent rhythm --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile | <480px | Single-column, hamburger nav, minimal padding (16px horizontal) | | Mobile Large | 480–767px | Still single-column; hero text scales down to ~32px | | Tablet | 768–1023px | 2-column grid emerges; nav transitions from hamburger to abbreviated top links | | Desktop | 1024–1279px | Full grid, mega-menu available, product screenshots at full size | | Large Desktop | ≥1280px | Max content width capped at ~1280px; section gutters expand to full 120px | ### Touch Targets - CTA buttons are 16px vertical padding (min 48px tap height with text) — consistent with platform requirements - Navigation items expand touch area on mobile with additional vertical padding - Card tap areas extend to full tile boundaries ### Collapsing Strategy - Hamburger navigation triggers before 960px; the mega-menu is desktop-only - 2-up feature splits collapse to stacked single-column below 768px; screenshots stack below copy - Section gutters reduce from 120px to 48–64px on mobile - Full-bleed dark sections maintain edge-to-edge layout at all widths ### Image Behavior - Product screenshots use `object-fit: cover` with aspect-ratio constraints - Hero images and media tiles scale with a 0.5s `cubic-bezier(0.4,0,0.2,1)` transform on hover - Screenshots in dark sections are often lightly cropped with a bottom-fade gradient toward obsidian --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` - Surface: `{colors.surface}` - Dark section: `{colors.surface-dark}` - Primary text: `{colors.ink}` - Secondary text: `{colors.ink-secondary}` - Muted text: `{colors.ink-muted}` - Brand accent / CTA: `{colors.primary}` - CTA hover: `{colors.primary-hover}` - Text on CTA: `{colors.on-primary}` - Border: `{colors.border}` - Focus: `{colors.focus-ring}` ### Example Component Prompts - "Build a hero section using `{colors.surface-dark}` as the background, `{colors.on-dark}` for the headline in `{typography.display-hero}`, a body paragraph in `{typography.body-large}` at `{colors.on-dark-secondary}`, and a primary CTA button using `{components.button-primary}` (amber fill, black label, 4px radius, 16px 24px padding). Include a secondary outline CTA using `{components.button-secondary}` alongside it." - "Create a feature card using `{components.card}` (white `{colors.surface}` background, `{colors.border}` border, 12px radius, 24px padding). The card title is `{typography.title}` in `{colors.ink}`, body copy in `{typography.body}` at `{colors.ink-secondary}`, and an eyebrow label in `{typography.label}` uppercase at `{colors.ink-muted}` above the title." - "Render a primary CTA button block: use `{components.button-primary}` with `{colors.primary}` fill and `{colors.on-primary}` (black) label in `{typography.button-ui}`, 4px radius, 16px/24px padding. On hover, transition background-color to `{colors.primary-hover}` over 0.15s `cubic-bezier(0.4,0,0.2,1)`. Pair with a ghost button using `{components.button-ghost}` (transparent fill, 2px `{colors.border-accent}` amber border)." - "Build a navigation bar using `{components.nav}` — white background, bottom border in `{colors.border-subtle}`, nav links in `{typography.nav-link}` (15px/500/+0.25px tracking) at `{colors.ink}`. On scroll, add a subtle box-shadow `2px 8px 12px 0px {colors.shadow-warm}`. On mobile, collapse to a hamburger icon at 960px." - "Create a pricing tile section against a `{colors.surface-dark}` background. Cards use `{components.card-dark}` (obsidian fill, `{colors.border}` warm-beige outline, 12px radius, 24px padding). Pricing numbers in `{typography.display}` at `{colors.on-dark}`, plan names in `{typography.title}` at `{colors.on-dark}`, feature list in `{typography.body}` at `{colors.on-dark-secondary}`. The primary plan CTA uses `{components.button-primary}` (amber), while other plan CTAs use `{components.button-secondary}` (amber outline on dark)." - "Build an email capture form for a dark hero section. Input uses `{components.input-dark}` (no border, white placeholder text fading to `{colors.ink-warm}`, 12px/16px padding). Pair with `{components.button-primary}` as submit. On focus, show a 2px `{colors.focus-ring}` blue outline. On mobile, stack input and button vertically." ### Iteration Guide 1. **Start with canvas polarity** — decide light (`{colors.background}`) vs dark (`{colors.surface-dark}`) before any other decision. Dark sections are feature moments, not defaults 2. **Deploy amber once per view** — `{colors.primary}` is the highest-attention element; one primary CTA per view is the rule 3. **Track headlines tightly** — display and heading tokens have −1px to −1.5px tracking built in; honor it. Never set display text at weight 400 4. **Warm the borders** — use `{colors.border}` (`#e1d8d2`) on all card outlines; substituting a cool gray breaks the warmth signature 5. **Shadow with restraint** — `{colors.shadow-warm}` at 8% opacity for cards; reserve the deep modal shadow for true overlay states 6. **Keep radius range narrow** — 4px CTAs, 8px modals, 12px feature cards. No pill buttons, no 20px+ rounded rectangles 7. **Animate at 0.15–0.25s cubic-bezier** — buttons and cards faster (0.15s), media slower (0.5s). Avoid spring/bounce physics; the platform communicates efficiency, not delight --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Rippling. Brand names and trademarks belong to their respective owners.