--- version: alpha name: Plaid description: A near-white fintech canvas where Plaid Sans governs every surface with precision weight control, a signature holographic gradient CTA sits against deep-navy product cards, and fine shadow layers communicate hierarchy without ever reaching for saturated brand color. colors: # Canvas + surfaces background: "#ffffff" surface: "#faf7ff" # page hero gradient midpoint — soft lavender-white surface-tint: "#f0f2fd" # hero gradient start — perceptible lavender wash surface-card: "#02294b" # deep-navy product feature cards surface-light: "#e5fcff" # hover state for feature cards — pale cyan # Ink / text ink: "#111112" # primary near-black for headlines ink-body: "#232424" # standard body text ink-secondary: "#6b7785" # supporting copy, meta ink-muted: "#747677" # captions, disabled, placeholders on-dark: "#f1faff" # text on deep-navy (#surface-card) sections on-primary: "#111112" # text on holographic gradient CTA # Brand teal accent (product chrome + nav highlights) primary: "#088181" # teal — icon accents, hover highlights, link color primary-deep: "#05565c" # deeper teal — secondary text on light, card accents primary-darkest: "#012e37" # nav dropdown text, dialog labels primary-mid: "#034049" # hover states on teal text # Holographic gradient (CTA button background — opaque approx of center stop) cta-gradient-start: "#e5effb" # lavender-blue gradient start cta-gradient-mid: "#cbfcb3" # mint gradient midpoint cta-gradient-end: "#f9dbff" # lilac gradient end # Semantic success: "#23d09c" success-bg: "#d0fce4" # was rgba(35,208,156,0.15) — Google format requires hex error: "#d83d57" error-bg: "#ffd7dc" # was rgba(216,61,87,0.15) — Google format requires hex warning: "#e6ba23" # Borders + dividers border: "#eaeff0" border-mid: "#dde3e9" border-dark: "#c7d4df" # Shadow tints (opaque approximations for elevation table) shadow-soft: "#111111" # was hsla(0,0%,7%,0.08) — Google format requires hex shadow-mid: "#3f3f3f" # was rgba(63,63,63,0.12) — Google format requires hex typography: display-hero: fontFamily: "Plaid Sans, Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 72px fontWeight: 400 lineHeight: 1.05 letterSpacing: -1px display: fontFamily: "Plaid Sans, Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 56px fontWeight: 400 lineHeight: 1.08 letterSpacing: -0.5px heading-section: fontFamily: "Plaid Sans, Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 36px fontWeight: 500 lineHeight: 1.15 letterSpacing: -0.18px heading-sub: fontFamily: "Plaid Sans, Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0px body-large: fontFamily: "Plaid Sans, Inter, ui-sans-serif, system-ui, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "Cern, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-small: fontFamily: "Cern, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0px button-ui: fontFamily: "Cern, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0px nav-link: fontFamily: "Cern, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0px caption: fontFamily: "Cern, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.08px code: fontFamily: "Inconsolata, Consolas, Courier, monospace" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 96px 5xl: 128px rounded: none: 0px xs: 2px sm: 6px md: 8px lg: 12px xl: 16px 2xl: 24px 3xl: 40px pill: 999px components: button-primary: backgroundColor: "{colors.cta-gradient-start}" # rendered as linear-gradient(108deg, #e5effb, #cbfcb3 50%, #f9dbff) textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.surface-light}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px border: "1px solid {colors.border-mid}" button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px border: "1px solid {colors.primary}" button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px button-ghost-hover: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 24px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 32px card-dark: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" rounded: "{rounded.2xl}" padding: 32px card-dark-hover: backgroundColor: "{colors.surface-light}" textColor: "{colors.primary-darkest}" rounded: "{rounded.2xl}" padding: 32px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 16px border: "1px solid {colors.border-mid}" input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 16px border: "1px solid {colors.primary}" badge: backgroundColor: "{colors.surface-tint}" textColor: "{colors.primary-deep}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px badge-teal: backgroundColor: "{colors.success-bg}" textColor: "{colors.primary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 0px 24px code-block: backgroundColor: "{colors.surface-card}" textColor: "{colors.on-dark}" typography: "{typography.code}" rounded: "{rounded.lg}" padding: 24px --- # Plaid Design System ## Overview Plaid operates in the unusual position of being both infrastructure and identity — the invisible connective tissue of fintech, yet a brand that must project trustworthiness and technical depth. Its design system answers this tension with a deliberately quiet canvas: a near-white `{colors.background}` layered with barely-there lavender washes (`{colors.surface-tint}` through `{colors.surface}`) that keep the eye at rest while establishing a sophisticated, slightly otherworldly palette. The result reads as scientific calm — a lab coat worn by engineers who understand color theory. The one moment of visual spectacle is also the most counterintuitive: the primary CTA uses a holographic pastel gradient (lavender-blue to mint to lilac) against that serene white field. Rather than following the fintech convention of a bold solid-color button, Plaid chose softness as the declaration of confidence. The gradient does not pulse or animate — it simply sits there, iridescent and assured, contrasting with the stark deep-navy product cards (`{colors.surface-card}` at `#02294b`) that frame the rest of the product story. These navy cards are the only truly saturated surfaces on the page, and they function like windows into the product: dark, precise, lit from within. Typography is built around two proprietary fonts. Plaid Sans handles the marketing layer — display headlines, hero copy, section introductions — at weights 300–900 with tight negative letter-spacing on large sizes. Cern picks up the product and UI layer: navigation, body text, form elements. Together they create a two-register system where the brand voice speaks in one voice and the product chrome speaks in another, without ever feeling mismatched. Inconsolata handles all code and data surfaces, reinforcing the developer-first audience. The effect is precise, functional, and quietly confident. **Key Characteristics:** - Two-layer type system: `{typography.display-hero}` (Plaid Sans) for brand surfaces; `{typography.body}` (Cern) for product/UI chrome - Hero page canvas uses a subtle lavender-to-white gradient (`{colors.surface-tint}` → `{colors.surface}`) rather than flat white - Holographic pastel gradient CTA (lavender-mint-lilac) — Plaid's signature button treatment, intentionally soft against the quiet canvas - Deep-navy cards (`{colors.surface-card}`) function as product spotlights — the only saturated surfaces on the marketing page - Teal accent system: `{colors.primary}` (#088181) → `{colors.primary-deep}` → `{colors.primary-darkest}` for nav hierarchy and interactive highlights - Shadow system is minimal and neutral — `{colors.shadow-soft}` at very low opacity, never brand-tinted - Border radius spans from a nearly-invisible 2px (`{rounded.xs}`) through 24px (`{rounded.2xl}`) and 999px pills — generous range used deliberately by component - Developer-first code surfaces use `{colors.surface-card}` (same navy as product cards) with `{typography.code}` (Inconsolata) - Semantic colors (success teal, error red) are present but subdued — confirmation UI, not celebration UI - Focus ring uses `{colors.primary}` to maintain accessibility without introducing a new accent - Navigation uses transparent bar that gains a frosted glass background on scroll via CSS `backdrop-filter` - Animation timing: primary easing at `cubic-bezier(0.23, 1.2, 0.32, 1)` (slight overshoot), 350ms — kinetic but not playful ## Colors ### Primary Canvas - **White** (`{colors.background}`): The true base — nav, forms, cards, body - **Lavender-white** (`{colors.surface}`): Hero page midground — gentle separation without hard edges - **Lavender wash** (`{colors.surface-tint}`): Hero gradient origin — barely-perceptible color identity signal ### Product & Dark Surfaces - **Deep navy** (`{colors.surface-card}`): Product feature cards, code blocks, dark-section containers. The dramatic counterweight to the pale canvas - **Pale cyan** (`{colors.surface-light}`): Hover state on dark cards — reveals interactivity with a breath of coolness ### Text Hierarchy - **Near-black** (`{colors.ink}`): Headlines, primary labels — `{typography.display-hero}` and `{typography.heading-section}` - **Dark charcoal** (`{colors.ink-body}`): Standard body and UI text - **Slate** (`{colors.ink-secondary}`): Supporting copy, meta labels, subheadings - **Muted** (`{colors.ink-muted}`): Captions, placeholders, disabled text ### Brand Accent — Teal - **Teal** (`{colors.primary}`): Interactive highlights, icon accents, link hover states, focus rings — the brand's one opinionated color on light surfaces - **Deep teal** (`{colors.primary-deep}`): Secondary text in nav dropdowns, card accent labels - **Darkest teal** (`{colors.primary-darkest}`): Nav dropdown text, dialog copy — approaches near-black in context ### CTA Gradient The primary button background is never a flat color. The three gradient stops (`{colors.cta-gradient-start}`, `{colors.cta-gradient-mid}`, `{colors.cta-gradient-end}`) combine as `linear-gradient(108deg, #e5effb, #cbfcb3 50%, #f9dbff)` — a holographic pastel sequence unique to Plaid's CTA vocabulary. ### Semantic - **Success** (`{colors.success}`): Confirmation states, connected-account indicators - **Error** (`{colors.error}`): Validation failures, disconnected states - **Warning** (`{colors.warning}`): Pending or caution states ### Borders & Elevation - **Soft border** (`{colors.border}`): Default card edges, dividers - **Mid border** (`{colors.border-mid}`): Input outlines, list separators - **Shadow tint** (`{colors.shadow-soft}`): Used at 8% opacity across all shadow levels — neutral gray, never brand-tinted ## Typography ### Font Families - **Plaid Sans** (proprietary): The marketing voice — weights 300 (Light) through 900 (Black). Used for display headings, hero copy, and section intros. No public Google Font equivalent; closest match for fallback is Inter. - **Cern** (proprietary): The product voice — weight 400 (Regular), 500 (Medium), 600 (SemiBold), 800 (ExtraBold). Used for navigation, body text, UI labels, form elements. Closest fallback: Helvetica. - **Inconsolata** (open source): Code and data surfaces. Available on Google Fonts. ### Hierarchy The complete type scale is declared in the `typography:` token block above. Use tokens directly via reference. | Token | Use | |---|---| | `display-hero` | Primary page headline — hero above-the-fold copy | | `display` | Section-level display — major features, feature-page heroes | | `heading-section` | Section titles within the page flow | | `heading-sub` | Card titles, feature callouts, dialog headers | | `body-large` | Lead paragraphs, marketing subheadings | | `body` | Standard body copy, form labels, nav items (Cern) | | `body-small` | Secondary descriptions, help text (Cern) | | `button-ui` | All button labels, tab labels (Cern SemiBold) | | `nav-link` | Navigation link items (Cern Medium) | | `caption` | Timestamps, footnotes, badge labels | | `code` | Code samples, API keys, data literals (Inconsolata) | ### Principles - Plaid Sans owns the emotion layer; Cern owns the function layer — never mix them at the same hierarchy level - Tight negative letter-spacing at large sizes (`{typography.display-hero}` at -1px) prevents loose spacing at display scale - Weight contrast is the primary emphasis tool — no italic for emphasis on product chrome, no all-caps for labels - Body text on `{colors.surface-card}` always uses `{colors.on-dark}` (`#f1faff`) for maximum contrast ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. Spacing is generous: the marketing site breathes with 48–128px between sections, reinforcing the sense of calm authority. Product sections use tighter 24–32px internal padding to keep information dense without feeling crowded. ### Grid & Container - Max content width: approximately 1008px (126 × 8px base units from the `--unit` CSS variable system) - 12-column grid with `16px` gutters - Full-bleed sections for dark product cards — the `{colors.surface-card}` container extends edge-to-edge - Padding on mobile: `24px` horizontal; expands to `48px` at 640px+ ### Whitespace Philosophy - Whitespace is the primary design element — sections breathe at `{spacing.4xl}` to `{spacing.5xl}` vertically - The lavender canvas gradient does the tonal work that borders or rules would do in a denser system - Information density increases inside dark navy cards — the color shift signals a shift in register from narrative to product data ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Body copy, plain sections, nav bar | | Subtle (Level 1) | `0px 2px 4px hsla(0,0%,7%,0.08)` | Inline badges, small interactive elements | | Card (Level 2) | `0px 8px 16px hsla(0,0%,7%,0.08)` | Feature cards on light background | | Elevated (Level 3) | `0px 8px 8px hsla(0,0%,7%,0.08)` | Modal bodies, dropdowns | | Dialog (Level 4+) | `0px 16px 24px hsla(0,0%,7%,0.08)` | Full modals, notification overlays | | Nav bar (scroll) | `0px 2px 6px rgba(0,0,0,0.06), 0px 6px 12px rgba(63,63,63,0.12)` | Frosted glass nav on scroll | | Focus Ring | `outline: 2px solid {colors.primary}; outline-offset: 2px` | Keyboard navigation indicator | **Shadow Philosophy**: Plaid's shadows are deliberately anonymous — neutral gray at very low opacity, never tinted with brand color. This keeps depth communication invisible: you feel elevation without consciously registering a shadow. The nav bar is the exception, gaining a more prominent two-layer shadow on scroll to anchor the sticky header without harsh borders. ## Shapes The complete radius scale is in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Full-bleed sections, full-width image containers | | `xs` | 2px | Legacy buttons in product dashboard UI (Cern-era components) | | `sm` | 6px | Small chips, compact badges | | `md` | 8px | Standard inputs, small cards, tooltips | | `lg` | 12px | Feature cards, dialog boxes | | `xl` | 16px | Standard marketing cards, modal containers | | `2xl` | 24px | Large product-screenshot cards, dark feature cards | | `3xl` | 40px | Oversized hero UI elements | | `pill` | 999px | All CTA buttons, tags, nav pills | Plaid's radius range is unusually wide — from a barely-rounded 2px to a full pill — and this is intentional. Buttons are always `{rounded.pill}`, creating a consistent soft loop around every interactive element. Cards occupy the middle range based on their prominence. The width of the spectrum lets components signal their purpose through shape alone. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly. ### Button Variants - **`button-primary`** — Holographic pastel gradient background (`{colors.cta-gradient-start}` → `{colors.cta-gradient-mid}` → `{colors.cta-gradient-end}`), `{colors.on-primary}` text, `{rounded.pill}`. Plaid's signature touch. Used for primary page CTAs ("Start building", "Talk with our team") - **`button-secondary`** — White fill with `{colors.border-mid}` border, `{colors.ink}` text, `{rounded.pill}`. Used for secondary actions on light backgrounds - **`button-ghost`** — No fill, no border, `{colors.ink}` text. Used for tertiary actions and inline text navigation ### Cards - **`card`** — Standard marketing card on `{colors.surface}` with `{rounded.xl}`, `{spacing.xl}` padding - **`card-dark`** — Deep navy `{colors.surface-card}`, `{colors.on-dark}` text, `{rounded.2xl}`. Product screenshot containers, feature spotlights. Hover transitions to `{colors.surface-light}` to reveal interactivity ### Inputs Standard `{components.input}` with `{colors.border-mid}` outline. Focus state uses `{colors.primary}` border — the teal accent makes focused fields immediately legible without the neon outline common to fintech forms. ### Badges / Tags Two variants: lavender-tinted `{components.badge}` for category labels; `{components.badge-teal}` for connected/active status. Both use `{rounded.pill}` and `{typography.caption}`. ### Navigation Transparent bar at page top; gains `backdrop-filter: blur` + dual-layer shadow on scroll. Nav links in `{typography.nav-link}` (Cern Medium). Dropdown menus use `{colors.primary-darkest}` text with `{colors.primary}` hover — the teal cascade in action. ### Code Blocks `{components.code-block}` uses the same deep navy as product cards (`{colors.surface-card}`), creating visual continuity between "product" and "documentation" surfaces. Inconsolata at `{typography.code}`. ## Do's and Don'ts ### Do - Use `{rounded.pill}` for every interactive button — the full-pill shape is Plaid's most consistent visual signature - Render the CTA as the full holographic gradient; never flatten it to a solid color or use just one gradient stop - Reserve `{colors.surface-card}` for product feature containers and code blocks only — dark navy sections need clear purpose - Apply `{colors.primary}` (teal) sparingly: icon accents, link hovers, focus rings, active nav items. It should feel like a highlight, not a palette - Use `{typography.display-hero}` (Plaid Sans) for marketing copy and `{typography.body}` (Cern) for UI copy — maintain the two-register split - Maintain `{spacing.4xl}` (96px) minimum vertical breathing room between major page sections on desktop - Keep shadow tints neutral — never use `{colors.primary}` or brand gradients as shadow color - Pair `{colors.on-dark}` text (`#f1faff`) exclusively with `{colors.surface-card}` surfaces for readable contrast ### Don't - Don't introduce a solid-color primary button — the gradient CTA is non-negotiable for primary actions - Don't use `{colors.primary}` (teal `#088181`) as a page background or large surface fill — it belongs at icon/accent scale only - Don't mix `{typography.display-hero}` (Plaid Sans) and `{typography.body}` (Cern) at the same text hierarchy level - Don't use border-radius values between `{rounded.xl}` (16px) and `{rounded.pill}` (999px) for buttons — the system skips this range intentionally - Don't use brand-tinted or colored shadows — all elevation is expressed with neutral gray shadow tints - Don't use `{colors.ink}` (#111112) text directly on `{colors.surface-card}` — always use `{colors.on-dark}` (#f1faff) - Don't introduce intermediate lavender or teal surfaces that don't map to the existing surface hierarchy — the gradient canvas is part of the brand, not a customizable backdrop - Don't use Plaid Sans for body or UI copy — its variable weight and marketing sizing make it inappropriate below `{typography.heading-sub}` sizes --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <640px | Single column, 24px horizontal padding, stacked CTAs, compressed hero | | Mobile | 640–1023px | Two-column cards, 44px nav height, wider spacing on sections | | Tablet | 640–1023px | Side-by-side feature cards begin, hero type scale steps down | | Desktop | 1024–1279px | Full grid active, max-width container, 50px nav height | | Large Desktop | ≥1280px | Hero type at full `{typography.display-hero}` scale, dark cards at maximum height (584–619px) | ### Touch Targets - All buttons rendered at minimum 48px height on mobile - `{rounded.pill}` shape ensures generous tap area even for compact buttons - Nav items have minimum 44px tap target via explicit height on `{typography.nav-link}` elements ### Collapsing Strategy - Navigation collapses to hamburger at <640px; dropdown menus become full-screen dialogs with `{colors.primary-darkest}` text - Dark product cards (`{colors.surface-card}`) collapse from two-column to full-width at mobile, maintaining their 417px min-height - Hero gradient canvas persists across all breakpoints; type scale steps from 72px to ~48px on mobile - Spacing tokens contract: sections that use `{spacing.4xl}` (96px) on desktop drop to `{spacing.3xl}` (64px) on mobile ### Image Behavior - Product screenshots inside dark cards use `object-fit: contain` and `object-position: bottom center` - Foreground images have a subtle translate-Y on hover (`{animation-primary}` timing) — a restrained motion layer - Images are served as responsive `.webp` with appropriate `srcset` --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (#ffffff) - Hero canvas tint: `{colors.surface-tint}` (#f0f2fd) → `{colors.surface}` (#faf7ff) - Text: `{colors.ink}` (#111112) - Body text: `{colors.ink-body}` (#232424) - Supporting text: `{colors.ink-secondary}` (#6b7785) - Brand accent (teal): `{colors.primary}` (#088181) - Dark section background: `{colors.surface-card}` (#02294b) - Light text on dark: `{colors.on-dark}` (#f1faff) - CTA gradient: linear-gradient(108deg, `{colors.cta-gradient-start}`, `{colors.cta-gradient-mid}` 50%, `{colors.cta-gradient-end}`) - Border: `{colors.border}` (#eaeff0) ### Example Component Prompts - "Build a Plaid-style hero section: `{colors.background}` white base with a full-width gradient overlay from `{colors.surface-tint}` to `{colors.surface}`. Place a `{typography.display-hero}` headline in `{colors.ink}` at 72px, a `{typography.body-large}` subheading in `{colors.ink-secondary}` below it, then a `{rounded.pill}` CTA button with `background: linear-gradient(108deg, {colors.cta-gradient-start}, {colors.cta-gradient-mid} 50%, {colors.cta-gradient-end})` and `{colors.on-primary}` text using `{typography.button-ui}`." - "Create a Plaid product feature card: background `{colors.surface-card}` (#02294b), `{rounded.2xl}` corners, `32px` padding, headline in `{colors.on-dark}` using `{typography.heading-sub}`, supporting copy in `{colors.ink-secondary}` lightened for dark bg. On hover, transition background to `{colors.surface-light}` (#e5fcff) with `{colors.primary-darkest}` text." - "Design a Plaid-style navigation bar: transparent background on load, `{typography.nav-link}` links in `{colors.ink}`. On scroll, add backdrop-filter blur and `box-shadow: 0px 2px 6px rgba(0,0,0,0.06), 0px 6px 12px rgba(63,63,63,0.12)`. Include a `{rounded.pill}` primary CTA with the holographic gradient on the right." - "Create a Plaid input form: `{components.input}` with `{rounded.md}` corners, `1px solid {colors.border-mid}` outline, `{typography.body}` (Cern) font, `{colors.ink}` text. On focus, switch border to `1px solid {colors.primary}` — no glow or shadow. Label text in `{typography.body-small}` `{colors.ink-secondary}` above the field." - "Build a Plaid-style badge row: use `{components.badge}` (`{colors.surface-tint}` background, `{colors.primary-deep}` text, `{rounded.pill}`, `{typography.caption}`) for category labels like 'Finance', 'AI', 'Infrastructure'. Space badges `{spacing.sm}` apart. For active/connected state, switch to `{components.badge-teal}` (`{colors.success-bg}` background, `{colors.primary}` text)." - "Generate a Plaid-style code block: background `{colors.surface-card}` (#02294b), `{rounded.lg}` corners, `{spacing.lg}` padding, `{typography.code}` (Inconsolata 14px) in `{colors.on-dark}` (#f1faff). Add a subtle top-bar label in `{colors.ink-secondary}` showing the language name at `{typography.caption}` size." ### Iteration Guide 1. Start with `{colors.background}` white, then apply the `{colors.surface-tint}` → `{colors.surface}` lavender gradient as a full-page CSS `background` — this is the foundation of Plaid's visual identity 2. Render the CTA as the full three-stop holographic gradient — never substitute a flat `{colors.primary}` fill for primary actions 3. Use `{typography.display-hero}` (Plaid Sans) for all headline text; switch to `{typography.body}` (Cern) at the body and UI layer — never blur this boundary 4. Shadows are always neutral: `hsla(0, 0%, 7%, 0.08)` — increment blur and spread by level, never change the color 5. Color hierarchy: `{colors.ink}` → `{colors.ink-body}` → `{colors.ink-secondary}` → `{colors.ink-muted}` for text — four levels, no jumps 6. Button border radius is always `{rounded.pill}` (999px); card radius follows prominence (`{rounded.xl}` standard, `{rounded.2xl}` feature/dark cards) 7. Deploy `{colors.surface-card}` only for product feature sections and code blocks — dark navy is a deliberate punctuation, not a recurring motif --- ## 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 Plaid. Brand names and trademarks belong to their respective owners.