---
version: alpha
name: Base44
description: "Dotted off-white paper, hairline rules in black, one orange line that means go."
colors:
  on-surface-variant: "#6D6A67"
  on-surface: "#1E1E24"
  surface: "#EEECEB"
  primary: "#3B51E5"
  paper: "#F9F8F6"
  card-warm: "#F9F7F4"
  card-white: "#FFFFFF"
  sand: "#E2DED7"
  ink-deep: "#0F0F0F"
  body-ink: "#232529"
  cta-black: "#312F2F"
  orange: "#FF6A00"
  cta-amber: "#FF773C"
  blue-accent: "#3950E6"
  chip-amber: "rgba(253, 103, 21, 0.5)"
  reversed-50: "rgba(255, 255, 255, 0.5)"
typography:
  display-xl:
    fontFamily: Dazzed
    fontSize: 124px
    fontWeight: 400
    lineHeight: 131.242px
    letterSpacing: -4.96px
  display-l:
    fontFamily: Dazzed
    fontSize: 120px
    fontWeight: 400
    lineHeight: 127.2px
    letterSpacing: -3.96px
  heading-xl:
    fontFamily: WixMadeforText
    fontSize: 76px
    fontWeight: 400
    lineHeight: 79.8px
    letterSpacing: -3.04px
  heading-l:
    fontFamily: WixMadeforText
    fontSize: 60px
    fontWeight: 400
    lineHeight: 64.02px
    letterSpacing: -1.2px
  heading-m:
    fontFamily: WixMadeforText
    fontSize: 32px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: -0.32px
  question:
    fontFamily: WixMadeforText
    fontSize: 32px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: -0.96px
  lead:
    fontFamily: WixMadeforText
    fontSize: 24px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: -0.24px
  body-l:
    fontFamily: WixMadeforText
    fontSize: 18px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: 0em
  link:
    fontFamily: WixMadeforText
    fontSize: 18px
    fontWeight: 400
    lineHeight: 32px
    letterSpacing: 0em
  body:
    fontFamily: WixMadeforText
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  caption:
    fontFamily: WixMadeforText
    fontSize: 14px
    fontWeight: 400
    lineHeight: 17.92px
    letterSpacing: 0em
  micro:
    fontFamily: WixMadeforText
    fontSize: 13px
    fontWeight: 400
    lineHeight: 16.25px
    letterSpacing: 0em
  nano:
    fontFamily: WixMadeforText
    fontSize: 10.043px
    fontWeight: 400
    lineHeight: 15.0335px
    letterSpacing: 0em
rounded:
  card-panel-section: 0px
  chip-superagents-link: 2px
  activity-pill: 3px
  enterprise-badge: 4px
  prompt-box-nav-cta: 8px
  primary-button: 10px
  pricing-cta: 11px
  billing-toggle-shell: 12px
  icon-well: 9999px
spacing:
  2xs: 6px
  xs: 9px
  sm: 12px
  md: 14px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 35px
  4xl: 50px
  5xl: 80px
  6xl: 120px
  7xl: 159.994px
---
# Base44 — Style Reference

> Dotted off-white paper, hairline rules in black, one orange line that means go.

**Theme:** light

