JL
Design systems

Linear

Near-black, one quiet accent

Design SystemDark theme

Color

  • primary

    #5e6ad2

  • on-primary

    #ffffff

  • primary-hover

    #828fff

  • primary-focus

    #5e69d1

  • ink

    #f7f8f8

  • ink-muted

    #d0d6e0

  • ink-subtle

    #8a8f98

  • ink-tertiary

    #62666d

  • canvas

    #010102

  • surface-1

    #0f1011

  • surface-2

    #141516

  • surface-3

    #18191a

  • surface-4

    #191a1b

  • hairline

    #23252a

  • hairline-strong

    #34343a

  • hairline-tertiary

    #3e3e44

  • inverse-canvas

    #ffffff

  • inverse-surface-1

    #f5f6f6

  • inverse-surface-2

    #f6f7f7

  • inverse-ink

    #000000

  • brand-secure

    #7a7fad

  • semantic-success

    #27a644

  • semantic-overlay

    #000000

Typography

display
"Inter", "Helvetica Neue", Arial, sans-serif
text
"Inter", "Helvetica Neue", Arial, sans-serif
mono
"JetBrains Mono", "Geist Mono", ui-monospace, monospace

Display

  • display-xl

    80px / 1.05 · 600 · -3.0px

    display-xl

  • display-lg

    56px / 1.1 · 600 · -1.8px

    display-lg

  • display-md

    40px / 1.15 · 600 · -1.0px

    display-md

  • headline

    28px / 1.2 · 600 · -0.6px

    headline

  • card-title

    22px / 1.25 · 500 · -0.4px

    card-title

  • subhead

    20px / 1.4 · 400 · -0.2px

    subhead

Text

  • body-lg

    18px / 1.5 · 400 · -0.1px

    body-lg

  • body

    16px / 1.5 · 400 · -0.05px

    body

  • body-sm

    14px / 1.5 · 400

    body-sm

  • caption

    12px / 1.4 · 400

    caption

  • button

    14px / 1.2 · 500

    button

  • eyebrow

    13px / 1.3 · 500 · 0.4px

    eyebrow

Mono

  • mono

    13px / 1.5 · 400

    mono

Spacing

  • space-xxs

    4px

  • space-xs

    8px

  • space-sm

    12px

  • space-md

    16px

  • space-lg

    24px

  • space-xl

    32px

  • space-xxl

    48px

  • space-section

    96px

Radius

  • radius-xs

    4px

  • radius-sm

    6px

  • radius-md

    8px

  • radius-lg

    12px

  • radius-xl

    16px

  • radius-xxl

    24px

  • radius-pill

    9999px

  • radius-full

    9999px

Components

  • Button

    Compact buttons at radius-md: lavender primary, a surface-1 secondary and a canvas tertiary.

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

  • ChangelogRow

    A changelog entry: date, title and summary on the canvas, separated by a hairline rule.

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

  • FeatureCard

    A feature card on surface-1 with radius-lg corners and a hairline border.

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

  • StatusBadge

    A small status pill on surface-2 in ink-muted caption type.

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