JL
Design systems

Figma

Monochrome chrome, pastel color blocks

Design SystemLight theme

Color

  • primary

    #000000

  • on-primary

    #ffffff

  • ink

    #000000

  • canvas

    #ffffff

  • inverse-canvas

    #000000

  • inverse-ink

    #ffffff

  • on-inverse-soft

    #ffffff

  • hairline

    #e6e6e6

  • hairline-soft

    #f1f1f1

  • surface-soft

    #f7f7f5

  • block-lime

    #dceeb1

  • block-lilac

    #c5b0f4

  • block-cream

    #f4ecd6

  • block-pink

    #efd4d4

  • block-mint

    #c8e6cd

  • block-coral

    #f3c9b6

  • block-navy

    #1f1d3d

  • accent-magenta

    #ff3d8b

  • semantic-success

    #1ea64a

  • overlay-scrim

    #000000

Typography

sans
figmaSans, Inter, "SF Pro Display", system-ui, Helvetica, sans-serif
mono
figmaMono, "JetBrains Mono", "SF Mono", Menlo, monospace

Display

  • display-xl

    86px / 1 · 340 · -1.72px

    display-xl

  • display-lg

    64px / 1.1 · 340 · -0.96px

    display-lg

  • headline

    26px / 1.35 · 540 · -0.26px

    headline

  • subhead

    26px / 1.35 · 340 · -0.26px

    subhead

  • card-title

    24px / 1.45 · 700 · 0

    card-title

Text

  • body-lg

    20px / 1.4 · 330 · -0.14px

    body-lg

  • body

    18px / 1.45 · 320 · -0.26px

    body

  • body-sm

    16px / 1.45 · 330 · -0.14px

    body-sm

  • link

    20px / 1.4 · 480 · -0.1px

    link

  • button

    20px / 1.4 · 480 · -0.1px

    button

Labels

  • eyebrow

    18px / 1.3 · 400 · 0.54px

    eyebrow

  • caption

    12px / 1 · 400 · 0.6px

    caption

Spacing

  • space-hair

    1px

  • space-xxs

    4px

  • space-xs

    8px

  • space-sm

    12px

  • space-md

    16px

  • space-lg

    24px

  • space-xl

    32px

  • space-xxl

    48px

  • space-section

    96px

  • space-footer

    64px

Radius

  • radius-xs

    2px

  • radius-sm

    6px

  • radius-md

    8px

  • radius-lg

    24px

  • radius-xl

    32px

  • radius-pill

    50px

  • radius-full

    9999px

Elevation

  • shadow-none

    none

  • shadow-soft

    0 4px 16px rgba(0,0,0,0.06)

Components

  • Buttons

    Buttons are pills: the black primary, the white secondary, a plain text hit target, the selected-state pricing tab, a single promo magenta, and 40px circular icon buttons.

    • Do use fgm-btn--primary (primary fill, on-primary label, radius-pill, button 20px at 480) for the one primary action in a viewport, and pair it with fgm-btn--secondary (canvas fill, ink label, no border). The pair is the brand signature.
    • Do make the selected pricing tab the same black surface as the primary: fgm-btn--tab.is-selected, never a coloured tab.
    • Do use fgm-btn--magenta (accent-magenta) once per page, inside an already coloured panel. Its on-primary label is 3.34:1, kept exact from the source.
    • Do make icon buttons circles, 40px (size-icon-button), surface-soft on light grounds and on-inverse-soft at about 16% on dark ones.
    • Don't square a button off; the source says square buttons read as a different brand.
    • Don't put two black primaries in one viewport.
    • Don't expect a pressed or hover fill: the source documents none.
    • Secondary needs a ground to show: it is white on white, so it reads on a coloured block or a surface-soft area.

  • Cards

    Cards are mostly absent: the page is carried by oversized pastel colour blocks with 24px corners and 48px padding, with hairline pricing cards, soft tiles, a promo banner and a checkmark list around them.

    • Do choose one colour block per story section from the block-* family, at radius-lg (24px) with space-xxl (48px) padding, a headline title and a subhead paragraph.
    • Do set ink on light blocks and inverse-ink on block-navy.
    • Do give pricing cards canvas, a 1px hairline and radius-lg, with a card-title and space-lg (24px) padding.
    • Do use surface-soft with radius-md (8px) for template cards (space-md padding) and tiles (space-lg padding).
    • Do keep the promo banner on block-lilac with radius-md and a magenta button on the right.
    • Do show a comparison checkmark as a 16px glyph in semantic-success.
    • Don't add a shadow to a colour block; the colour is the depth.
    • Don't put more than one colour block in a single viewport.

  • Inputs

    Inputs are 8px-radius fields on white with a 1px hairline and an 18px value, with a focus ring rather than a fill change.

    • Do set a text-input on canvas with ink text in body (18px), radius-md, padding 12px 14px and a 1px hairline border.
    • Do keep the same surface on focus and draw a ring. The source gives no ring colour or width; the preview uses a 2px ink ring, 21.00:1 against the field.
    • Do give contact-form inputs a 48px minimum height (size-input-height) and set labels in body-lg.
    • Don't change the fill on focus.
    • Don't expect error or validation styling: the source documents none. The hairline field border is 1.25:1 against white, below 3:1; kept exact.

  • Navigation

    Navigation is a 56px white bar with the wordmark, text links and the secondary and primary pill pair, a thin black marquee strip beneath it, and a white footer with a display-size wordmark and mono uppercase columns.

    • Do keep the bar at size-nav-height (56px) on canvas with body-sm text and the pair of pills on the right.
    • Do keep the marquee strip at size-marquee-height (36px) on inverse-canvas with inverse-ink text; the source scrolls customer logos through it (the preview is static text).
    • Do set footer column heads and small links in caption (mono, uppercase), on canvas, with space-footer by space-xl padding.
    • Do collapse the links into a hamburger overlay below 960px, keeping the two pills on the bar above 560px.
    • Don't add a border or shadow to the bar.