Base44 works on a warm off-white ground — `#EEECEB` under the shell, `#F9F8F6` under the body — and lets almost everything be black type standing on it. The home, security, pricing and enterprise pages run on that one canvas with one type pairing and one border language; pricing is not a second system but the same one in a denser dialect, swapping the warm card for white and dropping to 13px rows. The signature move is the rule: a 2px `#1E1E24` hairline separating list rows, section heads and accordion questions across flat, shadowless surfaces. Display type is Dazzed at 124px, weight 600, tracked to −4.96px with a line-height set below the size, so headline lines lock into a single black block. Colour is spent rather than spread — `#FF6A00` as a thick base rule under cards, `#FF773C` kept for the warm buttons, `#3950E6` as a full-bleed panel carrying the send-off — and each of them tends to land as a plane or a rule rather than a decoration.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#EEECEB` | `--color-canvas` | The shell ground (`.branded-shell.w-full`) and, inverted, the ink of the send-off headline. |
| Paper | `#F9F8F6` | `--color-paper` | The `body` fill, a half-step brighter than the shell. |
| Card Warm | `#F9F7F4` | `--color-surface-card` | The default card plane: `.br-spc-card`, `.br-seccard`, `.br-sec-ws-card`, `.br-ent-feature-card`. |
| Card White | `#FFFFFF` | `--color-surface-white` | The pricing card fill (`.pricing-card`) and the prompt box's; on warm pages mostly a reversed ink, not a plane. |
| Sand | `#E2DED7` | `--color-sand` | The sunken plane for stats and social proof (`.flex.w-full.flex-col.justify-between`, `.br-ent-social-card`) — a recess, not a card. |
| Ink | `#1E1E24` | `--color-ink` | The workhorse: display type, body type, the 2px hairline, the chip fills. |
| Ink Deep | `#0F0F0F` | `--color-ink-deep` | A blacker ink the census records as text only (`.br-spc-name`, `.br-spc-region`). Type, not planes. |
| Body Ink | `#232529` | `--color-text-body` | Reading copy on the security and pricing pages (`.br-sec-hero-subcopy`, `.br-seccard-desc`) and the pricing CTA's fill. |
| Muted Label | `#6D6A67` | `--color-text-muted` | The unselected hero tab (`"[Apps]"`) and the square tab separators. A dimmed state, not a body colour. |
| CTA Black | `#312F2F` | `--color-cta-black` | The button fill — warmer and lighter than the ink. |
| Orange | `#FF6A00` | `--color-orange` | Structure, not action: the 9–10px base rule on feature cards and one article fill. |
| CTA Amber | `#FF773C` | `--color-cta-amber` | The warm button fill (`.sa-prompt-box-submit-btn`, `.br-ent-hero-cta`) and the billing toggle's active pill. Carries dark text. |
| Blue Accent | `#3950E6` | `--color-blue-accent` | The Superagents nav mark and its square, plus the send-off panel. Wayfinding blue that scales to a plane. |
| Badge Blue | `#3B51E5` | `--color-blue-badge` | A hair cooler than the accent, kept for the Enterprise badge and the enterprise band. |
| Chip Amber | `rgba(253, 103, 21, 0.5)` | `--color-chip-amber` | With its 0.4 and 0.2 siblings, the stepped fill of the 2px chips on the security and enterprise pages — opacity, not new hues, makes the ramp. |
| Reversed 50% | `rgba(255, 255, 255, 0.5)` | `--color-ink-reversed-50` | Micro labels reversed out of a dark tile (`.text-right.text-white/50`, `.flex-1.text-center.text-white/50`). |

## Tokens — Typography

### Dazzed — the display and label face, from 124px headlines down to 16px nav labels, all at weight 600 except the nav's 500 · `--font-display`
- **Substitute:** PP Neue Montreal, Aeonik, Inter Tight
- **Weights:** 400, 500, 600
- **Sizes:** 16px, 32px, 60px, 75.9936px, 76px, 120px, 123.994px, 124px, 124.992px
- **Line height:** 110.354px on the 123.994px send-off headline (0.89 of the size) through 131.242px on the 124.992px hero (1.05); 36px at 32px; 24px at 16px
- **Letter spacing:** −4.99968px at 124.992px, −4.96px at 124px, −3.96px at 120px, −3.04px at 76px, −1.2px at 60px, −0.32px at 32px, normal at 16px — tightening as size grows, stopping at label scale
- **Role:** It sets every headline the census measures, then reappears at 16px/500 on the nav so the header reads as display, not body.

### Geist — the reading and control face, 10px micro labels to 24px leads, weight 400 for copy and 500–600 for controls · `--font-body`
- **Substitute:** Inter, Söhne, Helvetica Now
- **Weights:** 400, 500, 600
- **Sizes:** 10.043px, 13px, 14px, 16px, 18px, 24px
- **Line height:** 10.043px at 10.043px (1.0) up to 32px at 18px (1.78); 30px at 24px; 24px at 16px; 16.25px at 13px
- **Letter spacing:** normal almost everywhere; −0.24px at 24px, −0.36px on the 18px/500 button label
- **Role:** It carries body copy, footer link lists, feature rows and button labels, leaving Dazzed free to be loud.

### WixMadeforText — the shell's declared base family · `--font-family-base44`
- **Substitute:** system-ui, Inter, Helvetica Neue
- **Weights:** 400
- **Sizes:** not measured — the inventory names the family and the census records weight 400, but no text row measures a size for it
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** Declared on `:root` as `--font-family-base44` and inherited by the shell; the visible marketing type resolves to Dazzed and Geist ahead of it.

### ui-sans-serif — the generic tail of the stack · `--font-system`
- **Substitute:** system-ui, -apple-system, Segoe UI
- **Weights:** 400
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** The generic fallback the base stack ends on; keep it last.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display XL | 124px | 110.354–131.242px | −4.96px | `--text-display-xl` |
| Display L | 120px | 127.2px | −3.96px | `--text-display-lg` |
| Heading XL | 76px | 79.8px | −3.04px | `--text-heading-xl` |
| Heading L | 60px | 64.02px | −1.2px | `--text-heading-lg` |
| Heading M | 32px | 36px | −0.32px | `--text-heading-md` |
| Question | 32px | 40px | normal · −0.96px | `--text-question` |
| Lead | 24px | 30px | −0.24px | `--text-lead` |
| Body L | 18px | 26px | normal | `--text-body-lg` |
| Link | 18px | 32px | normal | `--text-link` |
| Body | 16px | 24px | normal | `--text-body` |
| Caption | 14px | 17.92px | normal | `--text-caption` |
| Micro | 13px | 16.25px | normal | `--text-micro` |
| Nano | 10.043px | 15.0335px | normal | `--text-nano` |

