JL
Design systems

Claude

Cream canvas, coral action, serif display

Design SystemLight theme

Color

  • primary

    #cc785c

  • primary-active

    #a9583e

  • primary-disabled

    #e6dfd8

  • ink

    #141413

  • body

    #3d3d3a

  • body-strong

    #252523

  • muted

    #6c6a64

  • muted-soft

    #8e8b82

  • hairline

    #e6dfd8

  • hairline-soft

    #ebe6df

  • canvas

    #faf9f5

  • surface-soft

    #f5f0e8

  • surface-card

    #efe9de

  • surface-cream-strong

    #e8e0d2

  • surface-dark

    #181715

  • surface-dark-elevated

    #252320

  • surface-dark-soft

    #1f1e1b

  • on-primary

    #ffffff

  • on-dark

    #faf9f5

  • on-dark-soft

    #a09d96

  • accent-teal

    #5db8a6

  • accent-amber

    #e8a55a

  • success

    #5db872

  • warning

    #d4a017

  • error

    #c64545

Typography

serif
Copernicus, "Tiempos Headline", "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif
sans
StyreneB, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
mono
"JetBrains Mono", ui-monospace, monospace

Display

  • display-xl

    64px / 1.05 · 400 · -1.5px

    display-xl

  • display-lg

    48px / 1.1 · 400 · -1px

    display-lg

  • display-md

    36px / 1.15 · 400 · -0.5px

    display-md

  • display-sm

    28px / 1.2 · 400 · -0.3px

    display-sm

Text

  • title-lg

    22px / 1.3 · 500 · 0

    title-lg

  • title-md

    18px / 1.4 · 500 · 0

    title-md

  • title-sm

    16px / 1.4 · 500 · 0

    title-sm

  • body-md

    16px / 1.55 · 400 · 0

    body-md

  • body-sm

    14px / 1.55 · 400 · 0

    body-sm

  • caption

    13px / 1.4 · 500 · 0

    caption

  • caption-uppercase

    12px / 1.4 · 500 · 1.5px

    caption-uppercase

  • button

    14px / 1 · 500 · 0

    button

  • nav-link

    14px / 1.4 · 500 · 0

    nav-link

Code

  • code

    14px / 1.6 · 400 · 0

    code

Spacing

  • space-xxs

    4px

  • space-xs

    8px

  • space-sm

    12px

  • space-md

    16px

  • space-lg

    24px

  • space-xl

    32px

  • space-xxl

    48px

  • space-band

    64px

  • space-section

    96px

Radius

  • radius-xs

    4px

  • radius-sm

    6px

  • radius-md

    8px

  • radius-lg

    12px

  • radius-xl

    16px

  • radius-pill

    9999px

  • radius-full

    9999px

Elevation

  • shadow-none

    none

  • shadow-hover-subtle

    0 1px 3px rgba(20,20,19,0.08)

  • shadow-focus-ring

    0 0 0 3px rgba(204,120,92,0.15)

Components

  • Buttons

    Buttons are 40px-high, 8px-radius rectangles: a coral primary, a cream secondary with a hairline, a dark-band secondary, a text button and a 36px circular icon button, plus the inline coral link and the pill badges.

    • Do use cl-btn--primary (primary fill, on-primary label, radius-md, size-button-height) for the single main action in a view. Its pressed fill is primary-active; a disabled one uses primary-disabled with a muted label.
    • Do pair a cream cl-btn--secondary (canvas fill, ink label, 1px hairline border) with the primary, and use cl-btn--on-dark (surface-dark-elevated, on-dark) on dark bands. The system never inverts to a light secondary on dark.
    • Do set labels in button (14px, weight 500) with 12px 20px padding.
    • Do use cl-link (primary, body-md) for inline links and underline it on press.
    • Do keep cl-badge (surface-card, caption, radius-pill) for category tags and cl-badge--coral (primary, caption-uppercase) for NEW and BETA.
    • Don't paint coral onto other controls, and don't add a shadow or hover style: the source documents only the pressed fill.
    • Known failing pairs kept exact: the on-primary label is 3.28:1 on primary; the disabled label is 4.10:1; primary link text is 3.11:1 on canvas (see the token notes).

  • Cards

    Cards are 12px-radius blocks that alternate cream and dark: cream feature cards, dark product and code-window cards, outlined comparison, pricing and connector cards, and full-bleed coral callouts.

    • Do fill cl-card--feature with surface-card, pad it space-xl (32px) and set its title in title-md and body in body-md.
    • Do show real product chrome in cl-card--dark (surface-dark, on-dark) and cl-card--code (space-lg, code in code on surface-dark-soft) rather than an illustration of code.
    • Do outline cl-card--outline (comparison, pricing) with a 1px hairline on canvas, and flip the featured pricing tier to surface-dark: the dark fill is the signal.
    • Do set a tier's plan size in title-lg and its price in display-sm, the serif.
    • Do keep cl-card--coral (primary, on-primary, space-xxl) for one full-bleed callout; its CTA is a cream button.
    • Don't repeat the same surface mode in two bands in a row, and don't add shadows (shadow-none).
    • Known failing pairs kept exact: white body text on primary is 3.28:1, and muted-soft line numbers are 5.26:1 on surface-dark but fail on cream.

  • Inputs

    Inputs are 40px-high, 8px-radius cream fields with a 1px hairline border that turns coral with a soft ring on focus.

    • Do fill cl-input with canvas, set the value in body-md and ink, border it 1px hairline, with radius-md, size-input-height and 10px 14px padding.
    • Do show focus as a primary border plus shadow-focus-ring (3px coral at 15% alpha). The primary border is 3.11:1 on canvas; the ring alone is 1.16:1 and does not carry the signal.
    • Do keep a visible cl-label (14px, weight 500): the muted placeholder is 5.13:1 on canvas, but it must not replace the label.
    • Don't rely on the hairline border to show the field edge: it is 1.25:1 on canvas.
    • Don't invent error or success styling from this source. The previews show a plain muted help line only; add error text beside a word if you need one (4.59:1 on canvas).

  • Navigation

    Navigation is the 64px cream top bar with a wordmark, a text menu and a coral primary button, the category tab row, and the four-column dark footer.

    • Do set the top bar on canvas at size-nav-height, labels in nav-link (14px, weight 500) in ink, and end it with a text sign-in link and one cl-btn--primary.
    • Do collapse the menu to a hamburger below 768px; it opens as a full-screen cream sheet.
    • Do style a category tab in nav-link: inactive is muted on transparent, active is ink on surface-card, 8px 14px padding, radius-md.
    • Do set the footer on surface-dark with space-band padding, body in body-sm in on-dark-soft, headings in on-dark, and never invert it.
    • Don't set the wordmark in primary at small sizes: coral text is 3.11:1 on canvas.
    • Known low contrast: inactive tab text in muted is 4.77:1 on surface-soft but 4.48:1 on surface-card.