JL
Design systems

Stripe

Thin display type, indigo pill

Design SystemLight theme

Color

  • primary

    #533afd

  • primary-deep

    #4434d4

  • primary-press

    #2e2b8c

  • primary-soft

    #665efd

  • primary-bg-subdued-hover

    #b9b9f9

  • brand-dark-900

    #1c1e54

  • ink

    #0d253d

  • ink-secondary

    #273951

  • ink-mute

    #64748d

  • ink-mute-2

    #61718a

  • on-primary

    #ffffff

  • canvas

    #ffffff

  • canvas-soft

    #f6f9fc

  • canvas-cream

    #f5e9d4

  • hairline

    #e3e8ee

  • hairline-input

    #a8c3de

  • ruby

    #ea2261

  • magenta

    #f96bee

  • lemon

    #9b6829

  • shadow-blue

    #003770

Typography

sans
"Inter", "Helvetica Neue", Arial, sans-serif

Sans

  • display-xxl

    56px / 1.03 · 300 · -1.4px

    display-xxl

  • display-xl

    48px / 1.15 · 300 · -0.96px

    display-xl

  • display-lg

    32px / 1.1 · 300 · -0.64px

    display-lg

  • display-md

    26px / 1.12 · 300 · -0.26px

    display-md

  • heading-lg

    22px / 1.1 · 300 · -0.22px

    heading-lg

  • heading-md

    20px / 1.4 · 300 · -0.2px

    heading-md

  • heading-sm

    18px / 1.4 · 300

    heading-sm

  • body-lg

    16px / 1.4 · 300

    body-lg

  • body-md

    15px / 1.4 · 300

    body-md

  • body-tabular

    14px / 1.4 · 300 · -0.42px

    body-tabular

  • button-md

    16px / 1 · 400

    button-md

  • button-sm

    14px / 1 · 400

    button-sm

  • caption

    13px / 1.4 · 400 · -0.39px

    caption

  • micro

    11px / 1.4 · 300

    micro

  • micro-cap

    10px / 1.15 · 400 · 0.1px

    micro-cap

Spacing

  • space-xxs

    2px

  • space-xs

    4px

  • space-sm

    8px

  • space-md

    12px

  • space-lg

    16px

  • space-xl

    24px

  • space-xxl

    32px

  • space-huge

    64px

Radius

  • radius-xs

    4px

  • radius-sm

    6px

  • radius-md

    8px

  • radius-lg

    12px

  • radius-xl

    16px

  • radius-pill

    9999px

Components

  • Button

    The indigo pill, the only filled button on marketing surfaces, and a white secondary pill in indigo text.

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

  • PillTag

    A soft indigo tag in uppercase micro type.

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

  • PricingCard

    Pricing and feature cards at radius-lg: white, featured navy and the cream interlude band.

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

  • TextInput

    A 6px text field; the border uses hairline-input.

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