## Tokens — Spacing & Shapes

**Base unit:** 2px — the hairline's own weight, and the chip radius   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 2xs | 6px | `--spacing-2xs` |
| xs | 9px | `--spacing-xs` |
| sm | 12px | `--spacing-sm` |
| md | 14px | `--spacing-md` |
| lg | 16px | `--spacing-lg` |
| xl | 20px | `--spacing-xl` |
| 2xl | 24px | `--spacing-2xl` |
| 3xl | 35px | `--spacing-3xl` |
| 4xl | 50px | `--spacing-4xl` |
| 5xl | 80px | `--spacing-5xl` |
| 6xl | 120px | `--spacing-6xl` |
| 7xl | 159.994px | `--spacing-7xl` |

The ladder is not a strict multiplier: 9px and 35px sit outside the even steps, and vertical rhythm lands on fractional values (39.9936px, 149.952px).

### Border Radius
| Element | Value |
|---------|-------|
| Card, panel, section | 0px |
| Chip (`.rounded-[2px]`), Superagents link | 2px |
| Activity pill | 3px |
| Enterprise badge | 4px |
| Prompt box, nav CTA | 8px |
| Primary button | 10px |
| Pricing CTA | 11px |
| Billing toggle shell | 12px |
| Icon well | 9999px |

### Shadows
The walk records `box-shadow` on every element it touches and returns `shadow none` on all of them — `.br-spc-card`, `.pricing-card`, `.br-seccard`, `.br-build-cta`, `.pc-cta.group.relative.font-geist`, `.br-sec-gov-tag` included. There is no shadow token.

### Layout
- **Page max-width:** 1920px (`.mx-auto.flex.w-full.max-w-[1920px]`); reading blocks narrow to 1200px on the enterprise hero title, 800px on `.benefits-card.mx-auto.w-full.max-w-[800px]`, 469px on the footer tagline
- **Section gap:** 120px is the common band; 159.994px on `.mx-auto.flex.w-full.max-w-[1920px]`, 90px on the footer, 67px inside `.br-sendoff-inner.relative.z-10.mx-auto`
- **Card padding:** 50px 40px (`.br-spc-card`), 39.9936px square (`.flex.w-full.flex-col.justify-between`), 33.984px 30px (`.br-seccard`), 30px 20px (`.pricing-card`)
- **Element gap:** 24px is the default; 20px, 16px, 14px, 12px, 10px and 6px handle tighter clusters, 35px opens up `.br-sec-practice-text`

## Components

### Global Nav Bar
**Role:** The persistent top rail carrying product navigation and the always-visible way into the builder.
The bar takes no fill and no bottom hairline — it floats on the canvas. Labels are `.br-nav-label`: Dazzed 16px, weight 500, 24px line-height, normal tracking, ink `#1E1E24`. The Superagents item is `.br-nav-sa.inline-flex.items-center.gap-[10px]` — no fill, no border, 16px at weight 600 on a 24px line, padded `0px 8px`, radius 2px, with a 10px gap to a 4px square mark; square and label both take `#3950E6`, the one coloured word in a black header. The trailing CTA is `.group.relative.h-[32px].items-center`: fill `#312F2F`, text `#FFFFFF`, 16px weight 600, padding `0px 15px`, radius 8px, no border, no shadow. Header height is declared `--br-header-h: 54px` *(declared, not painted)*.

### Display Headline
**Role:** The first thing on every page — a single black block of type that does the work a hero image usually does.
Built from `.br-display.br-hero-title.m-0.text-center`: Dazzed 124.992px, weight 600, line-height 131.242px, tracking −4.99968px, ink `#1E1E24`, centred. The size holds across the system while the leading is tuned per page — `.br-display.br-sec-hero-headline` runs 124px on 119.04px at −4.96px, `.br-ent-hero-title.br-display.m-0.max-w-[1200px]` runs 124px on 124px, and `.pricing-hero-title.font-dazzed.font-semibold.tracking-[-0.033em]` drops to 120px on 127.2px at −3.96px. Tracking sits near −0.04em at all of those sizes. Hierarchy comes from scale, not weight: the step below is `.br-stack-title.br-display.m-0.text-[#1e1e24]` at 76px on 79.8px, −3.04px, still weight 600.

