---
version: alpha
name: Mercury
description: "Dawn over a valley, a hairline rule, and one iris pill that means go."
colors:
  on-surface: "#000000"
  surface: "#FBFCFD"
  primary: "rgba(82, 102, 235, 0.1)"
  lilac-surface: "#F5F4FD"
  card-light-ink: "#EDEDF3"
  purple-light-ink: "#EDECFB"
  graphite: "#272735"
  purple-graphite: "#28253B"
  slate: "#535461"
  rule-grey: "#C3C3CC"
  lilac-rule: "#C3C0DF"
  iris: "#5266EB"
  frosted-slate: "rgba(112, 115, 147, 0.1)"
  frosted-lilac: "rgba(175, 178, 206, 0.2)"
  night-band: "#171721"
  pill-charcoal: "#1E1E2A"
  pure-white: "#FFFFFF"
  pale-sky: "#CDDDFF"
typography:
  display-3:
    fontFamily: arcadiaDisplay
    fontSize: 72.0192px
    fontWeight: 360
    lineHeight: 79.2211px
    letterSpacing: 0em
  display-3-2:
    fontFamily: arcadiaDisplay
    fontSize: 62.1536px
    fontWeight: 360
    lineHeight: 68.369px
    letterSpacing: 0em
  heading-1:
    fontFamily: arcadia
    fontSize: 48px
    fontWeight: 400
    lineHeight: 55.2px
    letterSpacing: 0.24px
  heading-2:
    fontFamily: arcadia
    fontSize: 36px
    fontWeight: 400
    lineHeight: 41.4px
    letterSpacing: 0.36px
  heading-5:
    fontFamily: arcadia
    fontSize: 32px
    fontWeight: 400
    lineHeight: 36.8px
    letterSpacing: 0.48px
  heading-6:
    fontFamily: arcadia
    fontSize: 28px
    fontWeight: 400
    lineHeight: 33.6px
    letterSpacing: 0.42px
  heading-7:
    fontFamily: arcadia
    fontSize: 24px
    fontWeight: 400
    lineHeight: 28.8px
    letterSpacing: 0.48px
  heading-9:
    fontFamily: arcadia
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24.3px
    letterSpacing: 0em
  body-1:
    fontFamily: arcadia
    fontSize: 21.008px
    fontWeight: 400
    lineHeight: 28.3608px
    letterSpacing: 0em
  body-2:
    fontFamily: arcadia
    fontSize: 18px
    fontWeight: 400
    lineHeight: 24.3px
    letterSpacing: 0em
  body-3:
    fontFamily: arcadia
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22.4px
    letterSpacing: 0em
  body-4:
    fontFamily: arcadia
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  ui-1:
    fontFamily: arcadia
    fontSize: 16px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 0em
  caption:
    fontFamily: arcadia
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
    letterSpacing: 0.14px
  footnote:
    fontFamily: arcadia
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16.8px
    letterSpacing: 0.24px
rounded:
  focus-ring-on-links: 4px
  frosted-bar: 4px
  icon-tile: 8px
  media-frame-small: 8px
  media-frame-standard: 12px
  card: 12px
  legal-pill: 12px
  primary-button: 32px
  nav-pill: 40px
  round-control: 9999px
  email-input: 32px
  pricing-footer-strip: 0px
  inverted-band: 0px
spacing:
  s4: 4px
  s8: 8px
  s12: 12px
  s16: 16px
  control-inline: 20px
  s24: 24px
  grid-gutters: 32px
  gap-lg: 40px
  layout-padding-md: 72px
  row-gap-2xl: 80px
  layout-padding-lg: 112px
  layout-padding-xl: 128px
---
# Mercury — Style Reference

> Dawn over a valley, a hairline rule, and one iris pill that means go.

**Theme:** mixed

