---
version: alpha
name: Jeton
description: "Bare white paper, set alight in bands of signal orange."
colors:
  on-surface: "#000000"
  surface: "#FFFFFF"
  primary: "rgba(247, 59, 32, 0.05)"
  jeton-orange: "#F73B20"
  menu-orange: "#F84D35"
  oxblood: "#360802"
  thumbnail-coral: "#F96853"
  mulberry: "#6B3843"
  add-green: "#34C771"
  send-blue: "#477EE9"
  exchange-crimson: "#FB2D54"
  rail-blue: "#689AF7"
  slate: "#949FB0"
  glass-white: "rgba(255, 255, 255, 0.1)"
  hairline: "rgba(0, 0, 0, 0.1)"
  switcher-track: "rgba(247, 59, 32, 0.1)"
typography:
  caption:
    fontFamily: Sequel Sans
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0.36px
  label:
    fontFamily: Sequel Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 19.6px
    letterSpacing: 0.42px
  body:
    fontFamily: Sequel Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0.48px
  body-tight:
    fontFamily: Sequel Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: 0.48px
  subheading:
    fontFamily: Sequel Sans
    fontSize: 24px
    fontWeight: 400
    lineHeight: 28.8px
    letterSpacing: 0.24px
  title-6:
    fontFamily: Sequel Sans
    fontSize: 36px
    fontWeight: 400
    lineHeight: 43.2px
    letterSpacing: 0.36px
  title-5:
    fontFamily: Sequel Sans
    fontSize: 48px
    fontWeight: 400
    lineHeight: 57.6px
    letterSpacing: 0.48px
  title-4:
    fontFamily: Sequel Sans
    fontSize: 64px
    fontWeight: 400
    lineHeight: 70.4px
    letterSpacing: 0.64px
  title-3:
    fontFamily: Sequel Sans
    fontSize: 80px
    fontWeight: 400
    lineHeight: 80px
    letterSpacing: 0.8px
  title-2:
    fontFamily: Sequel Sans
    fontSize: 120px
    fontWeight: 400
    lineHeight: 120px
    letterSpacing: 0em
  title-1:
    fontFamily: Sequel Sans
    fontSize: 180px
    fontWeight: 400
    lineHeight: 162px
    letterSpacing: 0em
rounded:
  footer-link: 8px
  button-app-badge: 12px
  card-thumbnail-dropdown: 16px
  partnership-panel: 20px
  menu-drawer-and-its-slot: 24px
  centred-orange-block: 40px
  scroll-hint: 60px
  nav-button: 84px
  fees-switcher: 98px
  nav-bar: 112px
  support-launcher: 150px
spacing:
  hairgap: 2px
  2xs: 4px
  xs: 6px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px
  gutter: 48px
  footer-band: 60px
  section: 120px
  hero-band: 216px
---
# Jeton — Style Reference

> Bare white paper, set alight in bands of signal orange.

**Theme:** light