### Prompt Composer
**Role:** The product's front door, dropped into the marketing page — type a sentence, get an app.
A white box at radius 8px (`.sa-prompt-box.rounded-[8px].bg-white`) on the canvas, no border, no shadow; its own padding is `not measured`. The resting line is `.sa-prompt-box-placeholder.pointer-events-none.absolute.inset-0` in `#8E8E8E` — "An admin dashboard to manage my customers..." — and typed text lands in `#000000` on `.sa-prompt-box-textarea.relative.z-10.w-full`, the blackest ink in the system. The action bar puts `.sa-prompt-box-plus-btn.flex.size-7.items-center` at radius 8px on the left and a 12px-gapped `.sa-prompt-box-mic-send-group.flex.items-center.gap-[12px]` on the right, 20px between the right cluster's members (`.sa-prompt-box-action-bar-right.flex.items-center`). Send is `.sa-prompt-box-submit-btn.flex.shrink-0.items-center`: fill `#FF773C`, text `#0F0F0F`, 16px weight 400, padding `0px 0px`, radius 8px — the warmest pixel above the fold.

### Ink Button
**Role:** The default call to action wherever the page wants forward motion without spending colour.
`.br-build-cta.group/cta.inline-flex.w-fit`: fill `#312F2F`, text `#FFFFFF`, 18px weight 500, padding `0px 28px`, radius 10px, no border, no shadow. Vertical padding is 0 — height comes from the line box. The security page's `.br-cta-fluid.group/cta` measures two ways: as a `button` at 18px/500 with padding `0px 26px`, radius 10px, and as a `button` at 24px/500 with padding `0px 27.9936px`, radius 10px. Use the 18px variant in cards, the 24px one at section scale. Labels sit in Geist weight 500 — `.flex.h-[1.05em].items-center.justify-center` at 18px on an 18px line, −0.36px tracking, `#FFFFFF`.

### Amber Button
**Role:** The sales-side action — the one button allowed to be warm.
`.br-ent-hero-cta.group.mt-[28px].inline-flex`: fill `#FF773C`, text `#1E1E24`, 24px weight 500, padding `19.968px 28px`, radius 10px, no border, no shadow. Its sibling `.br-ent-sec-cta.group.inline-flex.shrink-0` carries identical values as an `a`. Two things separate it from the ink button: real vertical padding instead of the line box, and inverted text — dark ink on amber where the ink button puts white on `#312F2F`. The label is as black as the body copy around it, which is why the amber stays calm.

### Hero Tab Switcher
**Role:** A row of build-modes under the composer that swaps the prompt's context.
Laid out by `.br-hero-tabs.mt-[68px].flex.items-center` at a 14px gap. Both states share `.br-display.cursor-pointer.whitespace-nowrap.transition-colors` — size and weight `not measured` — and separate on ink alone: the active item is `#252525`, reading `"[Websites]"`; the resting items are `#6D6A67`, reading `"[Apps]"`. The square brackets are literal characters — a typographic selection cue where a pill would normally go. Between tabs sits `.inline-block.size-[6px].bg-[#6d6a67].min-[768px]:size-[0.78vw]` — a 6px square, not a dot, in the same muted ink. The moving underline is `.absolute.top-0.bg-[#252525].motion-reduce:transition-none`: fill `#252525`, radius 0, no border, no shadow.

### Orange-Ruled Feature Card
**Role:** The three-up product card — a warm panel with a heavy orange rule welded to its edge.
On the home page it is `.relative.flex.flex-col.justify-between`: fill `#F9F7F4`, padding `30px 30px`, radius 0px, border `10px #FF6A00`, no shadow. On the enterprise page the same idea is `.br-ent-feature-card.group.flex.min-h-[clamp(380px,27.6vw,530px)]`: fill `#F9F7F4`, padding `30px 30px`, radius 0px, border `9px #FF6A00`, no shadow, with a clamped minimum height so the row stays even as copy varies. The orange is thick enough to register as a plane rather than a stroke, which is how a square, unshadowed card still holds the eye. Each carries a heading, a paragraph and an ink button (`.br-build-cta.group/cta.inline-flex.w-fit`) pinned to the bottom.

### Compliance Card
**Role:** A certification panel — mark, claim, one line of proof, one action.
`.br-seccard`: fill `#F9F7F4`, padding `33.984px 30px`, radius 0px, border none, no shadow. The title is `.br-seccard-title` — Dazzed 32px, weight 600, 36px line-height, −0.32px tracking, `#1E1E24` — and the body drops to the softer `#232529` on `.br-seccard-desc` ("Independent audit of the design and operating ef"). The action is `.br-cta-fluid.group/cta` at 18px/500, padding `0px 26px`, radius 10px, fill `#312F2F`. The padding is asymmetric — more above and below than at the sides. Sibling `.br-sec-ws-card` reuses the fill at `33.984px 30px` as a list item.