Mercury paints two closely related systems across the captured pages: the home and pricing pages run a neutral-grey theme, and the business-banking and working-capital pages run a purple-tinted twin, with the split falling between the marketing front door and the product pages. The two share every control, every radius and the same pair of typefaces — what changes is the ink and the night colour, so the neutral pages read cool grey where the product pages read faintly violet. The palette is almost entirely achromatic: near-white canvas, graphite heads, slate body, and a single saturated iris for the one action worth taking, most often as a ten-percent wash rather than a solid. Type is arcadiaDisplay for headings and arcadia for the rest, with hierarchy built from size rather than weight — the display face holds one weight and lets 72px do the shouting. The rhythm is generous and quiet: a 32px gutter grid, 72px to 128px of air between sections, and one-pixel rules doing the structural work most systems hand to shadows.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Ink Default | `#000000` | `--color-ink-default` | The inherited base text colour on structural wrappers (div ×851), never a fill; the ink you read is one of the theme inks below. |
| Canvas | `#FBFCFD` | `--color-background-default` | The light page ground and the sticky navbar fill on the pricing and product pages; never an ink. |
| Lilac Surface | `#F5F4FD` | `--color-surface-lilac` | The pale violet block fill on the purple-theme pages, and at 19% the frosted navbar on the business-banking page. |
| Card / Light Ink | `#EDEDF3` | `--color-text-inverse` | Two jobs: light ink on dark canvases and the fill of the 32px card. Its 415 text observations dwarf its 13 fills — read it as ink first. |
| Purple Light Ink | `#EDECFB` | `--color-text-inverse-purple` | The purple-theme twin, text only. Use it wherever the band is `#181623`; never mix the two inks on one canvas. |
| Graphite | `#272735` | `--color-text-default` | The heading and strong-label ink on the light canvas — 48px and 32px heads, labels on tinted buttons. |
| Purple Graphite | `#28253B` | `--color-text-default-purple` | The product pages' heading ink; carries the 72px display lines. |
| Slate | `#535461` | `--color-text-subdued` | Subdued body ink and the pricing page's currency glyphs. Never a heading on the light canvas. |
| Rule Grey | `#C3C3CC` | `--color-border-subdued` | Mostly a border (121 of 172 observations) — the hairline under disclosure and table rows. |
| Lilac Rule | `#C3C0DF` | `--color-border-subdued-purple` | The purple-theme rule and subdued ink; the border on the `#181623` band. |
| Iris | `#5266EB` | `--color-primary` | The only saturated hue: 10 fills, 4 inks, 2 borders. It fills the primary button, tints the toggle, colours "Plus" and "Pro" — never body copy. |
| Iris Wash | `rgba(82, 102, 235, 0.1)` | `--color-primary-wash` | The secondary button fill, and the more common of the two at 18 fills to the solid's 10 — the wash is the default, the solid the commitment. |
| Frosted Slate | `rgba(112, 115, 147, 0.1)` fill · `rgba(112, 115, 147, 0.22)` border | `--color-surface-frosted` · `--color-border-frosted` | The neutral ghost control and its outline, the one border that works on both canvases. |
| Frosted Lilac | `rgba(175, 178, 206, 0.2)` fill · `rgba(175, 178, 206, 0.36)` border | `--color-surface-frosted-light` · `--color-border-frosted-light` | The home page's dark-canvas ghost button and the rule above its feature list. |
| Night Band | `#171721` (neutral pages) · `#181623` (purple pages) | `--color-background-night` · `--color-background-night-purple` | The inverted section fill. Two hexes, one move — the twin that says which system you are on. |
| Pill Charcoal | `#1E1E2A` (neutral pages) · `#1F1D2D` (purple pages) | `--color-surface-pill` · `--color-surface-pill-purple` | The sticky legal pill — the only surface in the census that carries a shadow. |
| Pure White | `#FFFFFF` | `--color-text-on-primary` | The label on the solid iris button, and little else: 27 text observations against 2 fills. |
| Pale Sky | `#CDDDFF` | `--color-accent-sky` | A single 8px icon tile on the home page. A rare accent, not a palette member. |

## Tokens — Typography

### arcadia — the text face: navigation, buttons, body, labels, footnotes; the whole interface below heading size · `--font-arcadia`
- **Substitute:** Söhne, Inter, Basis Grotesque
- **Weights:** 360, 400, 420, 480, 500, 530, 700
- **Sizes:** 12px, 14px, 16px, 18px, 21.008px
- **Line height:** 16px on 16px UI labels (set solid) through 28.36px on 21px body — roughly 1.0 for controls, 1.35–1.4 for prose
- **Letter spacing:** normal at 16px and up; +0.14px at 14px; +0.24px at 12px — tracking is added only as the type gets small
- **Role:** The text face: navigation, buttons, body, labels, footnotes; the whole interface below heading size.

### arcadiaDisplay — the heading face, used at two weights and nothing between · `--font-arcadia-display`
- **Substitute:** Söhne Kräftig, Neue Haas Grotesk Display, Inter Display
- **Weights:** 360, 480
- **Sizes:** 24px, 28px, 32px, 36px, 48px, 62.1536px, 72.0192px, 82.912px
- **Line height:** 1.10 at display size (72.0192px → 79.2211px), loosening to 1.15 at 48px and 1.20 at 24–28px
- **Letter spacing:** normal at 62px and 72px; +0.24px at 48px, +0.36px at 36px, +0.42px at 28px, +0.48px at 32px and 24px. The big sizes get no tracking at all
- **Role:** The heading face, used at two weights and nothing between.

