JL
Design systems

Vercel

One ink tone, hairline cards

Design SystemLight theme

Color

  • primary

    #171717

  • on-primary

    #ffffff

  • ink

    #171717

  • body

    #4d4d4d

  • mute

    #8f8f8f

  • faint

    #a1a1a1

  • hairline

    #ebebeb

  • hairline-soft

    #f2f2f2

  • canvas

    #fafafa

  • canvas-elevated

    #ffffff

  • link

    #0070f3

  • link-deep

    #0761d1

  • link-soft

    #d3e5ff

  • error

    #ee0000

  • error-deep

    #c50000

  • warning

    #f5a623

  • warning-soft

    #ffefcf

  • warning-deep

    #ab570a

  • violet

    #7928ca

  • violet-soft

    #d8ccf1

  • cyan

    #50e3c2

  • cyan-soft

    #aaffec

  • pink

    #ff0080

  • magenta

    #eb367f

  • gradient-develop-start

    #007cf0

  • gradient-develop-end

    #00dfd8

  • gradient-preview-start

    #7928ca

  • gradient-preview-end

    #ff0080

  • gradient-ship-start

    #ff4d4d

  • gradient-ship-end

    #f9cb28

Typography

sans
"Geist", "Inter", Arial, sans-serif
mono
"Geist Mono", "JetBrains Mono", ui-monospace, monospace

Geist

  • display-xl

    48px / 48px · 600 · -2.4px

    display-xl

  • heading-lg

    32px / 40px · 600 · -1.28px

    heading-lg

  • heading-md

    20px / 28px · 600 · -0.4px

    heading-md

  • label-sm

    14px / 20px · 500 · -0.28px

    label-sm

  • body-lg

    16px / 24px · 400

    body-lg

  • body-md

    14px / 20px · 400

    body-md

  • body-sm

    12px / 16px · 400

    body-sm

  • button-lg

    16px / 20px · 500

    button-lg

  • button-md

    14px / 20px · 500

    button-md

Geist Mono

  • mono-eyebrow

    12px / 16px · 500

    mono-eyebrow

  • code

    14px / 20px · 400

    code

Spacing

  • space-xxs

    4px

  • space-xs

    8px

  • space-sm

    12px

  • space-md

    16px

  • space-lg

    24px

  • space-xl

    32px

  • space-2xl

    40px

  • space-3xl

    64px

  • space-4xl

    96px

  • space-section

    128px

Radius

  • radius-none

    0px

  • radius-sm

    6px

  • radius-md

    12px

  • radius-lg

    16px

  • radius-pill-category

    64px

  • radius-pill

    100px

  • radius-full

    9999px

Components

  • Button

    Pill CTAs for marketing and 6px square controls for app surfaces, never mixed in one context.

    • Built from the source's component entries button-primary, button-secondary, button-primary-sm, button-category-pill, with every color, radius and padding read from them.
    • The consumer provides the label text.

  • CodeBlock

    A light code card in Geist Mono with a hairline border.

    • Built from the source's component entries code-block, with every color, radius and padding read from them.
    • The consumer provides the label text.

  • FeatureCard

    A white card with a 1px hairline border on the off-white canvas.

    • Built from the source's component entries feature-card, pricing-card, with every color, radius and padding read from them.
    • The consumer provides the label text.

  • TextInput

    A 6px text field with a hairline border, used in app and nav contexts.

    • Built from the source's component entries text-input, with every color, radius and padding read from them.
    • The consumer provides the label text.