JL
Design systems

Apple

Quiet chrome, one blue

Design SystemLight theme

Color

  • primary

    #0066cc

  • primary-focus

    #0071e3

  • primary-on-dark

    #2997ff

  • ink

    #1d1d1f

  • body

    #1d1d1f

  • body-on-dark

    #ffffff

  • body-muted

    #cccccc

  • ink-muted-80

    #333333

  • ink-muted-48

    #7a7a7a

  • divider-soft

    #f0f0f0

  • hairline

    #e0e0e0

  • canvas

    #ffffff

  • canvas-parchment

    #f5f5f7

  • surface-pearl

    #fafafc

  • surface-tile-1

    #272729

  • surface-tile-2

    #2a2a2c

  • surface-tile-3

    #252527

  • surface-black

    #000000

  • surface-chip-translucent

    #d2d2d7

  • on-primary

    #ffffff

  • on-dark

    #ffffff

  • surface-chip-translucent-64

    rgba(210, 210, 215, 0.64)

  • canvas-parchment-frosted

    rgba(245, 245, 247, 0.8)

  • hairline-alpha

    rgba(0, 0, 0, 0.08)

Typography

display
"SF Pro Display", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif
text
"SF Pro Text", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif

Display

  • hero-display

    56px / 1.07 · 600 · -0.28px

    hero-display

  • display-lg

    40px / 1.1 · 600 · 0

    display-lg

  • display-md

    34px / 1.47 · 600 · -0.374px

    display-md

  • lead

    28px / 1.14 · 400 · 0.196px

    lead

  • lead-airy

    24px / 1.5 · 300 · 0

    lead-airy

  • tagline

    21px / 1.19 · 600 · 0.231px

    tagline

Text

  • body-strong

    17px / 1.24 · 600 · -0.374px

    body-strong

  • body

    17px / 1.47 · 400 · -0.374px

    body

  • dense-link

    17px / 2.41 · 400 · 0

    dense-link

  • caption

    14px / 1.43 · 400 · -0.224px

    caption

  • caption-strong

    14px / 1.29 · 600 · -0.224px

    caption-strong

Controls and legal

  • button-large

    18px / 1 · 300 · 0

    button-large

  • button-utility

    14px / 1.29 · 400 · -0.224px

    button-utility

  • fine-print

    12px / 1 · 400 · -0.12px

    fine-print

  • micro-legal

    10px / 1.3 · 400 · -0.08px

    micro-legal

  • nav-link

    12px / 1 · 400 · -0.12px

    nav-link

Spacing

  • space-xxs

    4px

  • space-xs

    8px

  • space-sm

    12px

  • space-md

    17px

  • space-lg

    24px

  • space-xl

    32px

  • space-xxl

    48px

  • space-section

    80px

Radius

  • radius-none

    0px

  • radius-xs

    5px

  • radius-sm

    8px

  • radius-md

    11px

  • radius-lg

    18px

  • radius-pill

    9999px

  • radius-full

    9999px

Elevation

  • shadow-product

    3px 5px 30px 0 rgba(0, 0, 0, 0.22)

  • shadow-hairline-soft

    0 0 0 1px rgba(0, 0, 0, 0.08)