### ui-sans-serif — the system fallback in the stack, observed at one weight · `--font-ui-sans`
- **Substitute:** system-ui, -apple-system, Segoe UI
- **Weights:** 400
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** The system fallback in the stack, observed at one weight.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display 3 (large) | 72.0192px | 79.2211px | normal | `--text-display-3` |
| Display 3 (home) | 62.1536px | 68.369px | normal | `--text-display-3-sm` |
| Heading 1 | 48px | 55.2px | 0.24px | `--text-heading-1` |
| Heading 2 | 36px | 41.4px | 0.36px | `--text-heading-2` |
| Heading 5 | 32px | 36.8px | 0.48px | `--text-heading-5` |
| Heading 6 | 28px | 33.6px | 0.42px | `--text-heading-6` |
| Heading 7 | 24px | 28.8px | 0.48px | `--text-heading-7` |
| Heading 9 | 18px | 24.3px | normal | `--text-heading-9` |
| Body 1 | 21.008px | 28.3608px | normal | `--text-body-1` |
| Body 2 | 18px | 24.3px | normal | `--text-body-2` |
| Body 3 | 16px | 22.4px | normal | `--text-body-3` |
| Body 4 (prose) | 16px | 24px | normal | `--text-body-4` |
| UI 1 | 16px | 16px | normal | `--text-ui-1` |
| Caption | 14px | 19.6px | 0.14px | `--text-caption` |
| Footnote | 12px | 16.8px | 0.24px | `--text-body-5` |

`--text-display-3` and `--text-display-3-sm` are one class, `.arcadia-display-3`: 72.0192px on the pricing and product pages, 62.1536px on the home page — a fluid clamp, not two styles.

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| s4 | 4px | `--spacing-s4` |
| s8 | 8px | `--spacing-s8` |
| s12 | 12px | `--spacing-s12` |
| s16 | 16px | `--spacing-s16` |
| control-inline | 20px | `--spacing-control-inline` |
| s24 | 24px | `--spacing-s24` |
| grid-gutters | 32px | `--spacing-grid-gutters` |
| gap-lg | 40px | `--spacing-gap-lg` |
| layout-padding-md | 72px | `--spacing-layout-padding-md` |
| row-gap-2xl | 80px | `--spacing-row-gap-2xl` |
| layout-padding-lg | 112px | `--spacing-layout-padding-lg` |
| layout-padding-xl | 128px | `--spacing-layout-padding-xl` |

### Border Radius
| Element | Value |
|---------|-------|
| Focus ring on links (`.rounded.outline-offset-4.outline-border-focus.has-[a:focus-visib`) | 4px |
| Frosted bar (`.h-4.w-full.rounded-sm.bg-surface-frosted`) | 4px |
| Icon tile (`.h-8.max-h-8.w-8.max-w-8`) | 8px |
| Media frame, small (`.flex.w-full.overflow-hidden.[&_img]:h-full`) | 8px |
| Media frame, standard (`.flex.w-full.overflow-hidden.[&_img]:h-full`) | 12px |
| Card (`.w-full.gap-gap-md.rounded-xl.bg-surface-default`) | 12px |
| Legal pill (`.block.arcadia-body-5-strong.group/inverted.relative`) | 12px |
| Primary button (`.group.items-center.justify-center.arcadia-ui-1`) | 32px |
| Nav pill (`.group.inline-flex.w-fit.items-center`) | 40px |
| Round control (`.group.inline-flex.items-center.justify-center`) | 9999px |
| Email input (`.h-full.w-full.rounded-s-4xl.bg-transparent-transparent`) | 32px 0px 0px 32px |
| Pricing footer strip (`.neutral-theme.flex.w-full.items-center`) | 0px 0px 12px 12px |
| Inverted band (`.col-span-full.lg:col-span-12.lg:col-start-3.left-0`) | 0px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Pill | `rgba(0, 0, 0, 0.05) 0px 0px 3px 0px, rgba(0, 0, 0, 0.05) 0px 8px 12px 0px, rgba(0, 0, 0, 0.05) 0px 12px 20px 0px` | `--shadow-pill` |
| Knob | `rgba(28, 28, 35, 0.02) 0px 10px 16px 0px, rgba(28, 28, 35, 0.04) 0px 6px 10px 0px, rgba(28, 28, 35, 0.09) 0px 0px 3px 0px` | `--shadow-knob` |

### Layout
- **Page max-width:** not measured — the grid is `.grid.max-w-grid-max-width.grid-cols-layout.gap-x-grid-gutters`, content band `.col-span-full.lg:col-span-12.lg:col-start-3`
- **Section gap:** 72px is the workhorse (14 blocks), 128px for the largest breaks (5), 112px on the pricing and product pages (3)
- **Card padding:** 32px all round for `.w-full.gap-gap-md.rounded-xl.bg-surface-default`; 12px 32px for the pricing footer strip; 12px 12px for the legal pill
- **Element gap:** 32px by default (61 gutters plus 55 flex gaps), then 12px (49), 8px (41), 40px (26), 4px (8); the two-column grid runs `80px 40px`

## Components