Jeton runs on one hue and one face. `#F73B20` is ink on white, fill under white, and the wordmark that runs off both edges of the footer; white is what the orange leaves behind, and the two trade places band by band. Sequel Sans carries every line at 500 for display and 450 for text, so hierarchy comes from scale — 180px down to 12px — far more than from weight. Tracking shrinks from 0.03em at caption size to none at 120px while line-height falls from 1.5 to 0.9, tightening in both axes at once. The corner vocabulary stays plural — 8px on footer links, 12px on buttons, 16px on cards, 20px on partnership panels, full rounds on avatars — and shadow is almost absent, so depth reads as a change of colour. Bands are enormous at 216px of vertical padding, and where the pages turn to pricing the marketing voice gives way to a data one: translucent slate cards, hairline rules, oxblood ink.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Jeton Orange | `#F73B20` | `--color-orange` | The identity, and a text colour far more often than a fill — links, labels, display headings, then the full-bleed bands (`.background.absolute.inset-0.overflow-hidden`). Reach for it as ink before you reach for it as a plane. |
| Page White | `#FFFFFF` | `--color-white` | The canvas (`._page`), the ink on every orange band, and the active segment behind a nav button (`.background.absolute.inset-0`). |
| Menu Orange | `#F84D35` | `--color-orange-bright` | One step brighter than the identity orange, reserved for chrome — the floating nav bar (`.menu-bar.gap-2`) and the drawer's inner panel (`.slot`). Both carriers the inventory lists for it — `.menu-bar.gap-2` and `.slot` — are fills. |
| Oxblood | `#360802` | `--color-orange-900` | The dark ink of the fee tables and the exchange calculator (`.slot.subhead-2.-medium.color-orange-900`, td ×75) — for where orange-on-white would be too loud across a grid of numbers. |
| Ink Black | `#000000` | `--color-black` | Body ink on white, and the rule colour of the pricing rows (tr ×28). The inventory paints no black fill — do not build a black surface out of it. |
| Thumbnail Coral | `#F96853` | `--color-coral` | A lighter orange for small media plates: menu page thumbnails and view backgrounds (`._menu-page-thumbnail`, `.view-background.absolute.inset-0`). |
| Mulberry | `#6B3843` | `--color-mulberry` | A single 1920×1270px band behind the home page's media (`.background.absolute.inset-0`) — the only dark plane the inventory paints as a fill. |
| Add Green | `#34C771` | `--color-green` | Icon-card fill and the matching 120px heading ink for "Add" (`.icon-card.grid.place-center.br-24-12`). |
| Send Blue | `#477EE9` | `--color-blue` | The same pairing for "Send" — card fill and heading ink, one colour per verb. |
| Exchange Crimson | `#FB2D54` | `--color-crimson` | The same pairing for "Exchange". Each action hue tends to work as a pair — a fill on `.icon-card.grid.place-center.br-24-12` under a 120px heading, sampled "Exchange" `.-medium`. |
| Rail Blue | `#689AF7` | `--color-blue-rail` | Icon bubble on the fee rails (`.icon-bubble.flex.place-center.br-full`), and at 10% the card behind it — colour that sorts a list rather than sells. |
| Slate | `#949FB0` | `--color-slate` | The neutral fee-rail bubble and, at 10%, the comparison card's fill. The one mid-grey in the painted set; the only other near-neutral is `#F6F7F8`, a single border on `.swap-btn.mx-auto`. |
| Glass White | `rgba(255, 255, 255, 0.1)` | `--color-glass` | The translucent surface treatment: the scroll hint's fill *and* its border, the floating cards, the quote cards. One value doing both jobs is what makes it read as glass. |
| Hairline | `rgba(0, 0, 0, 0.1)` | `--color-hairline` | The 1px rules inside the fee cards (`.divider.w-full.h-1.my-16`, 339×1px) — structure inside a card, not between sections. |
| Orange Wash | `rgba(247, 59, 32, 0.05)` | `--color-orange-wash` | The faintest fill in the system — currency cards, chevron bubbles, media cards (`._currency-card`, `._icon.chevron.br-full`, `._media-card.color-orange`). |
| Switcher Track | `rgba(247, 59, 32, 0.1)` | `--color-orange-track` | The pill track behind the deposit/withdraw switcher (`.flex.items-center.no-scrollbar`). |

## Tokens — Typography

### Sequel Sans — the whole system: display, headings, body, labels, captions and every control label; 500 for display, 450 for text, and scale rather than weight for hierarchy · `--font-sans`

- **Substitute:** Aeonik, General Sans, Inter Tight
- **Weights:** 400, 450, 500, 600
- **Sizes:** 12px, 14px, 16px, 24px, 36px, 48px, 64px, 80px, 120px, 180px
- **Line height:** 0.9 at 180px (162px) through 1.0 at 80–120px to 1.5 at 12–16px
- **Letter spacing:** positive and size-relative — 0.36px at 12px, 0.42px at 14px, 0.48px at 16px (all 0.03em); 0.24px at 24px through 0.8px at 80px (0.01em); `normal` at 120px and 180px
- **Role:** the whole system: display, headings, body, labels, captions and every control label; 500 for display, 450 for text, and scale rather than weight for hierarchy

### Times — named in the font inventory; no heading or text row in the census paints it, so treat it as the fallback serif rather than a brand face · `--font-serif`