### Hairline Row
**Role:** The system's primary divider — the structure that replaces boxes, shadows and zebra stripes.
`.br-sec-practice`: no fill, padding `39.9936px 0px`, radius 0px, border `2px #1E1E24`, no shadow — a full-width row separated from its neighbour by the rule alone. Its copy is `.br-sec-practice-body` in Geist 18px/400 on a 25.992px line, `#1E1E24`, with 35px between the elements of `.br-sec-practice-text`. The pricing variant is `.benefits-row.flex.items-center.border-[#1e1e24]`: no fill, padding `24px 0px`, border `2px #1E1E24`, labelled by `.benefits-row-text.font-dazzed.font-semibold.text-[#1e1e24]` at Dazzed 32px/600 on 36.16px. The bare rule is `.border-t-2.border-[#1e1e24]` — no fill, no padding, border `2px #1E1E24` — and it recurs on every captured page. FAQ questions ride the same structure at `.br-faq-q.br-display.flex-1.text-[#1e1e24]`, Dazzed 32px/600 on 40px, normal tracking on the home and pricing pages, −0.96px on the security and enterprise pages.

### Pricing Card
**Role:** One plan per column — price, credits, action, then the feature list.
`.pricing-card.relative.flex.flex-col`: fill `#FFFFFF`, padding `30px 20px`, radius 0px, border none, no shadow. Elsewhere the card is `#F9F7F4`; the white fill marks the dense dialect. Its internal divider is a filled 2px `#1E1E24` bar rather than a border, so it can sit mid-card without an owning box. The blurb is `.pc-desc.font-geist.text-[14px].text-[#1e1e24]` at Geist 14px/400 on 17.92px; feature rows run `.font-geist.text-[13px].max-[767px]:text-[14px].font-medium` at 13px/500 on 16.25px in `#1E1E24`, their `/mo` qualifier dropped to `#949494` via `.pc-permo.font-dazzed.font-medium.leading-none`, rows spaced 9.984px by `.flex.items-center`. The CTA is `.pc-cta.group.relative.font-geist`: fill `#232529`, 24px weight 500 on a 36px line, padding `0px 0px`, radius 11px, no border, no shadow.

### Enterprise Badge
**Role:** A tier marker pinned beside a feature name — this one is gated.
`.br-sec-gov-tag`: fill `#3B51E5`, ink `#FFFFFF`, Geist 14px weight 500 on a 14px line, normal tracking, padding `7px 10px`, radius 4px, no border, no shadow, label "Enterprise". Line-height equal to font size makes it a tight capsule rather than a pill; the 4px radius is the badge family's own step in the radius census, shared with `.br-sec-dr-badge`, `.br-sec-ea-badge` and `.br-sec-ws-badge`. Blue rather than orange is the point — the badge marks availability, not action.

### Blue Send-off Band
**Role:** The closing full-bleed panel — the page's last word before the footer.
`.relative.overflow-hidden.bg-[#3950e6].mr-[20px]`: fill `#3950E6`, padding `120px 90px`, radius 0px, border none, no shadow, inset 20px from the right so the canvas shows as a margin down one side. The headline is `.br-sendoff-headline.br-display.m-0.whitespace-pre-line` — Dazzed 123.994px, weight 600, line-height 110.354px, tracking −4.95974px — in `#EEECEB`, the canvas colour used as ink. The type is not white on blue; it is the page punched through the panel. Its inner block is `.br-sendoff-inner.relative.z-10.mx-auto` at 67px vertical padding, recurring on every captured page; the home page's `.br-design-title.br-display.m-0.text-[#eeeceb]` repeats the trick at 123.994px on a 114.074px line.

## Do's and Don'ts

### Do
- Do let scale carry hierarchy. `.br-hero-title` at 124.992px and `.br-stack-title.br-display.m-0.text-[#1e1e24]` at 76px are both weight 600; step the size, hold the weight.
- Do tighten tracking with size — −4.96px at 124px, −3.04px at 76px, −1.2px at 60px, −0.32px at 32px, normal at 16px — then stop once the type is a label.
- Do separate rows with the 2px `#1E1E24` hairline (`.border-t-2.border-[#1e1e24]`, `.br-sec-practice`) before reaching for a box.
- Do put Dazzed on small labels: `.br-nav-label` at 16px weight 500 on a 24px line is what ties the header to the display system.
- Do pad cards asymmetrically — `.br-spc-card` at `50px 40px`, `.br-seccard` at `33.984px 30px` — so content breathes vertically first.
- Do use the canvas as ink on coloured planes: `#EEECEB` type on the `#3950E6` panel (`.br-sendoff-headline.br-display.m-0.whitespace-pre-line`).
- Do give ink buttons zero vertical padding (`.br-build-cta.group/cta.inline-flex.w-fit`, padding `0px 28px`) and let the line box set the height.