### Primary Action Button
**Role:** The single committed action on a page — open an account, check eligibility.
Built from `.group.items-center.justify-center.arcadia-ui-1` (a ×7, all pages): fill `#5266EB`, label `#FFFFFF` at 16px / 420 / 16px line-height, padding `0px 20px`, radius 32px, no border, no shadow. The `<button>` twin `.group.w-fit.items-center.justify-center` (×2) paints identical values. Vertical padding is zero — height comes from the solid 16px line box plus a min-height the census does not measure. Note the radius: 32px, not 9999px.

### Tinted Accent Button
**Role:** The second-choice action that sits beside or below the primary one.
The class `.group.inline-flex.items-center.justify-center` measures three ways. On the pricing and product pages ("Open account", a ×6): fill `rgba(82, 102, 235, 0.1)`, ink `#272735`, 16px / 420, padding `0px 20px`, radius 40px, no border, no shadow. On the product pages (a ×9): same fill and ink, padding `0px 0px`, radius 9999px. As the pricing page's "Expand all" button (×1): same fill, 14px / 420, padding `0px 16px`, radius 40px. Ten-percent iris reads as an action without competing with the solid.

### Frosted Ghost Button
**Role:** The tertiary action — a demo, a sales conversation — that must not read as a CTA.
One row per canvas. On the home page's photographic hero, "Launch demo" (`.group.inline-flex.items-center.justify-center`, a ×1): fill `rgba(175, 178, 206, 0.2)`, ink `#EDEDF3`, 16px / 420, padding `0px 20px`, radius 40px, border 1px `rgba(175, 178, 206, 0.36)`, no shadow. On the business-banking page, "Contact sales" (same class, a ×1): fill `rgba(112, 115, 147, 0.1)`, ink `#28253B`, padding `0px 20px`, radius 40px, border 1px `rgba(112, 115, 147, 0.22)`. Both fills are translucent, so the photograph or tinted canvas shows through and the button belongs to its background.

### Navigation Bar
**Role:** The persistent top rail: wordmark left, five menu items centred, log-in and open-account right.
The menu items are `.group.inline-flex.w-fit.items-center` ("Products", button ×16, all pages): no fill, ink `#EDEDF3`, 16px / 420 / 16px, padding `0px 20px`, radius 40px, no border, no shadow. "Log in" (`.group.w-fit.items-center.justify-center`, a ×4) paints the same. On light canvases that text row carries `#28253B` (×14) and `#272735` (×13). The bar fills `#FBFCFD` via `.sticky.-top-px.z-navbar-z-index.border-solid`; the business-banking page frosts it with `rgba(245, 244, 253, 0.19)` on `.center.relative.z-navbar-z-index.m-0`, and on the home page it rides transparent over the photograph.

### Hero Email Capture
**Role:** The first-screen sign-up: an email field welded to the primary button inside one pill.
The input is `.h-full.w-full.rounded-s-4xl.bg-transparent-transparent` (input ×2, home and business-banking), radius `32px 0px 0px 32px` — rounded on the leading edge only, so the button's own 32px cap closes the shape. Its fill, border and padding are not measured; the class says transparent, and the pill supplies the ground. The label is hidden: "Enter your email" at arcadia 16px / 400 / 24px in `#000000` on `.sr-only`. Build it as one capsule, not two controls with a gap.

### Surface Card
**Role:** The content block that holds a heading, a paragraph and a piece of product UI.
`.w-full.gap-gap-md.rounded-xl.bg-surface-default` (div ×9, product pages): fill `#EDEDF3`, padding 32px on all four sides, radius 12px, no border, no shadow. It sits on the `#FBFCFD` or `#F5F4FD` canvas and separates by luminance alone — a step a border or shadow would undo.

### Media Frame
**Role:** The rounded window that product screenshots, renders and diagrams live inside.
`.flex.w-full.overflow-hidden.[&_img]:h-full` measures two ways: radius 12px (div ×15, home and product pages) and radius 8px (div ×9, product pages). Both carry no fill, no border and no shadow — the image is the surface. The centred variant `.mx-auto.w-fit.overflow-hidden.rounded-xl` (div ×4, all pages) also paints 12px, and the square icon tile `.h-8.max-h-8.w-8.max-w-8` (div ×3, home page) uses 8px with, once, a `#CDDDFF` fill. The radius is a soft crop, not a pill.

### Disclosure Row
**Role:** The expandable line item — plan features on pricing, FAQ questions on the product pages.
The trigger is `.flex.flex-1.items-center.group` (button ×29, pricing and product pages): no fill, 16px / 400 / 24px, padding `24px 0px`, radius 4px, no border, no shadow, 32px between label and chevron. The same class on the home page (button ×4) paints padding `0px 0px`. Its scroll-margin container (div ×29, same pages) supplies the rule: radius 0px, border 1px `#C3C3CC`, no fill. The home page's list uses `.w-full.border-t.border-solid.border-border-frosted` (div ×3) instead — 16px / 480 / 21.6px, padding `12px 0px`, border 1px `rgba(175, 178, 206, 0.36)`.