- **Substitute:** Times New Roman, Tinos, Liberation Serif
- **Weights:** 400
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** named in the font inventory; no heading or text row in the census paints it, so treat it as the fallback serif rather than a brand face

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 18px | 0.36px | `--text-caption` |
| Label | 14px | 19.6px | 0.42px | `--text-label` |
| Body | 16px | 24px | 0.48px | `--text-body` |
| Body tight | 16px | 20px | 0.48px | `--text-body-tight` |
| Subheading | 24px | 28.8px | 0.24px | `--text-subhead` |
| Title 6 | 36px | 43.2px | 0.36px | `--text-title-6` |
| Title 5 | 48px | 57.6px | 0.48px | `--text-title-5` |
| Title 4 | 64px | 70.4px | 0.64px | `--text-title-4` |
| Title 3 | 80px | 80px | 0.8px | `--text-title-3` |
| Title 2 | 120px | 120px | normal | `--text-title-2` |
| Title 1 | 180px | 162px | normal | `--text-title-1` |

## Tokens — Spacing & Shapes

**Base unit:** 4px   **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| Hairgap | 2px | `--spacing-2` |
| 2xs | 4px | `--spacing-4` |
| xs | 6px | `--spacing-6` |
| sm | 8px | `--spacing-8` |
| md | 12px | `--spacing-12` |
| lg | 16px | `--spacing-16` |
| xl | 20px | `--spacing-20` |
| 2xl | 24px | `--spacing-24` |
| 3xl | 32px | `--spacing-32` |
| Gutter | 48px | `--spacing-48` |
| Footer band | 60px | `--spacing-60` |
| Section | 120px | `--spacing-120` |
| Hero band | 216px | `--spacing-216` |

### Border Radius

| Element | Value |
|---------|-------|
| Footer link (`.footer-link`) | 8px |
| Button, app badge (`._button.no-tap-highlight`, `._app-button`) | 12px |
| Card, thumbnail, dropdown (`.item.br-16.body.md-body-small`, `.thumbnail`, `._dropdown-button.w-full.flex.items-center`) | 16px |
| Partnership panel (`._partnership-card.flex.br-20-16`) | 20px |
| Menu drawer and its slot (`._menu-drawer`, `.slot`) | 24px |
| Centred orange block (`.g-row-full.flex.flex-col.items-center`) | 40px |
| Scroll hint (`._scroll-hint.caption.absolute`) | 60px |
| Nav button (`._menu-button.body-small.-book`) | 84px |
| Fees switcher (`._switcher.body-small.no-tap-highlight`) | 98px |
| Nav bar (`.menu-bar.gap-2`) | 112px |
| Support launcher (`._zendesk-launcher`) | 150px |
| Avatar, icon bubble, icon dot (`._avatar.inline-flex.place-center.br-full`, `.icon-bubble.flex.place-center.br-full`, `.bg.absolute.inset-0`) | 100% |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Lift | `rgba(0, 0, 0, 0.05) 0px -4px 16px 0px` | `--shadow-lift` |

### Layout

- **Page max-width:** none — `._page` measures 1920×8915–15593px; containment comes from the 16-column grid and a 48px horizontal inset on row blocks
- **Section gap:** 216px on the big centred bands, 120px on standard rows, 60px on the footer; 365px and 360px one-offs on the mobile-app hero and the exchange calculator
- **Card padding:** 16px (`.item.br-16.body.md-body-small`), 8px (`.slot`), 0px 32px (`._partnership-card.flex.br-20-16`), 120px 0px (`.g-row-full.flex.flex-col.items-center`)
- **Element gap:** 24px default, 8px inside controls; 32px, 20px and 16px for columns and lists, 2px between nav segments

## Components

### Floating Navigation Bar
**Role:** the persistent audience switch — personal, business, company — parked at the bottom of every page rather than the top.
`.menu-bar.gap-2` is a `ul` filled `#F84D35`, radius 112px, padding 0px 2px, no border, no shadow, 387×48px on all pages, holding "Personal Business Company" with a 2px gap. Segments are `._menu-button.body-small.-book` — 14px/450, 19.6px line-height, 0.42px tracking, padding 0px 16px, radius 84px, fill none, 105–110×44px as a `button` and 56–106×44px as an `a`. The active one sits on `.background.absolute.inset-0`, a `#FFFFFF` plate at radius 84px and 56–110×44px. Two nested radii — 112px outer, 84px inner — keep the pill reading as one object.

### Menu Drawer
**Role:** the panel that drops from a nav segment to list the pages under it.
`._menu-drawer` is a `div` with fill none, padding 1px, radius 24px, no shadow, 389×146–202px across all pages, containing "Jeton Card Fees". Inside it `.slot` carries the colour: fill `#F84D35`, padding 8px, radius 24px, border none, shadow none, 389–390×151–207px. The 1px outer padding against an 8px inner one is the whole construction — drawer as frame, slot as surface, the same 24px corner on both so the nesting is invisible.