Components

  • Buttons

    Buttons are Action Blue pills for every primary action, compact dark rects for utility actions, and a pearl capsule for quiet secondary choices.

    • Pair ads-btn-primary ("Buy") with ads-btn-secondary ("Learn more") when a tile offers two actions.
    • Keep primary actions on radius-pill; the pill shape is the action signal.
    • Use ads-link-dark for inline links on dark tiles.
    • Don't add a shadow, gradient or second accent color to any button.
    • Don't use primary-on-dark on light grounds (3.02:1 on canvas).
    • Don't use ads-btn-dark in content areas; it belongs to nav and utility clusters.

  • ConfiguratorChip

    The configurator chip is a pill-shaped option cell on a buy page: a small thumbnail, a label and a price delta, with a blue border when selected.

    • ads-chip (configurator-option-chip): canvas ground, ink text in caption, radius-pill, 12px 16px padding, 1px hairline edge.
    • .is-selected (configurator-option-chip-selected): 2px solid primary-focus border; padding drops by 1px so the chip does not shift.
    • Lay out four or five per row.
    • Show the price delta in ink-muted-80 after the label.
    • Expose selection through aria-checked as well as the border.
    • Don't fill the selected chip with blue; only the border changes.
    • Don't use chips for actions; actions are ads-btn-primary.

  • EnvironmentQuoteCard

    The environment quote card is an editorial hero: a centered white headline over a dark photographic backdrop, with one primary action below.

    • ads-quote: surface-tile-1 ground, radius-none, space-section (80px) vertical padding.
    • Headline in display-lg and on-dark (14.91:1 on surface-tile-1); action as ads-btn-primary.
    • If a photograph is added, check on-dark against its brightest region under the text.
    • Keep it to one sentence and one action.
    • Don't add a gradient scrim as decoration; if a photo needs one for legibility, say so as an addition.
    • Don't draw or approximate the program mark.

  • FloatingStickyBar

    The floating sticky bar pins to the bottom of a buy page while the shopper scrolls, showing the running total and one primary action.

    • ads-sticky: canvas-parchment-frosted with backdrop-frosted, height 64px, padding 12px 32px (space-sm by space-xl).
    • Total in body with the amount in weight 600; action as ads-btn-primary.
    • The frost stays readable over dark content: over surface-tile-1 it resolves near #ccccce, where ink reads at 10.5:1.
    • Show it only on configurator and buy flows.
    • Don't add a top shadow; the frost provides the separation.
    • Don't place more than one action in the bar.

  • Footer

    The footer is the one deliberately dense area: columns of links on parchment that expose the whole site map, closed by a legal row.

    • ads-footer: canvas-parchment ground, ink-muted-80 text (11.6:1), 64px vertical padding.
    • Column headings in caption-strong; links in dense-link (17px with 2.41 line height).
    • Legal row in fine-print and ink-muted-48. That pair reads at 3.94:1 on canvas-parchment, below 4.5:1; it is the source's value, kept exact. Use ink-muted-80 when the legal text must be read.
    • Keep the 2.41 line height on link columns; it is what makes the dense lists scannable.
    • Don't shrink the link size below dense-link to fit more columns; wrap columns instead.

  • Navigation

    Navigation is two stacked bars: a 44px black global nav and a 52px frosted parchment sub-nav that carries the product name and a persistent Buy pill.

    • ads-gnav (global-nav): surface-black ground, on-dark text in nav-link (12px), links about 20px apart, utilities aligned right. The brand mark sits at its left edge in production; this system ships no logo, so leave that slot empty or set the brand name in plain type.
    • ads-subnav (sub-nav-frosted): canvas-parchment-frosted with backdrop-frosted, a 1px hairline-alpha bottom edge, category name in tagline, links in button-utility, then an ads-btn-primary.
    • Below 834px (bp-tablet-landscape) the global nav collapses to a menu button and bag; below 734px the sub-nav keeps only the name and the primary action.
    • Keep the global nav pure black; it is the one place surface-black appears on most pages.
    • Pin the sub-nav under the global nav and keep its primary action visible.
    • Don't add a second color or a shadow to either bar; the frost is the only depth.
    • Don't put more than one primary pill in the sub-nav.

  • ProductTile

    Product tiles are full-bleed, square-cornered sections that stack with no gap and alternate light and dark grounds, so the color change separates sections.

    • Alternate light and dark; put ads-tile-parchment between two light tiles and ads-tile-dark-2 next to an ads-tile-dark.
    • On dark tiles, use ads-link-dark for inline links. ads-btn-primary still works there because its white label reads at 5.57:1, though the blue fill sits at 2.68:1 against surface-tile-1.
    • Keep at least 40px between the render and any text.
    • Don't round tiles, add borders between them or put a gradient behind them.
    • Don't put the product shadow on the tile itself.

  • SearchInput

    The search input is a 44px pill field with a leading search glyph, matching the pill grammar of the primary action.

    • ads-search: canvas ground, 1px hairline-alpha border, radius-pill, 12px 20px padding, height 44px.
    • Text in body (17px) and ink; placeholder in ink-muted-80.
    • Focus: 2px solid primary-focus outline (4.7:1 on canvas).
    • The source documents no error or validation state. Do not invent one; if a product needs it, flag it as an addition.
    • Keep the field on canvas or canvas-parchment.
    • Don't square the corners or add an inner shadow.

  • StoreUtilityCard

    The store utility card is the white grid cell used in the store and accessories grids: an image, a name, a price and one text link.

    • ads-card: canvas ground, 1px hairline border, radius-lg (18px), space-lg (24px) padding.
    • ads-card-media: 1:1 crop at radius-sm (8px).
    • Name in body-strong, price in body, link as ads-link in primary.
    • Grids run 5 columns at desktop, 4 at bp-content-lock, 3 at bp-small-desktop, 2 at bp-tablet-landscape, 1 at bp-phone, with 20 to 24px gutters (space-lg).
    • Set cards on canvas-parchment so the white card reads as a cell.
    • Let only the product image carry shadow-product, and only when it is a cut-out render.
    • Don't add a shadow, a colored border or a filled button to the card.
    • Don't change the radius; 18px is the card grammar.