### Don't
- Don't add a drop shadow. The walk measured `box-shadow` on `.br-spc-card`, `.pricing-card`, `.br-seccard`, `.br-build-cta`, `.pc-cta.group.relative.font-geist` and `.br-sec-gov-tag`, and returned `shadow none` on all of them.
- Don't round the cards. `.br-spc-card`, `.pricing-card`, `.br-seccard`, `.br-ent-feature-card.group.flex.min-h-[clamp(380px,27.6vw,530px)]` and `.br-ent-social-card.flex.flex-col.justify-between` all measure radius 0px; the 12px on `.font-geist.relative.inline-flex.items-center` is the toggle's exception and should stay one.
- Don't thin the hairline. `.br-sec-practice`, `.benefits-row.flex.items-center.border-[#1e1e24]`, `.br-sec-gov-divider` and `.border-t-2.border-[#1e1e24]` all measure 2px `#1E1E24`; a 1px line reads as a mistake.
- Don't make `#FF6A00` a button. The controls census gives every warm control `#FF773C` (`.sa-prompt-box-submit-btn.flex.shrink-0.items-center`, `.br-ent-hero-cta.group.mt-[28px].inline-flex`); `#FF6A00` is a 9–10px card border and an article fill (`.flex.flex-col.gap-[30px].bg-[#ff6a00]`).
- Don't set display type at any weight but 600. `.br-hero-title`, `.br-sec-hero-headline`, `.br-ent-hero-title.br-display.m-0.max-w-[1200px]`, `.br-stack-title.br-display.m-0.text-[#1e1e24]` and `.br-sendoff-headline.br-display.m-0.whitespace-pre-line` are all 600.
- Don't loosen display leading past the size: `.br-sendoff-headline.br-display.m-0.whitespace-pre-line` sets 110.354px on 123.994px, and air dissolves the block.
- Don't tint the canvas per section. Section colour is a plane laid on it — `#F9F7F4`, `#E2DED7`, `#3950E6` — not a shift in the ground.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#EEECEB` | The shell ground on every captured page (`.branded-shell.w-full`). |
| 0.5 | Paper | `#F9F8F6` | The `body` fill, a half-step brighter. |
| 1 | Card Warm | `#F9F7F4` | The default card plane (`.br-spc-card`, `.br-seccard`, `.br-sec-ws-card`). |
| 1 | Card White | `#FFFFFF` | The pricing card plane (`.pricing-card`) and the prompt box. |
| −1 | Sand | `#E2DED7` | Recessed plane for stats and social proof (`.flex.w-full.flex-col.justify-between`). |
| 2 | Blue Panel | `#3950E6` | The full-bleed send-off (`.relative.overflow-hidden.bg-[#3950e6].mr-[20px]`), padded `120px 90px`. |
| 2 | Blue Band | `#3B51E5` | The enterprise strip (`.pricing-enterprise.w-full.bg-[#3b51e5]`), padded `68px 90px`. |
| 2 | Orange Plane | `#FF6A00` | One stacked article fill (`.flex.flex-col.gap-[30px].bg-[#ff6a00]`), padded `39.9936px` square. |

## Elevation

There is no shadow token. Depth is built three ways. Luminance first: the canvas at `#EEECEB` and the card at `#F9F7F4` sit a couple of points apart — the faintest step available. Then the rule: a 2px `#1E1E24` hairline does the separating a shadow would do elsewhere, and a 9–10px `#FF6A00` border does it loudly when a card needs to lead. Then the plane: a section becomes important by being another colour entirely — `#3950E6`, `#3B51E5`, `#E2DED7` — laid flat with square corners. Everything is either on the page or is the page.

## Imagery

Photography is texture, not illustration. Wide grainy halftone landscapes — warm greens sliding into rust — sit behind card rows, blurred to a colour field with the grain left in, so flat surfaces above them gain contrast without gaining shadow. Product screenshots appear as hard-edged collage tiles at varying scales, overlapping the canvas edge and sometimes cropped by the viewport: artefacts the platform produced, shown without a device mockup. The canvas carries a fine dot grid, faint enough to read as paper tooth. Portraits are unretouched and editorial, cropped tight, credited in plain type. Icons are line-drawn on a 9999px well (`.absolute.inset-0.overflow-hidden.rounded-full`) — outlined arrows and check marks in `#1E1E24`, no fills.

## Layout

Full-bleed by default. The shell runs to a 1920px maximum (`.mx-auto.flex.w-full.max-w-[1920px]`) and coloured planes reach the viewport edge, sometimes with a deliberate 20px inset on one side (`.relative.overflow-hidden.bg-[#3950e6].mr-[20px]`). Reading measure is set per block, not globally: 1200px on the enterprise hero title, 800px on `.benefits-card.mx-auto.w-full.max-w-[800px]`, 469px on `.footer-tagline.mt-[32px].w-full.max-w-[469px]`. Section rhythm is broad — 159.994px on the shell wrapper, 120px on the common band, 180px on the home hero (`.relative.z-10.pt-[104px].pb-[80px]`), 170px on `.br-sec-hero-inner`, 149.952px vertical against 129.984px horizontal on `.br-ent-section.br-ent-security.relative.w-full`. Inside a section the pattern is two-column: a left-aligned display headline in one, a stack of hairline-separated rows in the other, at a 24px gap. The footer (`.footer-pt.pt-[60px].pb-[60px].min-[768px]:pt-[80px]`, 90px vertical) sets a tagline plus four link columns headed by `.footer-column-title.m-0.text-[18px].font-semibold` at Geist 18px/600 on 22px, links in `.br-footer-underline` at Geist 18px/400 on a 32px line — near-double leading.