### Text Button
**Role:** the header's log-in and sign-up pair, and the inline "learn more" that follows a feature block.
`._button.no-tap-highlight` measures two ways. The common variant is an `a` ×13 on all pages: 16px/400, padding 0px 24px, radius 12px, fill none, border none, shadow none, 93–230px wide at 48px tall, containing "L o g i n L o g i n" — the label duplicated for a hover swap. The rarer is a single `a` on the home page at 16px/500 in a 133×48px box containing "L e a r n m o r e L e a r n m o r e". Label ink is not measured on either row; internal gap is 8px. The fill is genuinely none — whatever plate sits under a button is a sibling layer, not the control.

### App Store Badge
**Role:** the paired App Store and Google Play download buttons under a hero.
`._app-button` also measures two ways: `a` ×12 on the home, fees and about pages at 16px/400, and `a` ×8 across all pages at 16px/450. Both share padding 0px 24px, radius 12px, fill none, border none, shadow none, gap 8px and a fixed 148×44px box — no size range, because the badge artwork inside it is fixed. They carry no text of their own; the wordmarks are artwork.

### Footer Link
**Role:** the workhorse of the site map — every destination in the footer columns.
`.footer-link` is an `a` painted 77 times across all pages: ink `#F73B20`, 16px/450, 24px line-height, 0.48px tracking, padding 4px 0px, radius 8px, border none, shadow none, boxes from 32×32px to 199×32px, sample text "Sign up". Orange text on white at body size is the site's link convention. The 8px radius belongs to the hover plate, not the text — it is the smallest corner in the system, and the radii census records no value between it and 12px.

### Scroll Hint
**Role:** the small cue at the bottom-left of a hero telling you the page keeps going.
`._scroll-hint.caption.absolute` is the one control the census measures with a fill of its own: a `button` ×4 across all pages, fill `rgba(255, 255, 255, 0.1)` with a 1px `rgba(255, 255, 255, 0.1)` border, label `#FFFFFF` at 12px/400, padding 4.8px 10.2px, radius 60px, shadow none, box 65×30px, text "Scroll". The sub-pixel padding is the real measurement — round it to 5px/10px and the 30px height goes with it.

### Language Dropdown
**Role:** the locale and region control — "en" in the header, a region name on the fee tables.
`._dropdown-button.w-full.flex.items-center` is a `button` ×8 on all pages: fill none, 16px/450, 24px line-height, 0.48px tracking, padding 12px 16px, radius 16px, border none, shadow none, box 117×48px, containing "en", gap 8px between label and chevron. A 16px radius on a 48px control is the card corner applied to a control — which is why the dropdown groups visually with the cards below it rather than with the pill-shaped nav.

### Fee Comparison Card
**Role:** one payment method on the fees page — duration, sender fee, receiver fee and limits, side by side with its rivals.
`.item.br-16.body.md-body-small` measures two ways on the fees page: fill `rgba(148, 159, 176, 0.1)` ×10, containing "Wise Duration Sender Fee Receiver Fee Limits Ins", and fill `rgba(104, 154, 247, 0.1)` ×2, containing "Local Bank Transfer Duration Sender Fee Receiver". Both are 16px padding, 16px radius, no border, no shadow, 371×217px. A 10% tint is the entire card treatment. Rows inside are split by `.divider.w-full.h-1.my-16`, a `rgba(0, 0, 0, 0.1)` bar of 339×1px; each card is headed by `.icon-bubble.flex.place-center.br-full`, a 32×32px circle filled `#949FB0` ×10 or `#689AF7` ×2.

### Fees Switcher
**Role:** the deposit/withdraw toggle above the fee rails.
The track is `.flex.items-center.no-scrollbar`, a `ul` ×3 on the fees page filled `rgba(247, 59, 32, 0.1)`. Its corner is the 98px radius shared with `._switcher.body-small.no-tap-highlight`, painted 20 times on that page across `li`, `label`, `form` and `ul`. Padding, box and the active segment's fill are not measured — leave them unspecified rather than importing a value from another row.

