FEATURE
Headline that anchors the card
A short editorial line that demonstrates how body copy reads on this surface, paired with the heading typography above.
Style classification against canonical archetypes (shadcn-neutral, apple-glass, carbon-enterprise, polaris-friendly, ...). Complementary to the technical Stack fingerprint above.
preview_tokens (LLM-resolved, 16 keys)
Every token below is sourced from the live CSS. Buttons, cards, and surfaces use the same hex values your production stylesheet ships today.
// design.tokens.ts export const tokens = { primary: "#533afd", surface: "#ffffff", text: "#533afd", };
Each cell renders a single button using the live tokens. Use this to audit the full surface of the component at a glance.
| SM | MD | LG | |
|---|---|---|---|
| Primary · default | |||
| Primary · hover | |||
| Primary · disabled | |||
| Secondary · default | |||
| Secondary · hover | |||
| Tertiary · default |
No @font-face declarations found.
No tokens.
No CSS variables declared in source.
Computing…
---
version: alpha
name: Stripi-design-analysis
description: An inspired interpretation of Stripi's design language — a financial-infrastructure brand built on a deep navy ink, an electric indigo primary, and a recurring atmospheric gradient mesh that occupies the upper third of nearly every marketing page. The system pairs the proprietary Sohne family at thin (300) weights with negative letter-spacing for editorial-density display headlines, and uses tabular-figure body type where money and numerics matter. Buttons are tight-radius pills, cards live on near-white surfaces, and the dashboard track flips polarity to a familiar dark-app shell.
colors:
primary: '#533afd'
primary-deep: '#4434d4'
primary-press: '#2e2b8c'
primary-soft: '#665efd'
primary-bg-subdued-hover: '#b9b9f9'
brand-dark-900: '#1c1e54'
ink: '#0d253d'
ink-secondary: '#273951'
ink-mute: '#64748d'
ink-mute-2: '#61718a'
on-primary: '#ffffff'
canvas: '#ffffff'
canvas-soft: '#f6f9fc'
canvas-cream: '#f5e9d4'
hairline: '#e3e8ee'
hairline-input: '#a8c3de'
ruby: '#ea2261'
magenta: '#f96bee'
lemon: '#9b6829'
shadow-blue: '#003770'
typography:
display-xxl:
fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
fontSize: 56px
fontWeight: 300
lineHeight: 1.03
letterSpacing: '-1.4px'
fontFeature: ss01
display-xl:
fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
fontSize: 48px
fontWeight: 300
lineHeight: 1.15
letterSpacing: '-0.96px'
fontFeature: ss01
display-lg:
fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
fontSize: 32px
fontWeight: 300
lineHeight: 1.1
letterSpacing: '-0.64px'
fontFeature: ss01
display-md:
fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
fontSize: 26px
fontWeight: 300
lineHeight: 1.12
letterSpacing: '-0.26px'
fontFeature: ss01
heading-lg:
fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
fontSize: 22px
fontWeight: 300
lineHeight: 1.1
letterSpacing: '-0.22px'
fontFeature: ss01
heading-md:
fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
fontSize: 20px
fontWeight: 300
lineHeight: 1.4
letterSpacing: '-0.2px'
fontFeature: ss01
heading-sm:
fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
fontSize: 18px
fontWeight: 300
lineHeight: 1.4
letterSpacing: 0
fontFeature: ss01
body-lg:
fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
fontSize: 16px
fontWeight: 300
lineHeight: 1.4
letterSpacing: 0
fontFeature: ss01
body-md:
fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
fontSize: 15px
fontWeight: 300
lineHeight: 1.4
letterSpacing: 0
fontFeature: ss01
body-tabular:
fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
fontSize: 14px
fontWeight: 300
lineHeight: 1.4
letterSpacing: '-0.42px'
fontFeature: tnum
button-md:
fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
fontSize: 16px
fontWeight: 400
lineHeight: 1
letterSpacing: 0
fontFeature: ss01
button-sm:
fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
fontSize: 14px
fontWeight: 400
lineHeight: 1
letterSpacing: 0
fontFeature: ss01
caption:
fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
fontSize: 13px
fontWeight: 400
lineHeight: 1.4
letterSpacing: '-0.39px'
fontFeature: tnum
micro:
fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
fontSize: 11px
fontWeight: 300
lineHeight: 1.4
letterSpacing: 0
fontFeature: ss01
micro-cap:
fontFamily: sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif
fontSize: 10px
fontWeight: 400
lineHeight: 1.15
letterSpacing: 0.1px
fontFeature: ss01
rounded:
xs: 4px
sm: 6px
md: 8px
lg: 12px
xl: 16px
pill: 9999px
spacing:
xxs: 2px
xs: 4px
sm: 8px
md: 12px
lg: 16px
xl: 24px
xxl: 32px
huge: 64px
components:
button-primary-pill:
backgroundColor: '{colors.primary}'
textColor: '{colors.on-primary}'
typography: '{typography.button-md}'
rounded: '{rounded.pill}'
padding: 8px 16px
button-primary-pill-pressed:
backgroundColor: '{colors.primary-press}'
textColor: '{colors.on-primary}'
typography: '{typography.button-md}'
rounded: '{rounded.pill}'
padding: 8px 16px
button-secondary:
backgroundColor: '{colors.canvas}'
textColor: '{colors.primary}'
typography: '{typography.button-md}'
rounded: '{rounded.pill}'
padding: 8px 16px
button-on-dark:
backgroundColor: '{colors.brand-dark-900}'
textColor: '{colors.on-primary}'
typography: '{typography.button-md}'
rounded: '{rounded.pill}'
padding: 8px 16px
text-input:
backgroundColor: '{colors.canvas}'
textColor: '{colors.ink}'
typography: '{typography.body-md}'
rounded: '{rounded.sm}'
padding: 8px 12px
text-input-focused:
backgroundColor: '{colors.canvas}'
textColor: '{colors.ink}'
typography: '{typography.body-md}'
rounded: '{rounded.sm}'
padding: 8px 12px
card-feature-light:
backgroundColor: '{colors.canvas}'
textColor: '{colors.ink}'
typography: '{typography.body-md}'
rounded: '{rounded.lg}'
padding: 32px
card-pricing:
backgroundColor: '{colors.canvas}'
textColor: '{colors.ink}'
typography: '{typography.body-md}'
rounded: '{rounded.lg}'
padding: 32px
card-pricing-featured:
backgroundColor: '{colors.brand-dark-900}'
textColor: '{colors.on-primary}'
typography: '{typography.body-md}'
rounded: '{rounded.lg}'
padding: 32px
card-cream-band:
backgroundColor: '{colors.canvas-cream}'
textColor: '{colors.ink}'
typography: '{typography.body-md}'
rounded: '{rounded.lg}'
padding: 32px
card-dashboard-mockup:
backgroundColor: '{colors.canvas}'
textColor: '{colors.ink}'
typography: '{typography.body-tabular}'
rounded: '{rounded.lg}'
padding: 24px
pill-tag-soft:
backgroundColor: '{colors.primary-bg-subdued-hover}'
textColor: '{colors.primary-deep}'
typography: '{typography.micro-cap}'
rounded: '{rounded.pill}'
padding: 4px 8px
nav-bar-on-mesh:
backgroundColor: '{colors.canvas}'
textColor: '{colors.ink}'
typography: '{typography.body-md}'
rounded: '{rounded.xs}'
padding: 16px 24px
link-on-light:
backgroundColor: '{colors.canvas}'
textColor: '{colors.primary}'
typography: '{typography.body-md}'
rounded: '{rounded.xs}'
padding: 0px
footer-light:
backgroundColor: '{colors.canvas}'
textColor: '{colors.ink-mute}'
typography: '{typography.caption}'
rounded: '{rounded.xs}'
padding: 64px 24px
source:
type: awesome-design-md
slug: stripe
url: https://getdesign.md/stripe/design-md
preview_tokens:
button_primary_bg: '#533afd'
button_primary_text: '#ffffff'
button_primary_border: '#533afd'
button_secondary_bg: transparent
button_secondary_text: '#533afd'
button_secondary_border: '#f6f9fc'
button_tertiary_text: '#533afd'
surface_bg: '#ffffff'
card_bg: '#ffffff'
text: '#533afd'
text_muted: '#e3e8ee'
border: '#f6f9fc'
accent: '#533afd'
button_radius: 8px
card_radius: 12px
input_radius: 8px
---
## Overview
Stripi's design language opens with the gradient mesh. A wide horizontal band of pastel cream, sherbet orange, lavender, electric indigo, and ruby pink occupies the upper third of nearly every marketing page — the brand's instantly-recognizable atmospheric backdrop. Type and product UI mockups float above it on `{colors.canvas}` (white), with the gradient acting as both decoration and visual anchor. The lower portion of the page returns to white, with feature explanations on `{colors.canvas-soft}` (a barely-tinted cool off-white) and dashboard product mockups composited as faux IDE/console panels in deep navy.
The color system has two primary roles. **Indigo** (`{colors.primary}` — `#533afd`) is the brand's signature CTA color, used sparingly: one filled pill per band. **Deep navy** (`{colors.ink}` — `#0d253d`) is the universal body text color and the fill of dashboard mockups, the featured pricing tier, and the dark-app surfaces on the dashboard track. Ruby (`{colors.ruby}`) and magenta (`{colors.magenta}`) appear inside the gradient mesh and as accent dots in product UI mockups; they are not used as button colors.
Typography is built around **Sohne** at weight 300 with negative letter-spacing — the brand's editorial-density display signature. Display sizes (32–56px) use -1.4px to -0.64px tracking; body sizes use 0; tabular caption sizes (where money and numerics matter) use the OpenType `tnum` feature plus a tightening -0.36 to -0.42px tracking. The `ss01` stylistic set is enabled across all roles.
**Key Characteristics:**
- Gradient-mesh backdrop on every marketing hero — cream/orange/lavender/indigo/ruby horizontally washed across the upper third of the page.
- Single-indigo CTA hierarchy: filled `{colors.primary}` pill is the only filled button on marketing surfaces.
- Sohne thin (weight 300) display tier with negative tracking from -1.4px to -0.2px depending on size.
- Tabular-figure body type (`tnum`) for any cell containing money or numerics — the brand's quiet financial-data signal.
- Dark-app dashboard track: deep navy product UI mockups sit composited above the white canvas, frequently with rendered code or dashboard tables inside.
- Pill-shaped buttons (`{rounded.pill}` 9999px) with tight `8px 16px` padding — short, decisive, transactional.
- Cream-band feature cards (`{colors.canvas-cream}`) introduce a warm interlude between blue/white sections without breaking the brand's chromatic logic.
## Colors
> **Source pages:** home (`/`), `/payments`, `/pricing`, `dashboard.stripe.com/register/payments`.
### Brand & Accent
- **Indigo** (`{colors.primary}` — `#533afd`): The brand's signature CTA color. Filled-pill button, link emphasis, gradient anchor.
- **Indigo Deep** (`{colors.primary-deep}` — `#4434d4`): A deeper indigo used in gradient mid-stops and as the press-state warmer alternative.
- **Indigo Press** (`{colors.primary-press}` — `#2e2b8c`): Pressed-state lift of the primary.
- **Indigo Soft** (`{colors.primary-soft}` — `#665efd`): A lighter indigo used in product-UI accents and chart highlights.
- **Indigo Subdued** (`{colors.primary-bg-subdued-hover}` — `#b9b9f9`): Pale indigo fill used as soft tag background.
- **Brand Dark 900** (`{colors.brand-dark-900}` — `#1c1e54`): The deep navy used on the featured pricing tier and dashboard chrome.
- **Ruby** (`{colors.ruby}` — `#ea2261`): Gradient accent and chart highlight; never a button.
- **Magenta** (`{colors.magenta}` — `#f96bee`): Brighter pink stop in gradient meshes.
- **Lemon** (`{colors.lemon}` — `#9b6829`): Warm sherbet stop in gradient backdrops.
### Surface
- **Canvas** (`{colors.canvas}` — `#ffffff`): Default page background.
- **Canvas Soft** (`{colors.canvas-soft}` — `#f6f9fc`): Cool-tinted off-white used on feature bands beneath the gradient hero.
- **Canvas Cream** (`{colors.canvas-cream}` — `#f5e9d4`): Warm cream used as a feature-band fill — the brand's chromatic interlude.
- **Hairline** (`{colors.hairline}` — `#e3e8ee`): 1px borders on cards and tables.
- **Hairline Input** (`{colors.hairline-input}` — `#a8c3de`): Slightly cooler hairline used on form inputs.
### Text
- **Ink** (`{colors.ink}` — `#0d253d`): Default body text color across the brand. Deep navy, never pure black.
- **Ink Secondary** (`{colors.ink-secondary}` — `#273951`): Secondary text on white.
- **Ink Mute** (`{colors.ink-mute}` — `#64748d`): Helper text, captions, table labels.
- **Ink Mute 2** (`{colors.ink-mute-2}` — `#61718a`): Near-equivalent to ink-mute used in nav.
- **On Primary** (`{colors.on-primary}` — `#ffffff`): Text on indigo / dark-navy surfaces.
### Semantic
The brand does not use a separate semantic color palette in the marketing system — error / success states live in dashboard-product UI specifically.
## Typography
### Font Family
The display and UI tier is **Sohne** (proprietary, licensed from Klim Type Foundry) at weights 300 (thin) and 400 (regular). The variable font (`sohne-var`) is loaded with `font-feature-settings: "ss01"` enabled globally — the stylistic set substitutes a single-story `a` and other character variants that are part of the brand's typographic signature.
When Sohne is unavailable, fall back to **SF Pro Display** at thin weights, then system-ui. For maximum brand fidelity, **Inter** (open-source) at weight 300 with `font-feature-settings: "ss01"` and `letter-spacing: -1.4px` on display sizes approximates the rhythm closely.
### Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xxl}` | 56px | 300 | 1.03 | -1.4px | Hero headline |
| `{typography.display-xl}` | 48px | 300 | 1.15 | -0.96px | Section opener |
| `{typography.display-lg}` | 32px | 300 | 1.1 | -0.64px | Card title / sub-section |
| `{typography.display-md}` | 26px | 300 | 1.12 | -0.26px | Compact card title |
| `{typography.heading-lg}` | 22px | 300 | 1.1 | -0.22px | Pricing tier name |
| `{typography.heading-md}` | 20px | 300 | 1.4 | -0.2px | Section sub-heading |
| `{typography.heading-sm}` | 18px | 300 | 1.4 | 0 | Mini-section label |
| `{typography.body-lg}` | 16px | 300 | 1.4 | 0 | Marketing body lead |
| `{typography.body-md}` | 15px | 300 | 1.4 | 0 | Default UI body |
| `{typography.body-tabular}` | 14px | 300 | 1.4 | -0.42px | Money / numeric tables (uses `tnum`) |
| `{typography.button-md}` | 16px | 400 | 1.0 | 0 | Pill button label |
| `{typography.button-sm}` | 14px | 400 | 1.0 | 0 | Compact pill label |
| `{typography.caption}` | 13px | 400 | 1.4 | -0.39px | Helper, table labels |
| `{typography.micro}` | 11px | 300 | 1.4 | 0 | Fine print |
| `{typography.micro-cap}` | 10px | 400 | 1.15 | 0.1px | All-caps eyebrow |
### Principles
- **Thin weight is the brand.** Display tiers always render at weight 300. Bumping to 400+ removes the brand's editorial air.
- **Negative tracking on display.** -1.4px at 56px, scaling proportionally down to -0.2px at 20px. The negative tracking is the brand's typographic signature.
- **Tabular figures for money.** Any cell rendering currency, transaction amounts, or numeric counts uses `font-feature-settings: "tnum"` plus a tightening tracking. The brand quietly signals its financial DNA through this micro-detail.
- **`ss01` globally.** Apply `font-feature-settings: "ss01"` to the body element so the stylistic-set substitution is on for every text role.
### Note on Font Substitutes
Sohne is proprietary. Use **Inter** (open-source via Google Fonts) at weight 300 with `letter-spacing: -1.4px` and `font-feature-settings: "ss01"` for display tiers — Inter is the closest open-source analogue. For body sizes, Inter at 300 weight with `font-feature-settings: "tnum"` (where applicable) is the canonical substitute. Avoid Helvetica or system-ui defaults — they're heavier than the brand needs.
## Layout
### Spacing System
- **Base unit**: 8px (with 2 / 4 / 12 sub-tokens for fine work).
- **Tokens**: `{spacing.xxs}` 2px · `{spacing.xs}` 4px · `{spacing.sm}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 24px · `{spacing.xxl}` 32px · `{spacing.huge}` 64px.
- **Section padding**: 64–96px on marketing surfaces; 32–48px on dashboard / product surfaces.
- **Card internal padding**: 32px on feature cards; 24px on dashboard mockups.
### Grid & Container
- Marketing pages center in a ~1200px container with the gradient mesh extending edge-to-edge above.
- Pricing collapses 4-up → 2-up → 1-up at 1024 / 768 breakpoints.
- Dashboard product mockups use their own internal grids (12-col tables, 3-col card grids) rendered as static composites.
### Whitespace Philosophy
The gradient mesh occupies the upper third of the page; the white canvas below is generously padded. Section gaps tend toward 96px, with content tightening to 32px on dashboard / pricing pages where users compare and act.
## Elevation & Depth
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat | Default surface |
| 1 | `box-shadow: rgba(0,55,112,0.08) 0 1px 3px` | Card lift on white |
| 2 | `box-shadow: rgba(0,55,112,0.08) 0 8px 24px, rgba(0,55,112,0.04) 0 2px 6px` | Floating panels, dashboard mockup chrome |
| 3 | Gradient mesh backdrop | The brand's primary depth medium — atmospheric color rather than literal shadow |
### Decorative Depth
The gradient mesh IS the depth system. Implemented as a layered SVG or large background image rather than CSS gradients (the actual mesh has organic blob shapes that aren't CSS-renderable). The mesh provides the brand's signature lift; literal shadows are reserved for product-UI mockups and stay subtle.
## Shapes
### Border Radius Scale
| Token | Value | Use |
|---|---|---|
| `{rounded.xs}` | 4px | Hairline tags, table chrome |
| `{rounded.sm}` | 6px | Form inputs |
| `{rounded.md}` | 8px | Compact cards, alerts |
| `{rounded.lg}` | 12px | Pricing cards, feature cards |
| `{rounded.xl}` | 16px | Dashboard product mockup chrome |
| `{rounded.pill}` | 9999px | All buttons, tag pills |
### Photography Geometry
The brand uses **product UI mockups** more than photography. Dashboard composites render as faux IDE/terminal/dashboard chrome inside `{rounded.lg}` 12px containers with a subtle `box-shadow`. Real photography appears in customer logo strips and the rare case-study card; treated as inset 4:3 with no shadow.
## Components
### Buttons
**`button-primary-pill`** — the dominant CTA system-wide.
- Background `{colors.primary}`, text `{colors.on-primary}`, type `{typography.button-md}`, padding `{spacing.sm} {spacing.lg}` (8px 16px), rounded `{rounded.pill}` 9999px.
- Pressed state `button-primary-pill-pressed` shifts background to `{colors.primary-press}`.
**`button-secondary`** — outline-style alternative.
- Background `{colors.canvas}`, text `{colors.primary}`, 1px solid `{colors.primary}` border, same pill geometry.
**`button-on-dark`** — used on dashboard / dark surfaces.
- Background `{colors.brand-dark-900}`, text `{colors.on-primary}`, same pill geometry.
### Cards & Containers
**`card-feature-light`** — feature explanation card on white.
- Background `{colors.canvas}`, padding `{spacing.xxl}`, rounded `{rounded.lg}` 12px, 1px `{colors.hairline}` border, optional Level 1 shadow.
**`card-pricing`** — standard pricing tier.
- Background `{colors.canvas}`, padding `{spacing.xxl}`, rounded `{rounded.lg}`, 1px `{colors.hairline}` border. Title `{typography.heading-lg}`, price `{typography.display-md}`, body `{typography.body-md}`, CTA pinned bottom as `button-primary-pill`.
**`card-pricing-featured`** — the inverted dark featured tier.
- Background `{colors.brand-dark-900}`, text `{colors.on-primary}`, otherwise identical structure to `card-pricing`. The deep-navy fill is the brand's distinctive featured-tier choice.
**`card-cream-band`** — warm interlude card.
- Background `{colors.canvas-cream}`, text `{colors.ink}`, padding `{spacing.xxl}`, rounded `{rounded.lg}`. Used to break up the indigo / white rhythm with warmth.
**`card-dashboard-mockup`** — composited dashboard / product UI screenshot.
- Background `{colors.canvas}`, type `{typography.body-tabular}` (with `tnum`), padding `{spacing.xl}` 24px, rounded `{rounded.lg}` 12px, Level 2 shadow. Often contains nested mini-mockups: code preview + dashboard table + chart card.
### Inputs & Forms
**`text-input`** — standard form field.
- Background `{colors.canvas}`, text `{colors.ink}`, type `{typography.body-md}`, padding `{spacing.sm} {spacing.md}` (8px 12px), rounded `{rounded.sm}` 6px, 1px `{colors.hairline-input}` border.
- Focus state `text-input-focused`: border swaps to `{colors.primary}`.
### Navigation
**`nav-bar-on-mesh`** — top nav floating over the gradient hero.
- Background `{colors.canvas}` (or transparent depending on scroll), text `{colors.ink}`, padding `{spacing.lg} {spacing.xl}`. Logo wordmark on the left, primary nav center, sign-in + filled `button-primary-pill` on the right.
### Pills, Tags, and Chips
**`pill-tag-soft`** — subdued indigo tag.
- Background `{colors.primary-bg-subdued-hover}`, text `{colors.primary-deep}`, type `{typography.micro-cap}`, padding `4px 8px`, rounded `{rounded.pill}`.
### Signature Components
**Gradient Mesh Backdrop** — pastel cream → sherbet orange → lavender → indigo → ruby pink stops blurred horizontally across the upper third of the page. Implemented as SVG or a large background image — not a flat CSS gradient (the real mesh has organic blob shapes).
**Composited Dashboard Mockup** — multi-layer faux-product-UI compositions: an IDE panel on the left, a dashboard table center, a chart card on the right, all rendered at small scale inside `{rounded.lg}` containers with subtle Level 2 shadows. The composite is the brand's most-photographed feature.
**Tabular-Figure Money Type** — every number rendering money, count, or transaction value uses `font-feature-settings: "tnum"`. The brand's quiet signal that it's a financial-infrastructure platform.
**`link-on-light`** — inline links on light surfaces.
- Text `{colors.primary}` rendered in `{typography.body-md}`, no underline by default.
**`footer-light`** — site-wide footer.
- Background `{colors.canvas}`, text `{colors.ink-mute}`, type `{typography.caption}`, padding `{spacing.huge} {spacing.xl}` (64px 24px). Holds 4–6 columns of link groups, social icons, and a small legal row.
## Do's and Don'ts
### Do
- Reserve `{colors.primary}` for filled CTAs and inline link emphasis — it should appear sparingly, one filled button per band.
- Apply the gradient mesh to every marketing hero; bare-canvas heroes feel off-brand.
- Render display tiers at weight 300 with negative letter-spacing — the thin tracking is the typographic signature.
- Use `font-feature-settings: "tnum"` on every money / numeric cell.
- Apply `font-feature-settings: "ss01"` globally on the body element.
- Pair every feature explanation with a composited product UI mockup; the brand's argument is "look at the actual product."
### Don't
- Don't bump display weight above 300 — at 400 the brand's editorial air collapses.
- Don't add new accent colors outside the documented gradient stops (cream / orange / lavender / indigo / ruby / magenta).
- Don't use the indigo `{colors.primary}` as a body-text color — it's a CTA and link color, not a type color at body size.
- Don't shrink button padding below `8px 16px` — the tight pill is part of the brand's transactional feel.
- Don't render money cells without `tnum` — it breaks the quiet financial-data signature.
- Don't replace the pill shape with rounded-rectangles for buttons.
## Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Wide | ≥ 1440px | Full gradient mesh edge-to-edge; dashboard composite at full scale |
| Desktop | 1024–1440px | Default content max-width; pricing 4-up |
| Tablet | 768–1023px | Pricing 2-up; dashboard composite simplifies to 2 panels |
| Mobile | < 768px | Pricing 1-up; hamburger nav; display drops 56 → 36px |
### Touch Targets
- Pill buttons hit ≥ 40×40px on mobile via padding scaling. On smaller screens, buttons size up to 44×44px to maintain WCAG AAA.
- Form fields stay at 40px minimum height.
### Collapsing Strategy
- Display tiers stair-step 56 → 48 → 32 → 26 → 22px through the breakpoints.
- Gradient mesh re-tiles on mobile to preserve the wash without disappearing.
- Dashboard composites simplify to single-panel mockups on mobile; the multi-layer composition only renders at desktop+.
- Pricing tiers stair-step 4-up → 2-up → 1-up.
### Image Behavior
Product UI composites use `srcset` with art-direction crops at major breakpoints. Mobile crops focus on the most actionable inner panel; desktop crops show the full multi-layer composition.
## Iteration Guide
1. Focus on ONE component at a time.
2. Reference component names and tokens directly (`{colors.primary}`, `{button-primary-pill}-pressed`, `{rounded.pill}`).
3. Run `npx @google/design.md lint DESIGN.md` after edits.
4. Add new variants as separate entries.
5. Default body to `{typography.body-md}` (15px); use `{typography.body-tabular}` for any money / numeric cell.
6. Apply `ss01` globally on the body; apply `tnum` per-element on numeric content.
7. The gradient mesh is non-negotiable on marketing heroes — bare-canvas heroes break the brand.
{
"colors": {
"hex": [
"#533afd",
"#4434d4",
"#2e2b8c",
"#665efd",
"#b9b9f9",
"#1c1e54",
"#0d253d",
"#273951",
"#64748d",
"#61718a",
"#ffffff",
"#f6f9fc",
"#f5e9d4",
"#e3e8ee",
"#a8c3de",
"#ea2261",
"#f96bee",
"#9b6829",
"#003770"
],
"hex_usage": {
"#533afd": 3,
"#4434d4": 2,
"#2e2b8c": 2,
"#665efd": 2,
"#b9b9f9": 2,
"#1c1e54": 2,
"#0d253d": 3,
"#273951": 2,
"#64748d": 2,
"#61718a": 2,
"#ffffff": 4,
"#f6f9fc": 2,
"#f5e9d4": 2,
"#e3e8ee": 2,
"#a8c3de": 2,
"#ea2261": 2,
"#f96bee": 2,
"#9b6829": 2,
"#003770": 1
}
},
"typography": {
"family": [
"sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif"
],
"size": [
"12px",
"16px",
"24px",
"36px",
"48px"
]
},
"fonts": [],
"spacing": [],
"radii": []
}{
"external": [],
"preload": [],
"imports_resolved": 0,
"inline_style_blocks": 0,
"inline_style_attrs": 0,
"failed": []
}{
"overall": 82,
"grade": "B",
"source": "imported-design-md",
"note": "Imported from curated DESIGN.md; not scored from live extraction evidence.",
"categories": {
"color_discipline": {
"score": 80,
"grade": "B",
"value": "curated markdown",
"ideal": "live evidence"
},
"typography": {
"score": 80,
"grade": "B",
"value": "curated markdown",
"ideal": "font evidence"
},
"tokenization": {
"score": 70,
"grade": "C",
"value": "heuristic frontmatter",
"ideal": "extracted tokens"
},
"lint_compliance": {
"score": 80,
"grade": "B",
"value": "imported",
"ideal": "0E 0W"
},
"accessibility": {
"score": 70,
"grade": "C",
"value": "not audited",
"ideal": "100% AA"
}
}
}