### Comparison Table Row
**Role:** One feature line across the three plan columns.
A selectable-state `<tr>` (tr ×13, pricing page) carries every value here: no fill, 14px / 400 / 21px / normal tracking, padding `0px 0px`, radius 0px, border 1px `#C3C3CC`, no shadow. Fourteen-pixel type is the smallest body step and it appears here, where density earns it. No zebra striping and no cell padding — the top rule and row height carry the structure.

### Sticky Legal Pill
**Role:** The FDIC disclosure that floats above the fold on every page.
`.block.arcadia-body-5-strong.group/inverted.relative` (small ×2, home and pricing): fill `#1E1E2A`, 12px / 480 / 16.8px / 0.24px, padding 12px on all sides, radius 12px, and the system's one real shadow — `rgba(0, 0, 0, 0.05) 0px 0px 3px 0px, rgba(0, 0, 0, 0.05) 0px 8px 12px 0px, rgba(0, 0, 0, 0.05) 0px 12px 20px 0px`. The same class fills `#1F1D2D` on the product pages with `#EDECFB` ink. A dark chip floating on a light page, its legal type at the heaviest small-text weight measured — the compliance line is designed, not hidden.

### Inverted Feature Band
**Role:** The full-width dark section that interrupts the light page with a product demonstration.
`.col-span-full.lg:col-span-12.lg:col-start-3.left-0` measures once per theme: fill `#171721`, padding `32px 0px`, radius 0px, border 1px `#C3C3CC` (div ×2, home and pricing) and fill `#181623`, padding `32px 0px`, radius 0px, border 1px `#C3C0DF` (div ×2, product pages). Zero radius — a change of ground, not a card. Inside it the ink flips to `#EDEDF3` or `#EDECFB` and the rules go with it.

### Frosted Progress Bar
**Role:** The slim horizontal meter — repayment progress, loading state, redacted placeholder.
`.h-4.w-full.rounded-sm.bg-surface-frosted` measures three ways, all at radius 4px with no border and no shadow: fill `rgba(112, 115, 147, 0.1)` (span ×6, product pages) as the empty track, fill `#272735` (span ×6, product pages) as the filled run, and fill `rgba(175, 178, 206, 0.2)` (span ×3, home page) as the light-canvas track. Same geometry, three inks; 4px on a short bar reads as a soft rectangle.

## Do's and Don'ts

### Do
- Use `rgba(82, 102, 235, 0.1)` for a secondary action before reaching for solid `#5266EB` — the wash carries 18 fills to the solid's 10.
- Set 16px UI labels solid: `--text-ui-1` is 16px on a 16px line box, which is what makes nav and buttons sit tight.
- Separate a card from its canvas with luminance alone — `#EDEDF3` on `#FBFCFD` — and let the 1px `#C3C3CC` rule do the rest.
- Add letter-spacing as type gets smaller: +0.24px at 12px, +0.14px at 14px, zero at 62px and 72px.
- Keep the two themes intact: `#171721` with `#EDEDF3` and `#C3C3CC`, `#181623` with `#EDECFB` and `#C3C0DF`.
- Pad cards and grids on the same 32px token so gutter and inset agree.

### Don't
- Don't put the display face above weight 480. The weights arcadiaDisplay paints are 360 and 480, and every heading measured on `.grid.text-text-default.arcadia-display-3`, `.grid.text-text-default.arcadia-heading-1` and `.arcadia-heading-5.text-text-default` sits at 480.
- Don't add a shadow to a card, a button or a nav bar. The census paints two box-shadows: the legal pill (small ×4) and one pricing element (div ×1, span ×1). Everything else is flat.
- Don't set body copy in `#5266EB`. Its 4 text observations are the words "Plus" and "Pro" on the pricing page and two other spans — it is a fill colour that occasionally becomes a word.
- Don't treat the two light inks as interchangeable. `#EDECFB` is measured only on the business-banking and working-capital pages, on carriers like `.block.arcadia-body-5-strong.group/inverted.relative`, while `#EDEDF3` is measured on all four — the purple ink is a product-page substitution, not a free alternative.
- Don't round a media frame or a card past 12px, and don't round a section band at all.
- Don't reach for a second saturated hue. Beyond Iris, the painted list's chromatic entries are one `#CDDDFF` fill on `.h-8.max-h-8.w-8.max-w-8` (div ×1) and one `#0F2D37` label on `.group.inline-flex.w-fit.items-center` (button ×1).

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FBFCFD` | Light page ground; the sticky navbar on the pricing and product pages. |
| 0 | Canvas Secondary | `#F4F5F9` | `.bg-background-secondary.pb-layout-padding-xl.transition-theme`, one alternating section. |
| 1 | Lilac Surface | `#F5F4FD` | `.group.relative.grid.h-fit` — the violet-tinted block on the product pages. |
| 1 | Card | `#EDEDF3` | The 32px-padded, 12px-radius content card. |
| 0-inv | Night Band, neutral | `#171721` | The inverted section on the home and pricing pages. |
| 0-inv | Night Band, purple | `#181623` | The same move on the product pages. |
| 2 | Legal Pill | `#1E1E2A` · `#1F1D2D` | The floating disclosure chip. |