### Floating Card
**Role:** the drifting feature cards on the home page — a transaction receipt, a media still, a quote.
`.card.~t` is filled `rgba(255, 255, 255, 0.1)`, the same glass value as the scroll hint and `.quote-card.px-16.py-16.br-16`, and it carries the only shadow the capture paints: `rgba(0, 0, 0, 0.05) 0px -4px 16px 0px`, 4 times on the home page. The Y offset is negative — blur rises off the top edge instead of falling under the bottom — so the card looks lit from below by the band it floats over. Radius and padding are not measured on this row. At 5% black over 16px of blur it is a lift, not a shadow.

### Partnership Card
**Role:** the sponsorship plates near the footer — club crest, team photography, the relationship in one line.
`._partnership-card.flex.br-20-16` is a `div` ×12 across all pages: fill none, padding 0px 32px, radius 20px, border none, shadow none, fixed at 886×280px. It holds no text of its own and no fill either, because the photograph *is* the surface. At one step past the 16px card, 20px is how a photographic panel announces itself as a different class of object.

### Testimonial Avatar
**Role:** the initials disc beside a customer quote.
`._avatar.inline-flex.place-center.br-full` is a `span` painted once per person on the home page: `#BCFFBB` at 40×40px containing "VK", `#BBD2FF` at 37×37px containing "LA", `#F5FFBB` at 34×34px containing "KR", with `#FFBBF0` carried by the same class. Radius 100%, padding 0px, border none, shadow none, type 16px/450, 24px line-height, 0.48px tracking. Four unrepeated pastels at three different sizes — the discs are people, not a component grid, and the system lets them wobble.

## Do's and Don'ts

### Do

- Let `#F73B20` be ink before it is a fill: it inks the link row sampled "Get Started" and the `.title-1.-medium.w-cols-12.sm-w-cols-14` display, while its fills are the few big planes — `.background.absolute.inset-0.overflow-hidden`.
- Set display type at weight 500 and change size, not weight, to change rank: 180px/162px, 120px/120px, 80px/80px, 48px/57.6px.
- Track positively and let the *ratio* fall as type grows — 0.03em at 12–16px (0.36–0.48px), 0.01em from 24px to 80px (0.24px rising to 0.8px), `normal` at 120px and 180px. The px value climbs; the em value drops.
- Keep the 48px horizontal inset on row blocks; it is the gutter on every captured page.
- Pair each action hue with its own heading: `#34C771`, `#477EE9` and `#FB2D54` each fill an `.icon-card.grid.place-center.br-24-12` and ink the 120px word above it.
- Use `rgba(255, 255, 255, 0.1)` for any surface that has to sit on a photograph, a render and a flat orange band at once.

### Don't

- Don't invent a black surface. `#000000` is painted as text and as the pricing rows' border; the inventory gives it no fill at all.
- Don't add shadows. The capture paints one, `rgba(0, 0, 0, 0.05) 0px -4px 16px 0px` on `.card.~t`, and it points upward — a downward shadow breaks the only elevation rule the system has.
- Don't give buttons a fill. `._button.no-tap-highlight`, `._app-button` and `.footer-link` all paint fill none; `._scroll-hint.caption.absolute` is the exception, not the pattern.
- Don't normalise the corners. 8px, 12px, 16px, 20px, 24px, 40px, 60px, 84px, 98px, 112px, 150px and 100% all coexist, and the radius tells you what kind of object you are looking at.
- Don't reach for a grey ramp. There is one mid-grey, `#949FB0`, and it works at 10% as often as at full strength.
- Don't shrink the bands. 216px of vertical padding on the big centred blocks is the system's breathing; compressing it turns a brand page into a product page.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#FFFFFF` | `._page`, and the ground under every table, card and dropdown |
| 1 | Brand band | `#F73B20` | Full-bleed sections (`.background.absolute.inset-0.overflow-hidden`, 1920–2112×1200–1320px) |
| 1 | Dark band | `#6B3843` | One 1920×1270px plane behind home-page media (`.background.absolute.inset-0`) |
| 2 | Chrome | `#F84D35` | Nav bar and drawer slot — brighter than the band, so it separates from it |
| 3 | Glass | `rgba(255, 255, 255, 0.1)` | Cards and chips floating over bands and imagery |
| 3 | Tint card | `rgba(148, 159, 176, 0.1)` | Data cards on white, where a solid fill would compete with the numbers |