## Typography Voice

Two modes, kept apart. Dazzed is loud: weight 600, sizes clustered at 124px and 32px with only the 76px and 60px steps between, tracking near −0.04em, and — the signature — a line-height under the type size (110.354px on 123.994px). Below 1.0, consecutive lines interlock and a three-line headline stops being lines and becomes a shape. Geist is quiet: weight 400 for prose, normal tracking, leading that runs the other way — 32px on 18px in the footer, 30px on 24px in leads, 26px on 18px in feature lists. The modes meet at the nav, on purpose: `.br-nav-label` puts Dazzed at 16px/500 on a 24px line, so the header belongs to the display voice while behaving like an interface.

## Agent Prompt Guide

## Quick Color Reference
- background: `#EEECEB`
- text: `#1E1E24`
- surface: `#F9F7F4`
- border: `#1E1E24`
- accent: `#3950E6`
- primary action: `#312F2F`

## Example Component Prompts
1. **Ink Button**: Background `#312F2F`, label `#FFFFFF` in Geist 18px weight 500, −0.36px letter-spacing, padding `0px 28px` (zero vertical — height from the line box), border-radius 10px, no border, no shadow.
2. **Orange-Ruled Feature Card**: Fill `#F9F7F4`, padding `30px 30px`, border-radius 0, a 10px solid `#FF6A00` border, no shadow. Column with space-between: Dazzed 32px/600 title on 36px, −0.32px, `#1E1E24`; Geist 16px/400 body on 24px; ink button pinned to the bottom.
3. **Hairline Row List**: Full-width rows, each with a 2px solid `#1E1E24` top border, no fill, padding `39.9936px 0px`, radius 0. Label in Dazzed 32px/600 on 40px, `#1E1E24`; copy in Geist 18px/400 on 25.992px; a 9999px outlined arrow well at the right edge.
4. **Pricing Card**: Fill `#FFFFFF`, padding `30px 20px`, radius 0, no border, no shadow. Divide with a filled 2px `#1E1E24` bar. Description in Geist 14px/400 on 17.92px; feature rows Geist 13px/500 on 16.25px, `#1E1E24`, spaced 9.984px; `/mo` in `#949494`. CTA fill `#232529`, radius 11px, label Geist 24px/500 on 36px in `#FFFFFF`.
5. **Blue Send-off Band**: Full-bleed panel, fill `#3950E6`, padding `120px 90px`, radius 0, no shadow, inset 20px from the right edge. Headline in Dazzed 123.994px weight 600, line-height 110.354px, letter-spacing −4.95974px, colour `#EEECEB` — the canvas used as ink.

