JL
Design systems

Framer

Black artboard, white pills, spotlight cards

Design SystemDark theme

Color

  • primary

    #ffffff

  • on-primary

    #000000

  • accent-blue

    #0099ff

  • ink

    #ffffff

  • ink-muted

    #999999

  • canvas

    #090909

  • surface-1

    #141414

  • surface-2

    #1c1c1c

  • hairline

    #262626

  • hairline-soft

    #1a1a1a

  • inverse-canvas

    #ffffff

  • inverse-ink

    #000000

  • gradient-magenta

    #d44df0

  • gradient-violet

    #6a4cf5

  • gradient-orange

    #ff7a3d

  • gradient-coral

    #ff5577

  • semantic-success

    #22c55e

Typography

display
"GT Walsheim Framer Medium", "GT Walsheim Medium", Inter, system-ui, sans-serif
sans
"Inter Variable", Inter, system-ui, sans-serif

Display

  • display-xxl

    110px / 0.85 · 500 · -5.5px

    display-xxl

  • display-xl

    85px / 0.95 · 500 · -4.25px

    display-xl

  • display-lg

    62px / 1 · 500 · -3.1px

    display-lg

  • display-md

    32px / 1.13 · 500 · -1px

    display-md

Text

  • headline

    22px / 1.2 · 700 · -0.8px

    headline

  • subhead

    24px / 1.3 · 400 · -0.01px

    subhead

  • body-lg

    18px / 1.3 · 400 · -0.18px

    body-lg

  • body

    15px / 1.3 · 400 · -0.15px

    body

  • body-sm

    14px / 1.4 · 500 · -0.14px

    body-sm

  • caption

    13px / 1.2 · 500 · -0.13px

    caption

  • micro

    12px / 1.2 · 400 · -0.12px

    micro

  • button

    14px / 1 · 500 · -0.14px

    button

Spacing

  • space-hair

    1px

  • space-xxs

    4px

  • space-xs

    8px

  • space-sm

    12px

  • space-md

    15px

  • space-lg

    20px

  • space-xl

    30px

  • space-xxl

    40px

  • space-section

    96px

Radius

  • radius-xs

    4px

  • radius-sm

    6px

  • radius-md

    10px

  • radius-lg

    15px

  • radius-xl

    20px

  • radius-xxl

    30px

  • radius-pill

    100px

  • radius-full

    9999px

Elevation

  • shadow-none

    none

  • shadow-float

    0px 10px 30px rgba(0,0,0,0.25)

  • shadow-edge

    inset 0px 0.5px 0px rgba(255,255,255,0.1)

  • shadow-focus-ring

    0px 0px 0px 1px rgba(0,153,255,0.15)

Components

  • Buttons

    Buttons are pills: a white primary, a charcoal secondary and a lifted translucent button, plus a circular icon button.

    • Do use frm-btn--primary (primary fill, on-primary label, radius-pill, button, padding 10px 15px) as the only primary CTA shape.
    • Do pair it with frm-btn--secondary (surface-1 fill, ink label) for secondary actions, never a bordered ghost button.
    • Do use frm-btn--translucent (surface-2, radius-xxl) over busy or gradient grounds.
    • Do keep frm-btn--icon at size-icon-button (40px, 44px on touch) in surface-1.
    • Do set hyperlinks in accent-blue with frm-link. The blue is never a button fill.
    • Don't square off a CTA or add a second chromatic accent.
    • Don't expect a hover style or a darkened pressed fill: the source shrinks the pressed pill with a transform scale and gives no factor. The preview uses 0.96.
    • Known gap: the pills are 34px tall from their padding, though the source states a 44px tap height.

  • Cards

    Cards are charcoal panels on black, with an occasional solid spotlight card in violet, magenta, orange or coral as the single color moment.

    • Do set pricing cards on surface-1 at radius-xl with 24px padding, and flip the featured one to surface-2: one step of lift, no colored outline.
    • Do set template cards on surface-1 at radius-lg with space-sm padding.
    • Do give a floating mockup tile shadow-edge and shadow-float at radius-xl, 16px padding.
    • Do use one or two spotlight cards per page (gradient-violet most often), 32px padding, subhead type in ink, and radius-xxl when they span a wider tile.
    • Do keep comparison rows in ink-muted with a 1px hairline-soft underline, header rows in ink.
    • Don't use a gradient as a section ground, and don't put three spotlights in one viewport.
    • Known weak pairs kept exact: ink on gradient-orange is 2.59:1 and on gradient-coral 3.08:1; the card edge is surface-1 on canvas at 1.08:1.

  • Inputs

    Inputs are charcoal fields with a 10px corner and a focus state that adds a faint blue ring without changing the surface.

    • Do build the field on surface-1 with an ink value in body, radius-md and padding 10px 14px.
    • Do mark focus with shadow-focus-ring, and add a solid accent-blue outline so the state is visible.
    • Don't change the surface on focus: the source keeps it.
    • Don't rely on the fill or the ring alone: surface-1 is 1.08:1 off canvas, and the 15% ring is far below 3:1. Both kept exact from the source.
    • Don't expect error or validation styles: the source extracts none. The label and placeholder styles here are preview choices.

  • Navigation

    Navigation is the 56px black top bar with a wordmark, a text menu and a pill pair, the pill pricing tabs and the dense five-column footer.

    • Do set the top bar on canvas at size-nav-height, links in body-sm in ink, and end it with one frm-btn--secondary and one frm-btn--primary.
    • Do collapse the menu to a hamburger below 810px, keeping the primary pill on the bar.
    • Do style tabs as pills: ink-muted on canvas at rest, ink on surface-2 when selected. Selected is lift, not color.
    • Do set the footer on canvas with 64px 32px padding and caption links in ink-muted.
    • Don't add a border or color to the active tab, or a shadow under the bar.
    • The 24px nav inset (space-lg) and the footer column titles are preview choices; the source gives neither.