## Elevation

Depth is colour, not light. The ladder runs white canvas → orange band → brighter orange chrome → 10% white glass, each step a change of hue or opacity rather than a shadow. The capture paints one shadow — `rgba(0, 0, 0, 0.05) 0px -4px 16px 0px` on `.card.~t`, four times on the home page — and its negative Y offset throws the blur upward, so the card hovers above a coloured plane instead of resting on paper. Borders are nearly as scarce, and all of them are 1px: `#000000` on the pricing rows (28), `#FFFFFF` (5), `rgba(255, 255, 255, 0.1)` on the scroll hint (4), `#360802` (1), and `#F6F7F8` once on `.swap-btn.mx-auto`. Everything else separates by fill alone.

## Imagery

Three kinds, all warm. Pastel 3D renders — stacked coin discs, podium cylinders, card stacks in peach, blush and mint — fill the hero backgrounds and carry the gradients the flat palette refuses to. Then product UI: the app and desktop client at full scale inside the band, not in a device frame. Then lifestyle and sponsorship photography, laid into `._partnership-card.flex.br-20-16` at 886×280px and `.absolute.inset-0.object-cover.br-12-8` at 12px radius, under a scrim — `rgba(0, 0, 0, 0.33)` on `.background.absolute.inset-0.overflow-hidden` or the warmer `rgba(182, 150, 145, 0.33)` on `.absolute.inset-0` — so white type stays legible and every photograph inherits the brand's temperature. The only image corner the census measures is 12px, on `.absolute.inset-0.object-cover.br-12-8` (img ×5, about page). No other image radius is measured — do not assume a rounded crop elsewhere.

## Layout

Full-bleed by default. `._page` runs the whole 1920px viewport width and the bands run with it; containment comes from the 16-column grid (`--grid-columns: 16`, `--grid-gap: clamp(4px, …, 24px)`, `--grid-margin: clamp(16px, …, 60px)` — declared, not painted) and from a 48px horizontal inset on 33 row blocks across all pages, widening to 60px on the accordion and table rows. Vertical rhythm is coarse: 216px on the big centred bands, 120px on standard rows, 96px on the about page's article tables (`.g-table`, article ×3) and 108px on two about-page row blocks (`.g-row.justify-end.pt-108-64.mb-144-32`, `.g-row.justify-end.pt-108-64.pb-60-16`), 60px on the footer, with 365px and 360px reserved for the mobile-app hero and the exchange calculator. Navigation is inverted — the audience switcher floats at bottom centre as a 387×48px pill, while the top rail carries the wordmark, the locale dropdown and the log-in/sign-up pair. The fees page keeps that chrome and gutter but changes mode underneath: a switcher, a region dropdown and a grid of 371×217px tint cards in place of the hero-and-band cadence.

## Typography Voice

Two modes, one face. Display type is Sequel Sans 500 at 80px, 120px and 180px, line-height at or below the size (80/80, 120/120, 162/180) and tracking at `normal` for the two largest steps — words set as blocks, letters nearly touching, shape read before sentence. Text type is the same family at 450, 16px on a 24px line with 0.48px of tracking: a 1.5 ratio and a full 0.03em of air, easy at small sizes on a saturated orange ground. Because tracking and leading tighten together as size climbs, the system rarely needs weight to signal importance. Display text is split into per-letter spans (`.title-2.-medium`, span ×76), every one inked `#FFFFFF`. The salmon-to-near-white steps the inventory lists — `#F5B2A4`, `#F6BCB0`, `#F9D3CB`, `#FDEDEA`, `#FFFCFB` — are each a single fill on a single span, decoration rather than letter ink.

## Agent Prompt Guide

Build on `#FFFFFF`. Set everything in Sequel Sans — 500 for display and for 24px subheads, 450 for 16px body and links, 400 on control labels (`._button.no-tap-highlight`, `._app-button`, "Scroll"). Paint `#F73B20` as text first; where it fills, it tends to fill a full-width band — `.background.absolute.inset-0.overflow-hidden` at 1920–2112×1200–1320px. `.flex.flex-col.items-center.text-center` measures two ways at 216px padding — white ground ×3 (home, fees, about) and orange ground ×2 (home, fees). Keep the 48px gutter, the 24px default gap, the 8px control gap. Buttons: no fill, 12px radius, 0px 24px padding. Cards: 16px radius, 16px padding, a 10% tint. Nav: a 112px pill with 84px segments. No shadow but the upward lift; the hairline inside a data card is a filled 1px bar (`.divider.w-full.h-1.my-16`), not a border.