## Similar Brands
- **Gumroad** — flat saturated planes on a light ground, square corners, zero elevation, one hot accent.
- **Mailchimp** — a warm off-white canvas, heavy grotesk display type, photography as texture.
- **Pentagram** — oversized tightly-tracked type on paper, hairline rules instead of containers, colour reserved for whole planes.
- **Dropbox** — display grotesk at extreme scale over flat colour blocks, type reversed to the ground colour, not white.
- **37signals** — plain paper, plain-spoken headlines, no shadow vocabulary, controls that stay small and dark.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #EEECEB;
  --color-paper: #F9F8F6;
  --color-surface-card: #F9F7F4;
  --color-surface-white: #FFFFFF;
  --color-surface-practices: #F1EDE7;
  --color-sand: #E2DED7;
  --color-ink: #1E1E24;
  --color-ink-deep: #0F0F0F;
  --color-text-body: #232529;
  --color-ink-700: #252525;
  --color-text-muted: #6D6A67;
  --color-text-meta: #949494;
  --color-text-placeholder: #8E8E8E;
  --color-cta-black: #312F2F;
  --color-orange: #FF6A00;
  --color-cta-amber: #FF773C;
  --color-blue-accent: #3950E6;
  --color-blue-badge: #3B51E5;
  --color-chip-amber: rgba(253, 103, 21, 0.5);
  --color-chip-amber-40: rgba(253, 103, 21, 0.4);
  --color-chip-amber-20: rgba(253, 103, 21, 0.2);
  --color-ink-reversed-50: rgba(255, 255, 255, 0.5);

  /* Typography — Families */
  --font-display: 'Dazzed', 'PP Neue Montreal', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-family-base44: 'WixMadeforText', system-ui, sans-serif;
  --font-system: ui-sans-serif, system-ui, sans-serif;

  /* Typography — Scale */
  --text-display-xl: 124px;   --leading-display-xl: 110.354px;
  --text-display-lg: 120px;   --leading-display-lg: 127.2px;
  --text-heading-xl: 76px;    --leading-heading-xl: 79.8px;
  --text-heading-lg: 60px;    --leading-heading-lg: 64.02px;
  --text-heading-md: 32px;    --leading-heading-md: 36px;
  --text-question: 32px;      --leading-question: 40px;
  --text-lead: 24px;          --leading-lead: 30px;
  --text-body-lg: 18px;       --leading-body-lg: 26px;
  --text-link: 18px;          --leading-link: 32px;
  --text-body: 16px;          --leading-body: 24px;
  --text-caption: 14px;       --leading-caption: 17.92px;
  --text-micro: 13px;         --leading-micro: 16.25px;
  --text-nano: 10.043px;      --leading-nano: 15.0335px;
  --tracking-display-xl: -4.96px;
  --tracking-display-lg: -3.96px;
  --tracking-heading-xl: -3.04px;
  --tracking-heading-lg: -1.2px;
  --tracking-heading-md: -0.32px;
  --tracking-lead: -0.24px;

  /* Spacing */
  --spacing-2xs: 6px;
  --spacing-xs: 9px;
  --spacing-sm: 12px;
  --spacing-md: 14px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 35px;
  --spacing-4xl: 50px;
  --spacing-5xl: 80px;
  --spacing-6xl: 120px;
  --spacing-7xl: 159.994px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-chip: 2px;
  --radius-pill-sm: 3px;
  --radius-badge: 4px;
  --radius-input: 8px;
  --radius-button: 10px;
  --radius-cta: 11px;
  --radius-toggle: 12px;
  --radius-full: 9999px;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #EEECEB;
  --color-paper: #F9F8F6;
  --color-surface-card: #F9F7F4;
  --color-surface-white: #FFFFFF;
  --color-surface-practices: #F1EDE7;
  --color-sand: #E2DED7;
  --color-ink: #1E1E24;
  --color-ink-deep: #0F0F0F;
  --color-text-body: #232529;
  --color-ink-700: #252525;
  --color-text-muted: #6D6A67;
  --color-text-meta: #949494;
  --color-text-placeholder: #8E8E8E;
  --color-cta-black: #312F2F;
  --color-orange: #FF6A00;
  --color-cta-amber: #FF773C;
  --color-blue-accent: #3950E6;
  --color-blue-badge: #3B51E5;
  --color-chip-amber: rgba(253, 103, 21, 0.5);
  --color-chip-amber-40: rgba(253, 103, 21, 0.4);
  --color-chip-amber-20: rgba(253, 103, 21, 0.2);
  --color-ink-reversed-50: rgba(255, 255, 255, 0.5);

  --font-display: 'Dazzed', 'PP Neue Montreal', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-base44: 'WixMadeforText', system-ui, sans-serif;
  --font-system: ui-sans-serif, system-ui, sans-serif;

  --text-display-xl: 124px;
  --text-display-xl--line-height: 110.354px;
  --text-display-xl--letter-spacing: -4.96px;
  --text-display-lg: 120px;
  --text-display-lg--line-height: 127.2px;
  --text-display-lg--letter-spacing: -3.96px;
  --text-heading-xl: 76px;
  --text-heading-xl--line-height: 79.8px;
  --text-heading-xl--letter-spacing: -3.04px;
  --text-heading-lg: 60px;
  --text-heading-lg--line-height: 64.02px;
  --text-heading-lg--letter-spacing: -1.2px;
  --text-heading-md: 32px;
  --text-heading-md--line-height: 36px;
  --text-heading-md--letter-spacing: -0.32px;
  --text-question: 32px;
  --text-question--line-height: 40px;
  --text-lead: 24px;
  --text-lead--line-height: 30px;
  --text-lead--letter-spacing: -0.24px;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 26px;
  --text-link: 18px;
  --text-link--line-height: 32px;
  --text-body: 16px;
  --text-body--line-height: 24px;
  --text-caption: 14px;
  --text-caption--line-height: 17.92px;
  --text-micro: 13px;
  --text-micro--line-height: 16.25px;
  --text-nano: 10.043px;
  --text-nano--line-height: 15.0335px;

  --spacing-2xs: 6px;
  --spacing-xs: 9px;
  --spacing-sm: 12px;
  --spacing-md: 14px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 35px;
  --spacing-4xl: 50px;
  --spacing-5xl: 80px;
  --spacing-6xl: 120px;
  --spacing-7xl: 159.994px;

  --radius-none: 0px;
  --radius-chip: 2px;
  --radius-pill-sm: 3px;
  --radius-badge: 4px;
  --radius-input: 8px;
  --radius-button: 10px;
  --radius-cta: 11px;
  --radius-toggle: 12px;
  --radius-full: 9999px;
}
```