## Elevation

Depth is luminance and hairlines. A card is `#EDEDF3` on `#FBFCFD`: a step so small you read it as a change of material rather than height. Structure comes from 1px `#C3C3CC` rules (121 of that colour's 172 observations are borders) and their translucent cousins `rgba(112, 115, 147, 0.22)` and `rgba(175, 178, 206, 0.36)`. Only two things cast: the sticky legal pill, three stacked `rgba(0, 0, 0, 0.05)` layers reaching 20px of blur, and one pricing element with the toggle knob, on a tighter `rgba(28, 28, 35, ...)` triple. Motion is the other cue: `--wipeOut-duration: .15s`, `--tab-fade-duration: .3s`, `--media-tab-fade-duration: .5s` *(declared, not painted)*.

## Imagery

Three registers, no stock photography of people. The home hero is one wide photographic render — a desk and office chair on a grass ridge above a fogged valley at dawn — under a scrim of `rgba(0, 0, 0, 0.6)` fading to `rgba(0, 0, 0, 0.3)` so the white display type holds. Second, product UI: dashboard screenshots in 12px-radius frames, sometimes perspective-tilted, often cropped so the frame edge cuts the interface mid-row. Third, abstract soft-focus renders — luminous spheres, a wireframe globe, concentric light rings — in the same frames, where a screenshot would be too literal. Icons are thin monoline glyphs above a bold caption, never in a filled container except the one `#CDDDFF` tile.

## Layout

Everything sits on `.grid.max-w-grid-max-width.grid-cols-layout.gap-x-grid-gutters` with 32px gutters, and the main content band is `.col-span-full.lg:col-span-12.lg:col-start-3` — twelve columns inset by two, which is why headings and body never reach the viewport edge while media frames and dark bands do. Section rhythm runs 72px as the default block padding, 112px on the pricing and product pages, 128px for the largest breaks. Content alternates between a centred column (hero, section titles, six-up icon grids) and a two-up split via `.grid.w-full.grid-cols-2.items-start` with an `80px 40px` gap. Stacks use 12px, 8px and 4px inside components, 40px between them. The nav is sticky at `-top-px` on all four pages; the footer is a four-column dark link grid over a disclaimers block, its left column a 12px `.md:col-span-4` heading and its right the numbered footnotes.

## Typography Voice

Two modes, and the seam between them is weight, not family. arcadiaDisplay runs from 24px to 72.02px at a single weight of 480 — hero, section heads and card titles all the same, so hierarchy is pure size. Its one exception is 360, on the pricing page's `$` glyphs and a 28px subdued line. arcadia uses weight freely: 360 for body prose, 400 for footnotes and table cells, 420 for every control label, 480 for strong labels, 530 for inline `<strong>`. The signature move is the 16px UI label on a 16px line box — line-height 1.0 — which keeps buttons and nav items tight while the 18px body and 21px lede both run at 1.35. Tracking runs opposite to most systems: nothing at display size, then progressively more as type shrinks, up to +0.24px at 12px. The largest size measured, 82.912px at weight 360, sits on a screen-reader-only label rather than anything visible.

## Agent Prompt Guide

Build on the light canvas and use the inverted band as a deliberate interruption. One saturated action per view; everything else is a wash, a frosted outline or plain type.

## Quick Color Reference
- background: `#FBFCFD`
- text: `#272735`
- surface: `#EDEDF3`
- border: `#C3C3CC`
- accent: `#5266EB`
- primary action: `#5266EB`

## Example Component Prompts

1. **Primary button**: A pill, fill `#5266EB`, label `#FFFFFF` in arcadia 16px weight 420 on a 16px line-height, padding `0 20px`, border-radius 32px, no border, no shadow.
2. **Secondary button**: Same geometry, fill `rgba(82, 102, 235, 0.1)`, ink `#272735`, padding `0 20px`, border-radius 40px, no border, no shadow — beside the primary, never alone.
3. **Content card**: A `#EDEDF3` card on a `#FBFCFD` canvas, 32px padding, border-radius 12px, no border, no shadow; heading in arcadiaDisplay 32px / 36.8px / +0.48px weight 480 in `#272735`, body in arcadia 18px / 24.3px weight 360 in `#535461`, 32px between them.
4. **Disclosure row**: A full-width button, no fill, arcadia 16px / 400 / 24px, padding `24px 0`, 32px between label and chevron, under a 1px `#C3C3CC` top rule at 0px radius.
5. **Inverted band**: A full-bleed section, fill `#171721`, padding `32px 0`, radius 0, 1px `#C3C3CC` border, heading ink `#EDEDF3` at 62.1536px / 68.369px weight 480, body 18px / 24.3px weight 360 in `#C3C3CC`.

## Similar Brands

- **Linear** — the same conviction that near-monochrome plus one saturated indigo is enough, hierarchy carried by size.
- **Stripe** — kindred in how legal and product copy share one typographic system, and in hairline-ruled tables.
- **Ramp** — near-white grounds, graphite type, a single action colour, product screenshots as the imagery.
- **Vercel (Geist)** — flat surfaces, luminance-only elevation, a type scale that goes very large without going bold.
- **Arc (The Browser Company)** — atmospheric renders under interface chrome, and letting a photograph carry a first screen.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-ink-default: #000000;
  --color-background-default: #FBFCFD;
  --color-background-secondary: #F4F5F9;
  --color-surface-lilac: #F5F4FD;
  --color-text-inverse: #EDEDF3;
  --color-text-inverse-purple: #EDECFB;
  --color-text-default: #272735;
  --color-text-default-purple: #28253B;
  --color-text-subdued: #535461;
  --color-text-subdued-purple: #554E7B;
  --color-border-subdued: #C3C3CC;
  --color-border-subdued-purple: #C3C0DF;
  --color-border-hairline: #70707D;
  --color-primary: #5266EB;
  --color-primary-wash: rgba(82, 102, 235, 0.1);
  --color-surface-frosted: rgba(112, 115, 147, 0.1);
  --color-border-frosted: rgba(112, 115, 147, 0.22);
  --color-surface-frosted-light: rgba(175, 178, 206, 0.2);
  --color-border-frosted-light: rgba(175, 178, 206, 0.36);
  --color-surface-frosted-nav: rgba(245, 244, 253, 0.19);
  --color-background-night: #171721;
  --color-background-night-purple: #181623;
  --color-surface-pill: #1E1E2A;
  --color-surface-pill-purple: #1F1D2D;
  --color-text-on-primary: #FFFFFF;
  --color-accent-sky: #CDDDFF;
  --color-text-teal: #0F2D37;
  --color-scrim-top: rgba(0, 0, 0, 0.6);
  --color-scrim-bottom: rgba(0, 0, 0, 0.3);

  /* Typography — Families */
  --font-arcadia: 'arcadia', ui-sans-serif, system-ui, sans-serif;
  --font-arcadia-display: 'arcadiaDisplay', ui-sans-serif, system-ui, sans-serif;
  --font-ui-sans: ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-display-3: 72.0192px;   --leading-display-3: 79.2211px;
  --text-display-3-sm: 62.1536px; --leading-display-3-sm: 68.369px;
  --text-heading-1: 48px;        --leading-heading-1: 55.2px;
  --text-heading-2: 36px;        --leading-heading-2: 41.4px;
  --text-heading-5: 32px;        --leading-heading-5: 36.8px;
  --text-heading-6: 28px;        --leading-heading-6: 33.6px;
  --text-heading-7: 24px;        --leading-heading-7: 28.8px;
  --text-heading-9: 18px;        --leading-heading-9: 24.3px;
  --text-body-1: 21.008px;       --leading-body-1: 28.3608px;
  --text-body-2: 18px;           --leading-body-2: 24.3px;
  --text-body-3: 16px;           --leading-body-3: 22.4px;
  --text-body-4: 16px;           --leading-body-4: 24px;
  --text-ui-1: 16px;             --leading-ui-1: 16px;
  --text-caption: 14px;          --leading-caption: 19.6px;
  --text-body-5: 12px;           --leading-body-5: 16.8px;
  --tracking-heading-1: 0.24px;
  --tracking-heading-2: 0.36px;
  --tracking-heading-5: 0.48px;
  --tracking-heading-6: 0.42px;
  --tracking-caption: 0.14px;
  --tracking-body-5: 0.24px;

  /* Spacing */
  --spacing-s4: 4px;
  --spacing-s8: 8px;
  --spacing-s12: 12px;
  --spacing-s16: 16px;
  --spacing-control-inline: 20px;
  --spacing-s24: 24px;
  --spacing-grid-gutters: 32px;
  --spacing-gap-lg: 40px;
  --spacing-layout-padding-md: 72px;
  --spacing-row-gap-2xl: 80px;
  --spacing-layout-padding-lg: 112px;
  --spacing-layout-padding-xl: 128px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-xl: 12px;
  --radius-button: 32px;
  --radius-pill: 40px;
  --radius-full: 9999px;
  --radius-input: 32px 0px 0px 32px;
  --radius-strip: 0px 0px 12px 12px;
  --radius-band: 0px;

  /* Shadows */
  --shadow-pill: rgba(0, 0, 0, 0.05) 0px 0px 3px 0px, rgba(0, 0, 0, 0.05) 0px 8px 12px 0px, rgba(0, 0, 0, 0.05) 0px 12px 20px 0px;
  --shadow-knob: rgba(28, 28, 35, 0.02) 0px 10px 16px 0px, rgba(28, 28, 35, 0.04) 0px 6px 10px 0px, rgba(28, 28, 35, 0.09) 0px 0px 3px 0px;

  /* Motion (declared, not painted) */
  --wipeOut-duration: .15s;
  --tab-fade-duration: .3s;
  --media-tab-fade-duration: .5s;
  --testimonial-overlay-gradient-angle: 180deg;
}
```

### Tailwind v4
```css
@theme {
  --color-ink-default: #000000;
  --color-background-default: #FBFCFD;
  --color-background-secondary: #F4F5F9;
  --color-surface-lilac: #F5F4FD;
  --color-text-inverse: #EDEDF3;
  --color-text-inverse-purple: #EDECFB;
  --color-text-default: #272735;
  --color-text-default-purple: #28253B;
  --color-text-subdued: #535461;
  --color-text-subdued-purple: #554E7B;
  --color-border-subdued: #C3C3CC;
  --color-border-subdued-purple: #C3C0DF;
  --color-border-hairline: #70707D;
  --color-primary: #5266EB;
  --color-primary-wash: rgba(82, 102, 235, 0.1);
  --color-surface-frosted: rgba(112, 115, 147, 0.1);
  --color-border-frosted: rgba(112, 115, 147, 0.22);
  --color-surface-frosted-light: rgba(175, 178, 206, 0.2);
  --color-border-frosted-light: rgba(175, 178, 206, 0.36);
  --color-surface-frosted-nav: rgba(245, 244, 253, 0.19);
  --color-background-night: #171721;
  --color-background-night-purple: #181623;
  --color-surface-pill: #1E1E2A;
  --color-surface-pill-purple: #1F1D2D;
  --color-text-on-primary: #FFFFFF;
  --color-accent-sky: #CDDDFF;
  --color-text-teal: #0F2D37;

  --font-arcadia: 'arcadia', ui-sans-serif, system-ui, sans-serif;
  --font-arcadia-display: 'arcadiaDisplay', ui-sans-serif, system-ui, sans-serif;
  --font-ui-sans: ui-sans-serif, system-ui, sans-serif;

  --text-display-3: 72.0192px;
  --text-display-3--line-height: 79.2211px;
  --text-display-3-sm: 62.1536px;
  --text-display-3-sm--line-height: 68.369px;
  --text-heading-1: 48px;
  --text-heading-1--line-height: 55.2px;
  --text-heading-1--letter-spacing: 0.24px;
  --text-heading-2: 36px;
  --text-heading-2--line-height: 41.4px;
  --text-heading-2--letter-spacing: 0.36px;
  --text-heading-5: 32px;
  --text-heading-5--line-height: 36.8px;
  --text-heading-5--letter-spacing: 0.48px;
  --text-heading-6: 28px;
  --text-heading-6--line-height: 33.6px;
  --text-heading-6--letter-spacing: 0.42px;
  --text-heading-7: 24px;
  --text-heading-7--line-height: 28.8px;
  --text-heading-7--letter-spacing: 0.48px;
  --text-heading-9: 18px;
  --text-heading-9--line-height: 24.3px;
  --text-body-1: 21.008px;
  --text-body-1--line-height: 28.3608px;
  --text-body-2: 18px;
  --text-body-2--line-height: 24.3px;
  --text-body-3: 16px;
  --text-body-3--line-height: 22.4px;
  --text-body-4: 16px;
  --text-body-4--line-height: 24px;
  --text-ui-1: 16px;
  --text-ui-1--line-height: 16px;
  --text-caption: 14px;
  --text-caption--line-height: 19.6px;
  --text-caption--letter-spacing: 0.14px;
  --text-body-5: 12px;
  --text-body-5--line-height: 16.8px;
  --text-body-5--letter-spacing: 0.24px;

  --spacing-s4: 4px;
  --spacing-s8: 8px;
  --spacing-s12: 12px;
  --spacing-s16: 16px;
  --spacing-control-inline: 20px;
  --spacing-s24: 24px;
  --spacing-grid-gutters: 32px;
  --spacing-gap-lg: 40px;
  --spacing-layout-padding-md: 72px;
  --spacing-row-gap-2xl: 80px;
  --spacing-layout-padding-lg: 112px;
  --spacing-layout-padding-xl: 128px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-xl: 12px;
  --radius-button: 32px;
  --radius-pill: 40px;
  --radius-full: 9999px;

  --shadow-pill: rgba(0, 0, 0, 0.05) 0px 0px 3px 0px, rgba(0, 0, 0, 0.05) 0px 8px 12px 0px, rgba(0, 0, 0, 0.05) 0px 12px 20px 0px;
  --shadow-knob: rgba(28, 28, 35, 0.02) 0px 10px 16px 0px, rgba(28, 28, 35, 0.04) 0px 6px 10px 0px, rgba(28, 28, 35, 0.09) 0px 0px 3px 0px;
}
```