## Quick Color Reference

- background: `#FFFFFF`
- text: `#000000`
- surface: `#F73B20`
- border: `#000000`
- accent: `#F73B20`
- primary action: no distinct CTA color — `._button.no-tap-highlight`, `._app-button` and `.footer-link` all paint fill none

## Example Component Prompts

1. **Floating navigation bar**: a bottom-centred pill, 387×48px, `ul` filled `#F84D35` at radius 112px, padding 0px 2px, gap 2px; three segments at radius 84px, padding 0px 16px, Sequel Sans 14px/450, 19.6px line-height, 0.42px tracking, 105–110×44px; the active segment on a `#FFFFFF` plate at radius 84px.
2. **Fee comparison card**: 371×217px, radius 16px, padding 16px, fill `rgba(148, 159, 176, 0.1)`, no border, no shadow; headed by a 32×32px circle at radius 100% filled `#949FB0`; four label/value rows in Sequel Sans 16px/450, 24px line-height, 0.48px tracking, `#000000`, split by 339×1px bars of `rgba(0, 0, 0, 0.1)`.
3. **Hero band**: full-bleed `#F73B20`, 216px vertical padding, 48px horizontal inset; an `h2` in Sequel Sans 500 at 80px/80px, 0.8px tracking, `#FFFFFF`; a 24px/28.8px subhead at 0.24px tracking; a 65×30px glass chip at radius 60px pinned bottom-left — fill and 1px border both `rgba(255, 255, 255, 0.1)`, label `#FFFFFF` 12px/400.
4. **Partnership panel**: 886×280px, radius 20px, padding 0px 32px, no fill, no shadow; a full-bleed photograph under `rgba(182, 150, 145, 0.33)`, crest lockup, and a 16px/450 `#FFFFFF` caption at 0.48px tracking.
5. **Text button pair**: two inline `a` elements, radius 12px, padding 0px 24px, height 48px, fill none, border none, Sequel Sans 16px/400, 8px gap, widths free between 93px and 230px, labels duplicated for a hover swap.

## Similar Brands

- **Klarna** — a single saturated colour flooding full-bleed bands, with oversized grotesk display doing a photograph's work.
- **Monzo** — hot coral as identity rather than accent, used as ink and plane interchangeably on a white canvas.
- **Lemonade** — one pink hue and playful 3D renders in place of stock photography, on a light canvas.
- **Cash App** — display type at extreme scale in one weight, trusting size and colour instead of typographic contrast.
- **The Browser Company (Arc)** — soft pastel gradients and rounded 3D objects warming a near-monochrome palette.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-orange: #F73B20;
  --color-white: #FFFFFF;
  --color-orange-bright: #F84D35;
  --color-orange-900: #360802;
  --color-black: #000000;
  --color-coral: #F96853;
  --color-peach: #FA8270;
  --color-mulberry: #6B3843;
  --color-green: #34C771;
  --color-blue: #477EE9;
  --color-crimson: #FB2D54;
  --color-blue-rail: #689AF7;
  --color-slate: #949FB0;
  --color-orange-25: #FFF6F5;
  --color-border-swap: #F6F7F8;
  --color-avatar-green: #BCFFBB;
  --color-avatar-blue: #BBD2FF;
  --color-avatar-lime: #F5FFBB;
  --color-avatar-pink: #FFBBF0;
  --color-glass: rgba(255, 255, 255, 0.1);
  --color-hairline: rgba(0, 0, 0, 0.1);
  --color-slate-tint: rgba(148, 159, 176, 0.1);
  --color-blue-tint: rgba(104, 154, 247, 0.1);
  --color-orange-wash: rgba(247, 59, 32, 0.05);
  --color-orange-track: rgba(247, 59, 32, 0.1);
  --color-scrim: rgba(0, 0, 0, 0.33);
  --color-scrim-warm: rgba(182, 150, 145, 0.33);

  /* Typography — Families */
  --font-sans: 'Sequel Sans', 'Aeonik', 'General Sans', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Times', 'Times New Roman', Tinos, serif;

  /* Typography — Scale */
  --text-caption: 12px;      --leading-caption: 18px;
  --text-label: 14px;        --leading-label: 19.6px;
  --text-body: 16px;         --leading-body: 24px;
  --text-body-tight: 16px;   --leading-body-tight: 20px;
  --text-subhead: 24px;      --leading-subhead: 28.8px;
  --text-title-6: 36px;      --leading-title-6: 43.2px;
  --text-title-5: 48px;      --leading-title-5: 57.6px;
  --text-title-4: 64px;      --leading-title-4: 70.4px;
  --text-title-3: 80px;      --leading-title-3: 80px;
  --text-title-2: 120px;     --leading-title-2: 120px;
  --text-title-1: 180px;     --leading-title-1: 162px;
  --tracking-caption: 0.36px;
  --tracking-label: 0.42px;
  --tracking-body: 0.48px;
  --tracking-subhead: 0.24px;
  --tracking-title-3: 0.8px;
  --tracking-display: normal;

  /* Spacing */
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-120: 120px;
  --spacing-216: 216px;

  /* Border Radius */
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-40: 40px;
  --radius-60: 60px;
  --radius-84: 84px;
  --radius-98: 98px;
  --radius-112: 112px;
  --radius-150: 150px;
  --radius-full: 100%;

  /* Shadow */
  --shadow-lift: rgba(0, 0, 0, 0.05) 0px -4px 16px 0px;
}
```

### Tailwind v4

```css
@theme {
  --color-orange: #F73B20;
  --color-white: #FFFFFF;
  --color-orange-bright: #F84D35;
  --color-orange-900: #360802;
  --color-black: #000000;
  --color-coral: #F96853;
  --color-peach: #FA8270;
  --color-mulberry: #6B3843;
  --color-green: #34C771;
  --color-blue: #477EE9;
  --color-crimson: #FB2D54;
  --color-blue-rail: #689AF7;
  --color-slate: #949FB0;
  --color-orange-25: #FFF6F5;
  --color-border-swap: #F6F7F8;
  --color-avatar-green: #BCFFBB;
  --color-avatar-blue: #BBD2FF;
  --color-avatar-lime: #F5FFBB;
  --color-avatar-pink: #FFBBF0;
  --color-glass: rgba(255, 255, 255, 0.1);
  --color-hairline: rgba(0, 0, 0, 0.1);
  --color-slate-tint: rgba(148, 159, 176, 0.1);
  --color-blue-tint: rgba(104, 154, 247, 0.1);
  --color-orange-wash: rgba(247, 59, 32, 0.05);
  --color-orange-track: rgba(247, 59, 32, 0.1);
  --color-scrim: rgba(0, 0, 0, 0.33);
  --color-scrim-warm: rgba(182, 150, 145, 0.33);

  --font-sans: 'Sequel Sans', 'Aeonik', 'General Sans', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Times', 'Times New Roman', Tinos, serif;

  --text-caption: 12px;
  --text-caption--line-height: 18px;
  --text-caption--letter-spacing: 0.36px;
  --text-label: 14px;
  --text-label--line-height: 19.6px;
  --text-label--letter-spacing: 0.42px;
  --text-body: 16px;
  --text-body--line-height: 24px;
  --text-body--letter-spacing: 0.48px;
  --text-body-tight: 16px;
  --text-body-tight--line-height: 20px;
  --text-subhead: 24px;
  --text-subhead--line-height: 28.8px;
  --text-subhead--letter-spacing: 0.24px;
  --text-title-6: 36px;
  --text-title-6--line-height: 43.2px;
  --text-title-5: 48px;
  --text-title-5--line-height: 57.6px;
  --text-title-4: 64px;
  --text-title-4--line-height: 70.4px;
  --text-title-3: 80px;
  --text-title-3--line-height: 80px;
  --text-title-3--letter-spacing: 0.8px;
  --text-title-2: 120px;
  --text-title-2--line-height: 120px;
  --text-title-1: 180px;
  --text-title-1--line-height: 162px;

  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-60: 60px;
  --spacing-120: 120px;
  --spacing-216: 216px;

  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-40: 40px;
  --radius-60: 60px;
  --radius-84: 84px;
  --radius-98: 98px;
  --radius-112: 112px;
  --radius-150: 150px;
  --radius-full: 100%;

  --shadow-lift: rgba(0, 0, 0, 0.05) 0px -4px 16px 0px;
}
```