---
version: alpha
name: Replit
description: "Warm cream, one hot orange, and type pulled tight enough to hum"
colors:
  on-surface: "#181818"
  surface: "#FAF6F1"
  outline: "#EDEDED"
  primary: "#FF3C00"
  paper: "#FFFFFF"
  warm-grey: "#F6F5F4"
  ink-soft: "#37383C"
  ink-warm: "#312E2E"
  product-navy: "#1B2333"
  body-grey: "#5C5C5C"
  muted-link: "#76716F"
  coral: "#FF764C"
  peach: "#FFB199"
  deep-moss: "#2C3328"
  hairline: "#C5C5C5"
  hairline-soft: "rgba(197, 197, 197, 0.6)"
  chip-border: "#D8D5CF"
  lilac-wash: "rgba(238, 197, 252, 0.9)"
typography:
  display-xl:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 72px
    fontWeight: 400
    lineHeight: 72px
    letterSpacing: -3.36px
  display-l:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 68.92px
    fontWeight: 400
    lineHeight: 68.92px
    letterSpacing: -4.1352px
  display-m:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 64px
    fontWeight: 400
    lineHeight: 64px
    letterSpacing: -3.84px
  display-s:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 60px
    fontWeight: 400
    lineHeight: 60px
    letterSpacing: -3.6px
  heading-xl:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 56px
    fontWeight: 400
    lineHeight: 56px
    letterSpacing: -2.24px
  heading-l:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 48px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: -2.88px
  heading-m:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 36px
    fontWeight: 400
    lineHeight: 34.2px
    letterSpacing: -2.16px
  heading-s:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 26px
    fontWeight: 400
    lineHeight: 31.2px
    letterSpacing: -0.78px
  heading-xs:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 25px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: 0em
  title:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 24px
    fontWeight: 400
    lineHeight: 22.8px
    letterSpacing: -1.44px
  subheading:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 21px
    fontWeight: 400
    lineHeight: 27.3px
    letterSpacing: -0.42px
  body-l:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 18px
    fontWeight: 400
    lineHeight: 28.8px
    letterSpacing: 0em
  body:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 16px
    fontWeight: 400
    lineHeight: 25.6px
    letterSpacing: 0em
  label:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 14px
    fontWeight: 400
    lineHeight: 22.4px
    letterSpacing: 0em
  caption:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 13px
    fontWeight: 400
    lineHeight: 13px
    letterSpacing: 0em
  micro:
    fontFamily: ABC Diatype Plus Variable
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0em
rounded:
  pill-controls: 999px
  quote-card: 60px
  bento-block: 24px
  media-panel: 20px
  card-article-control-tile: 16px
  thumbnail: 12px
  link-button-info-card-raised-overlay: 8px
  agent-chat-input: 7px
  utility-control: 6px
  product-page-button: 4px
spacing:
  2xs: 2px
  xs: 6px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 40px
  4xl: 48px
  5xl: 64px
  6xl: 80px
  7xl: 96px
  8xl: 120px
---
# Replit — Style Reference
> Warm cream, one hot orange, and type pulled tight enough to hum

**Theme:** light

Replit's marketing surface is a sheet of warm cream; the loud voice on it is a hot orange that points rather than decorates. Two systems were captured. Cream roots the home page and bands the slides page, the design page's body settles a half-step greyer; the deployments product page stands on white with a cool blue-black ink and squarer buttons. Type is one grotesk in several cuts, at regular weight nearly everywhere and pulled tight — about minus six-hundredths of an em at display sizes, line-height set to the size. Shape carries the hierarchy that weight refuses to: pills and 6px corners sharing the clickable work, a 60px superellipse for the testimonial slabs, 24px for the bento blocks, 16px for everything ordinary. Depth is a step in luminance or a one-pixel hairline rather than a shadow, so the flat peach and moss blocks read as objects, not panels.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Cream Canvas | `#FAF6F1` | `--color-canvas` | The home page's root fill (`.replit-ui-theme-root.notranslate`) and the warm section band on the slides page. |
| Paper | `#FFFFFF` | `--color-surface` | Card fill — the 60px quote slab, the 24px bento block. Also the ground of the deployments page (`.flow-root`), where it is canvas rather than card. |
| Warm Grey | `#F6F5F4` | `--color-surface-muted` | The body fill on the home and design pages; the resting fill of controls — 16px icon tiles, 6px utility buttons. |
| Cool Band | `#EDEDED` | `--color-band` | Alternating section fill on the slides page (`.px-4.sm:px-6.lg:px-8.py-20`); the 1px border of `.flex.flex-col.gap-3.p-3`. |
| Ink | `#181818` | `--color-ink` | Primary text, and the fill of the selected filter chip. |
| Ink Soft | `#37383C` | `--color-ink-soft` | Nav labels, control text, testimonial names. |
| Ink Warm | `#312E2E` | `--color-ink-heading` | The home page's hero title ("Meet Replit") and section headings; as a fill, the slides page's band and thumbnails. |
| Product Navy | `#1B2333` | `--color-ink-product` | The deployments page's ink — display, body and nav. It does not appear on the cream pages. |
| Body Grey | `#5C5C5C` | `--color-ink-body` | Paragraph ink on the slides page (`.text-lg.text-[#5C5C5C]`). |
| Muted Link | `#76716F` | `--color-ink-muted` | Footer links and the "Made in sunny California" line; also paints a hairline divider. |
| Replit Orange | `#FF3C00` | `--color-accent` | Filled and outlined CTAs, the accordion "+", the brand's name inside a headline. |
| Coral | `#FF764C` | `--color-accent-soft` | The stacked gradient layers of the quote card (`.UserQuotesCard-module__dt8Ena__layer`), bottoming out at `rgba(255, 118, 76, 0.55)`. |
| Peach | `#FFB199` | `--color-peach` | A flat block fill: bento panels and slide thumbnails; as ink, the quotation glyph. |
| Deep Moss | `#2C3328` | `--color-moss` | One 40px-padded, 24px-radius bento block (`.flex.box-border.min-h-0.min-w-0`). |
| Hairline | `#C5C5C5` | `--color-border` | The 1px rule on the slides page: bordered articles, the FAQ divider, the carousel dot fill. |
| Hairline Soft | `rgba(197, 197, 197, 0.6)` | `--color-border-soft` | The same grey at 60% on the 16px control tiles. |
| Chip Border | `#D8D5CF` | `--color-border-chip` | The outline of an unselected filter chip; warmer than the hairline. |
| Lilac Wash | `rgba(238, 197, 252, 0.9)` | `--color-lilac` | Top stop of the "Explore a new vibe" tile, fading to `rgba(249, 236, 254, 0.6)` inside a dashed #CC5AF2 edge. |

## Tokens — Typography

### ABC Diatype Plus Variable — the home page's display and UI face: hero, section headings, testimonial names, footer links · `--font-brand-variable`
- **Substitute:** Neue Haas Grotesk Display, Helvetica Now Display, Inter Tight
- **Weights:** 400, 460, 500, 600, 700
- **Sizes:** 14px, 16px, 20px, 26px, 36px, 48px, 56px, 64px, 68.92px
- **Line height:** 1.0 at display sizes (68.92px/68.92px, 64px/64px, 56px/56px); 1.2–1.4 below (26px/31.2px, 14px/19.6px)
- **Letter spacing:** −0.06em from 36px up (68.92px → −4.1352px; 64px → −3.84px); −0.04em at 56px; −0.03em at 26px; normal at 14px
- **Role:** display and UI on the home page — its heading rows sit at weight 400.

### ABCDiatype — display and body on the slides and deployments pages · `--font-brand`
- **Substitute:** Neue Haas Grotesk Text, Helvetica Now Text, Inter
- **Weights:** 400, 500, 512
- **Sizes:** 12px, 13px, 14px, 16px, 18px, 21px, 24px, 25px, 36px, 72px
- **Line height:** 0.95 on the slides page's headings (36px/34.2px, 24px/22.8px); 1.0 at 72px; 1.6 for body (16px/25.6px, 18px/28.8px)
- **Letter spacing:** −0.06em at 36px and 24px; −0.047em at 72px; −0.02em on the 21px links, −0.035em on the 12px labels; normal on all body rows
- **Role:** the second display voice — sub-1.0 leading on headings, 1.6 on paragraphs.

### Replit Diatype — the design page's hero and the design/product nav · `--font-family-default`
- **Substitute:** ABC Diatype, Neue Haas Grotesk, Söhne
- **Weights:** 400, 450, 460, 500
- **Sizes:** 14px, 60px
- **Line height:** 1.0 at 60px (60px/60px); 1.6 at 14px (22.4px)
- **Letter spacing:** −3.6px at 60px (−0.06em); normal at 14px
- **Role:** the site's declared default family, painted here as the design page's 60px headline and its 14px nav labels.

### ABC Diatype — home-page nav labels, small caption text and filter chips · `--font-family-brand`
- **Substitute:** Neue Haas Grotesk, Helvetica Now, Inter
- **Weights:** 400, 450, 460, 500
- **Sizes:** 12px, 14px
- **Line height:** 1.6 at 14px (22.4px); 1.5 at 12px (18px)
- **Letter spacing:** normal on every row it paints
- **Role:** the small-text cut — nav, chip labels, caption metadata; the filter chips are where its weight 450 shows up.

### Replit Diatype Mono — the declared code face · `--font-family-code`
- **Substitute:** ABC Diatype Mono, JetBrains Mono, IBM Plex Mono
- **Weights:** 400, 500
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** in the font inventory and declared as `--font-family-code`; no census text row carries a size for it, so treat it as reserved for code and tracked eyebrow labels.

### Times — an inherited serif · `--font-serif`
- **Substitute:** Times New Roman, Tinos, Liberation Serif
- **Weights:** 400
- **Sizes:** not measured
- **Line height:** not measured
- **Letter spacing:** not measured
- **Role:** appears in the family inventory with no measured row of its own.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display XL | 72px | 72px | −3.36px | `--text-display-xl` |
| Display L | 68.92px | 68.92px | −4.1352px | `--text-display-l` |
| Display M | 64px | 64px | −3.84px | `--text-display-m` |
| Display S | 60px | 60px | −3.6px | `--text-display-s` |
| Heading XL | 56px | 56px | −2.24px | `--text-heading-xl` |
| Heading L | 48px | 48px | −2.88px | `--text-heading-l` |
| Heading M | 36px | 34.2px | −2.16px | `--text-heading-m` |
| Heading S | 26px | 31.2px | −0.78px | `--text-heading-s` |
| Heading XS | 25px | 30px | normal | `--text-heading-xs` |
| Title | 24px | 22.8px | −1.44px | `--text-title` |
| Subheading | 21px | 27.3px | −0.42px | `--text-subheading` |
| Body L | 18px | 28.8px | normal | `--text-body-lg` |
| Body | 16px | 25.6px | normal | `--text-body` |
| Label | 14px | 22.4px | normal | `--text-label` |
| Caption | 13px | 13px | normal | `--text-caption` |
| Micro | 12px | 18px | normal | `--text-micro` |

## Tokens — Spacing & Shapes

**Base unit:** 8px in practice, on a 4px grid **Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 2xs | 2px | `--space-2` |
| xs | 6px | `--space-6` |
| sm | 8px | `--space-8` |
| md | 12px | `--space-12` |
| lg | 16px | `--space-16` |
| xl | 24px | `--space-24` |
| 2xl | 32px | `--space-32` |
| 3xl | 40px | `--space-40` |
| 4xl | 48px | `--space-48` |
| 5xl | 64px | `--space-64` |
| 6xl | 80px | `--space-80` |
| 7xl | 96px | `--space-96` |
| 8xl | 120px | `--space-120` |

`--space-56`, `--space-128` and `--space-256` are *(declared, not painted)*; a 4px step sits under the gap census's ten-row cap. Off-grid paints: the chip's 17px side padding, the 75px (`.flex.flex-col.800:flex-row.pt-[75px]`) and 84px blocks, the card's 28px, the bubble's 10px.

### Border Radius

| Element | Value |
|---------|-------|
| Pill controls (chips, CTAs, toggles) | 999px / 9999px / 100px |
| Quote card | 60px |
| Bento block | 24px |
| Media panel | 20px |
| Card, article, control tile | 16px |
| Thumbnail | 12px |
| Link button, info card, raised overlay | 8px |
| Agent chat input | 7px |
| Utility control | 6px |
| Product-page button | 4px |

`--border-radius-1`, `--border-radius-2` and `--border-radius-round: 1028px` are *(declared, not painted)*.

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Control | `rgba(0, 0, 0, 0.02) 0px 1px 2px 0px` | `--shadow-control` |
| Raised overlay (`.absolute.rounded-lg.overflow-hidden.shadow-md`) | `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px` | `--shadow-raised` |
| Bordered card (`.flex.flex-col.gap-3.p-3`) | `rgba(0, 0, 0, 0.04) 0px 4px 24px 0px` | `--shadow-soft` |
| Hairline lift | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | `--shadow-hairline` |

### Layout
- **Page max-width:** not measured — the slides page centres content in `.max-w-6xl.mx-auto.grid.gap-8` and clamps paragraphs with `.text-lg.text-[#5C5C5C].max-w-2xl.mx-auto`
- **Section gap:** 96px dominant (`.px-4.sm:px-6.lg:px-8.py-20`, `.px-4.sm:px-6.lg:px-8.py-24`); 48px, 64px, 75px, 80px, 112px, 120px, 168px and 208px also appear
- **Card padding:** 32px on the slides articles; 48px on the 60px-radius quote card; 40px on the bento blocks; 28px 24px on the small white card
- **Element gap:** 8px default, then 16px, 24px, 12px; 32px, 48px, 64px and 80px for column splits

## Components

### Marketing Header
**Role:** the persistent top bar — wordmark, product menus, sign-in and the account CTA.
`.MarketingHeader-module__S9ztCG__content` runs on an 8px gap and inks its items #37383C. Nav labels are ABC Diatype 14px/400 at 22.4px, tracking normal ("Products"); the design page paints the same row in Replit Diatype. The account CTA is `.MarketingHeader-module__S9ztCG__signupButton`, a 999px pill carrying #FF3C00 as both border and ink. On the product pages the matching link is `.py-2.px-4.rounded.duration-500` filled: #FF3C00, #FFFFFF ink, 14px/400, 8px 12px padding, 8px radius, no border, no shadow.

### Primary Action Button
**Role:** the one control that commits you to something — submit the prompt, start for free.
`.LandingSubmitButton-module__X4iHNq__landingSubmitButton` is the prompt's send control: fill #FF3C00, text `rgba(255, 255, 255, 0.9)`, 14px/400, 8px 8px padding, 100px radius, no border, no shadow. The slides page's CTA is `.inline-flex.items-center.gap-2.px-8`: fill #FF3C00, text #FAF6F1, 16px/500 — the heaviest weight the control census paints — 16px 32px padding, 9999px radius. Neither carries a border.

### Pricing Plan Card
**Role:** the four-across plan comparison; one card is the recommendation.
`.PricingShowcase-module__4e3f_q__heading` sets the section at 64px/400/64px/−3.84px in #191818; `.PricingShowcase-module__4e3f_q__planName` and `.PricingShowcase-module__4e3f_q__planDescription` ink at #6F6C6A, `.PricingShowcase-module__4e3f_q__benefitText` at 14px/400/19.6px in #312E2E, `.PricingShowcase-module__4e3f_q__priceOriginal` struck through in #A8A29C, `.PricingShowcase-module__4e3f_q__saveBadge` on #FFE1D6, all on the 16px gap of `.PricingShowcase-module__4e3f_q__cards`. The CTA measures two ways: `.PricingShowcase-module__4e3f_q__cta` outlined — no fill, ink #FF3C00, 15px/400, 12px 24px padding, 999px radius, 1px #FF3C00 border — and the same class filled for "Start for free", #FF3C00 with #FFFFFF ink at identical geometry.

### Filter Chip
**Role:** the template gallery's category switch — Featured, Landing Pages, Mobile, Posters.
`.DesignTemplateGallery-module__6lF1wa__chip` at rest: no fill, ink #55524E, ABC Diatype 14px at weight 450, 0px 17px padding, 999px radius, 1px #D8D5CF border, no shadow. Selected, the same class inverts — `.DesignTemplateGallery-module__6lF1wa__chip.DesignTemplateGallery` paints fill #181818, #FFFFFF text, the same type, padding and 999px radius, a 1px #181818 border. Selection is a value flip: nothing moves, nothing grows.

### Soft Control Tile
**Role:** the icon-and-label picker under the prompt box — Website, Mobile, Design, Slides, Animation.
The most-repeated control in the census: `.flex.box-border.min-h-0.min-w-0` as a button, fill #F6F5F4, text #37383C, 14px/400, zero padding, 16px radius, 1px `rgba(197, 197, 197, 0.6)` border, no shadow. At 60% the grey draws no hard line against #FAF6F1. A matching `div` variant repeats it as a static panel.

### Compact Utility Button
**Role:** the small system control the product UI shares with the marketing pages.
Three measured variants of `.rounded-md.useRuiDiagnostics-module__sFi-rG__interactive.custom-`. Borderless: fill #FAF6F1, text #37383C, 13.3333px/400, 0px 8px padding, 6px radius, no border, no shadow; the design page's fills #F6F5F4. Bordered: fill #EFEEEC, text #212225, same type and padding, 6px radius, 1px #DBD9D3 border, and the faintest measured shadow, `rgba(0, 0, 0, 0.02) 0px 1px 2px 0px`. A pill sibling, `.rounded-full.useRuiDiagnostics-module__sFi-rG__interactive.custo`, fills #EDECE8 with #2C2E31 ink, a 1px #D7D5CE border, a 9999px radius and that same shadow.

### Prompt Composer
**Role:** the agent input, a miniature of the product inside a marketing card.
`.PlatformCards-module__Z0omxa__agentChatInput` is a #FFFFFF box with 8px 10px padding, a 7px radius and a 1px #191818 border — a hard black hairline the marketing pages otherwise avoid. `.PlatformCards-module__Z0omxa__agentBtn` repeats it at 0px 8px padding and a 6px radius; `.PlatformCards-module__Z0omxa__agentPublishBtn` fills #FF3C00 at 0px 12px with the same 7px radius. Chat bubbles use `rgba(255, 255, 255, 0.18)` fill, #FFFFFF text at 12px/400/16.8px/−0.24px, 10px 16px padding, 16px radius.

### Bento Feature Card
**Role:** the home page's grid of product claims, each a flat colour block with an image or diagram inside.
One geometry, four fills: `.flex.box-border.min-h-0.min-w-0` as a div at 40px padding and a 24px radius, painted #F9AA8B, #2C3328, #EDEDED and #FFFFFF, none with a border or shadow. Smaller members drop to 24px padding at a 20px radius in #FFFFFF, #DBD4CF and #FFB199. Headings run ABC Diatype Plus Variable 36px/400/36px/−1.08px in #322F2F over a tracked uppercase eyebrow.

### Quote Card
**Role:** the testimonial slab — one endorsement, large, with a portrait alongside.
`.flex.box-border.min-h-0.min-w-0` as a div: fill #FFFFFF, 48px padding, a 60px radius, no border, no shadow. 60px is the deepest corner the radii census tables below the pills (999px, 9999px). Inside, the quote sets in ABC Diatype Plus Variable 26px/400/31.2px/−0.78px in #37383C, the name at 20px/460/28px, the role at 14px/400/22.4px in #4B4D53, and an oversized #FFB199 quotation glyph at 48px/700.

### Bordered Article Card
**Role:** the slides page's feature and template cards — a bordered variant and a filled one, same box.
`.rounded-2xl.border.border-[#C5C5C5].p-6` is the outline version: no fill, 32px padding, 16px radius, 1px #C5C5C5 border, no shadow. `.rounded-2xl.bg-[#FAF6F1].p-6.sm:p-8` is the filled version: #FAF6F1 fill, the same padding and radius, no border. Headings run ABCDiatype 24px/400/22.8px/−1.44px in #181818; body sits at 14px/400/21.7px in #312E2E or 16px/400/25.6px in #5C5C5C.

### FAQ Accordion Row
**Role:** the closing question list — a stack of rules with a question on each.
`.border-b.border-[#C5C5C5].py-6` gives the row its shape: no fill, 24px 0px padding, 0px radius, a 1px #C5C5C5 bottom border. The question is a full-width button (`.flex.w-full.cursor-pointer.items-center`) at ABCDiatype 24px/400/32px in #181818 on a 24px gap; the toggle is a bare "+" in #FF3C00 at the same 24px/400/32px. No card, no chevron, no hover fill.

### Big Footer
**Role:** the sitemap close — wordmark, link columns, a local-time badge and the copyright line.
`.BigFooterRedesign-module__DTzGRa__bigFooter` fills #FAF5F0, a half-step warmer than the canvas, and lays its columns on a 48px gap (`.BigFooterRedesign-module__DTzGRa__columns`). Links are `.BigFooterRedesign-module__DTzGRa__columnLink` at 16px/400/16px/−0.28px in #191818 — leading equal to size. The design page's `.BigFooter-module__JuPJhG__sectionLink` steps up to 20px/400/20px/−0.4px in #76716F. `.FooterGlobe-module__nYyUxa__infoCard` carries the city and clock at an 8px radius, `rgba(255, 255, 255, 0.1)` fill, #938F8C ink.

## Do's and Don'ts

### Do
- Set display type at weight 400 — the heading rows at 48px and above ("Meet Replit", "What will you build?", "Start Small. Scale Fast.", "Publishing made easy") all paint 400.
- Lock display leading to the size — 68.92px/68.92px, 64px/64px, 60px/60px, 48px/48px — at −0.06em; 56px is looser at −2.24px, 72px at −3.36px.
- Spend #FF3C00 on things that act or name the brand — its carriers are "Create account", `.LandingSubmitButton-module__X4iHNq__landingSubmitButton`, the accordion "+" and the "Replit" in "Meet Replit".
- Let the fill be the card: the bento boxes paint #F9AA8B, #2C3328, #EDEDED and #FFFFFF at 40px padding and a 24px radius, no border, no shadow.
- Use the pill for controls and 16px for containers — 999px on `.DesignTemplateGallery-module__6lF1wa__chip`, 16px on `.rounded-2xl.border.border-[#C5C5C5].p-6`.
- Soften a border before you soften a colour: the control tiles use `rgba(197, 197, 197, 0.6)`.

### Don't
- Don't drop-shadow a card. Every row in the box census paints `shadow none`; the measured shadows belong to small controls and the 8px overlay tiles.
- Don't bold a headline. Weight 700 shows up in one text row — the 48px "“" glyph in #FFB199 — a punctuation mark, not a word.
- Don't tighten body copy. The 16px paragraph row (`.text-base.text-[#5C5C5C]`) paints 25.6px leading at tracking normal; tightening lives on links and labels — footer links at 16px/−0.28px, the 12px "Handy Links" row at −0.42px.
- Don't mix the two grounds. The cream pages ink at #181818 and #312E2E; the deployments page inks at #1B2333 on white with a 4px button radius.
- Don't promote an ink to a fill: #18191B and #73767F are painted as text in every observation the census records for them.
- Don't decorate with the accent at scale — #FF3C00's fills are CTAs, the two submit buttons and `.PlatformCards-module__Z0omxa__agentPublishBtn`; the badges are #FFE1D6 (`.PricingShowcase-module__4e3f_q__saveBadge`) and the #E63600 → #F54100 "Free" pill.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Cream Canvas | `#FAF6F1` | Home page root fill; the slides page's warm band |
| 0 | Warm Grey | `#F6F5F4` | Body fill, home and design pages; control resting fill |
| 0′ | Product Canvas | `#FFFFFF` | Page ground on the deployments page (`.flow-root`) |
| 1 | Cool Band | `#EDEDED` | Alternating full-bleed section, slides page |
| 2 | Paper | `#FFFFFF` | Cards: 60px slab, 24px block, 20px panel |
| 2 | Accent Blocks | `#F9AA8B` / `#FFB199` / `#2C3328` | Bento cards using colour instead of elevation |
| 3 | Dark Band | `#312E2E` | Slides-page band and thumbnails; ink inverts to #FAF6F1 |

## Elevation

Elevation is luminance and radius, not shadow. Every row in the box census — the 60px slab, the 24px blocks, the 16px articles, the 96px bands — paints `shadow none`: a card separates from the cream by being whiter (#FFFFFF on #FAF6F1), warmer (#F9AA8B), darker (#2C3328) or cooler (#EDEDED). Where an edge is needed it reaches for 1px: #C5C5C5 on the slides page, `rgba(197, 197, 197, 0.6)` on controls, #D8D5CF on chips. Measured shadows are weak: `rgba(0, 0, 0, 0.02) 0px 1px 2px 0px` on small controls; the 8px overlay tile `.absolute.rounded-lg.overflow-hidden.shadow-md` at `rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px`.

## Imagery

The imagery is the product's output, not brand photography. Template thumbnails fill 12px-radius tiles edge to edge with somebody else's aesthetic — a duotone orange portrait, a black synth-editor UI, a checkerboard jazz poster — unrestyled: their variety is the claim. Portraits appear in testimonial and chat imagery, cropped square into rounded corners under a scrim from `rgba(29, 34, 27, 0.8)` through `rgba(29, 34, 27, 0.45)` to `rgba(29, 34, 27, 0.2)`. Bento diagrams are single-weight line drawings: a white shield on orange, a black Authentication/Database/Hosting/Monitoring stack on the #DBD4CF card, an OpenAI/Stripe/Notion node map on peach. Customer wordmarks run in a plain grey row.

## Layout

Sections are full-bleed colour bands; content is centred and clamped. On the slides page a section is `.px-4.sm:px-6.lg:px-8.py-20` — 96px top and bottom, 32px sides — alternating #FAF6F1 and #EDEDED, with a #312E2E band flipping the ink to #FAF6F1, so the page reads as stacked planes. The dominant rhythm is 96px, with 120px and 168px on hero and closing blocks and 48px for tighter runs. Inside, the grid is `.max-w-6xl.mx-auto.grid.gap-8` — a centred wrapper on a 32px gutter — card grids run at 16px, control rows at 8px. The home page composes as a bento: unequal 24px-radius blocks sharing one row, hero display type centred above a prompt box. Navigation is one top row — wordmark and menus left, sign-in and CTA right. The deployments page alternates a 20px-radius media panel against a text column in a two-up.

## Typography Voice

Two modes, one family. From 48px up, leading locks to the size (68.92px/68.92px, 64px/64px, 60px/60px, 48px/48px) at −0.06em; 56px sits at −2.24px, 72px at −3.36px. At 36px and 24px leading drops below the size (34.2px, 22.8px); 26px opens to 31.2px, 25px to 30px at weight 512. Small text does not simply relax: footer links set 16px on 16px at −0.28px, the design page's 20px on 20px, the 12px "Handy Links" row −0.42px. Leading opens to 1.55–1.6 on the paragraph rows (16px on 25.6px, 18px on 28.8px), tracking normal. Weight is nearly refused — the heading census paints 400 in all but one row — so emphasis changes colour: #FF3C00 on one word ("Replit" in "Meet Replit"), or a gradient (#FF3C00 → #D85B84 on "designs").

## Agent Prompt Guide

## Quick Color Reference
- background: `#FAF6F1`
- text: `#181818`
- surface: `#FFFFFF`
- border: `#C5C5C5`
- accent: `#FF3C00`
- primary action: `#FF3C00`

## Example Component Prompts
1. **Hero with prompt box**: Centre a headline in ABC Diatype Plus Variable 68.92px/400, leading 68.92px, tracking −4.1352px, in #312E2E on #FAF6F1, one word in #FF3C00. Below it a #FFFFFF input with a #FF3C00 circular submit button at 100px radius, `rgba(255, 255, 255, 0.9)` ink. Under that, five buttons on an 8px gap: fill #F6F5F4, 16px radius, 1px `rgba(197, 197, 197, 0.6)` border, label 14px/400 #37383C.
2. **Bento feature grid**: Four unequal blocks on a 16px gap, each 40px padding, 24px radius, no border, no shadow. Fills #F9AA8B, #2C3328, #EDEDED, #FFFFFF. Eyebrow `.FreeModeCard-module__vsNFqq__label` ("Free mode") in #322F2F, size not measured; heading 36px/400/36px/−1.08px in #322F2F, body 14px/400/22.4px.
3. **Pricing row**: Four #FFFFFF cards on a 16px gap. Plan name #6F6C6A, price 64px/400/64px/−3.84px in #191818, benefits 14px/400/19.6px in #312E2E, a #FFE1D6 savings badge, CTA at 15px/400, 12px 24px padding, 999px radius — outlined (ink and border #FF3C00, no fill) for secondary plans, filled #FF3C00 with #FFFFFF ink for the recommended one.
4. **Filter chip row**: Pills at 999px radius, 0px 17px padding, ABC Diatype 14px/450, on an 8px gap. Rest: no fill, #55524E ink, 1px #D8D5CF border. Selected: #181818 fill, #FFFFFF ink, 1px #181818 border. No shadow, no scale change.
5. **FAQ list**: Rows of 24px 0px padding with a 1px #C5C5C5 bottom border, question at ABCDiatype 24px/400/32px in #181818 on a full-width button with a 24px gap, "+" toggle in #FF3C00 at the same size. No card, no fill, no hover elevation.

## Similar Brands
- **Anthropic** — a warm paper canvas, one saturated orange, and a low-weight grotesk carrying every heading.
- **The Browser Company (Arc)** — cream grounds, oversized soft radii, flat colour blocks used as objects, not shadowed panels.
- **Klarna** — off-white ground, big rounded cards, a single hot accent doing all the interaction work.
- **Mailchimp** — an off-white brand ground and a tightly tracked display grotesk set large and light, colour applied as area.
- **Vercel (Geist)** — a neutral grotesk at regular weight, negative tracking at display sizes, hierarchy from scale rather than weight.

## Quick Start

### CSS Custom Properties
```css
:root {
  /* Colors */
  --color-canvas: #FAF6F1;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F6F5F4;
  --color-surface-footer: #FAF5F0;
  --color-band: #EDEDED;
  --color-ink: #181818;
  --color-ink-soft: #37383C;
  --color-ink-heading: #312E2E;
  --color-ink-product: #1B2333;
  --color-ink-body: #5C5C5C;
  --color-ink-muted: #76716F;
  --color-accent: #FF3C00;
  --color-accent-soft: #FF764C;
  --color-peach: #FFB199;
  --color-blush: #F9AA8B;
  --color-moss: #2C3328;
  --color-badge: #FFE1D6;
  --color-border: #C5C5C5;
  --color-border-soft: rgba(197, 197, 197, 0.6);
  --color-border-chip: #D8D5CF;
  --color-border-panel: #DBD9D3;
  --color-lilac: rgba(238, 197, 252, 0.9);
  --color-lilac-end: rgba(249, 236, 254, 0.6);
  --color-lilac-edge: #CC5AF2;
  --color-pink: #D85B84;
  --color-scrim: rgba(29, 34, 27, 0.8);

  /* Typography — Families */
  --font-brand-variable: 'ABC Diatype Plus Variable', 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, sans-serif;
  --font-brand: 'ABCDiatype', 'Neue Haas Grotesk Text', ui-sans-serif, system-ui, sans-serif;
  --font-family-default: 'Replit Diatype', 'ABC Diatype', ui-sans-serif, system-ui, sans-serif;
  --font-family-brand: 'ABC Diatype', 'Neue Haas Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-family-code: 'Replit Diatype Mono', ui-monospace, monospace;
  --font-serif: 'Times', 'Times New Roman', serif;

  /* Typography — Scale */
  --text-display-xl: 72px;   --leading-display-xl: 72px;
  --text-display-l: 68.92px; --leading-display-l: 68.92px;
  --text-display-m: 64px;    --leading-display-m: 64px;
  --text-display-s: 60px;    --leading-display-s: 60px;
  --text-heading-xl: 56px;   --leading-heading-xl: 56px;
  --text-heading-l: 48px;    --leading-heading-l: 48px;
  --text-heading-m: 36px;    --leading-heading-m: 34.2px;
  --text-heading-s: 26px;    --leading-heading-s: 31.2px;
  --text-heading-xs: 25px;   --leading-heading-xs: 30px;
  --text-title: 24px;        --leading-title: 22.8px;
  --text-subheading: 21px;   --leading-subheading: 27.3px;
  --text-body-lg: 18px;      --leading-body-lg: 28.8px;
  --text-body: 16px;         --leading-body: 25.6px;
  --text-label: 14px;        --leading-label: 22.4px;
  --text-caption: 13px;      --leading-caption: 13px;
  --text-micro: 12px;        --leading-micro: 18px;
  --tracking-display: -0.06em;
  --tracking-heading-xl: -0.04em;
  --tracking-heading-s: -0.03em;
  --tracking-body: normal;

  /* Spacing */
  --space-2: 2px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-120: 120px;

  /* Border Radius */
  --radius-control: 6px;
  --radius-input: 7px;
  --radius-link: 8px;
  --radius-thumb: 12px;
  --radius-card: 16px;
  --radius-panel: 20px;
  --radius-block: 24px;
  --radius-slab: 60px;
  --radius-pill: 999px;
  --radius-product: 4px;

  /* Shadows */
  --shadow-control: rgba(0, 0, 0, 0.02) 0px 1px 2px 0px;
  --shadow-raised: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
  --shadow-soft: rgba(0, 0, 0, 0.04) 0px 4px 24px 0px;
  --shadow-hairline: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
```

### Tailwind v4
```css
@theme {
  --color-canvas: #FAF6F1;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F6F5F4;
  --color-surface-footer: #FAF5F0;
  --color-band: #EDEDED;
  --color-ink: #181818;
  --color-ink-soft: #37383C;
  --color-ink-heading: #312E2E;
  --color-ink-product: #1B2333;
  --color-ink-body: #5C5C5C;
  --color-ink-muted: #76716F;
  --color-accent: #FF3C00;
  --color-accent-soft: #FF764C;
  --color-peach: #FFB199;
  --color-blush: #F9AA8B;
  --color-moss: #2C3328;
  --color-badge: #FFE1D6;
  --color-border: #C5C5C5;
  --color-border-soft: rgba(197, 197, 197, 0.6);
  --color-border-chip: #D8D5CF;
  --color-border-panel: #DBD9D3;
  --color-lilac: rgba(238, 197, 252, 0.9);
  --color-lilac-end: rgba(249, 236, 254, 0.6);
  --color-lilac-edge: #CC5AF2;
  --color-pink: #D85B84;
  --color-scrim: rgba(29, 34, 27, 0.8);

  --font-brand-variable: 'ABC Diatype Plus Variable', 'Neue Haas Grotesk Display', ui-sans-serif, system-ui, sans-serif;
  --font-brand: 'ABCDiatype', 'Neue Haas Grotesk Text', ui-sans-serif, system-ui, sans-serif;
  --font-family-default: 'Replit Diatype', 'ABC Diatype', ui-sans-serif, system-ui, sans-serif;
  --font-family-brand: 'ABC Diatype', 'Neue Haas Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-family-code: 'Replit Diatype Mono', ui-monospace, monospace;
  --font-serif: 'Times', 'Times New Roman', serif;

  --text-display-xl: 72px;
  --text-display-l: 68.92px;
  --text-display-m: 64px;
  --text-display-s: 60px;
  --text-heading-xl: 56px;
  --text-heading-l: 48px;
  --text-heading-m: 36px;
  --text-heading-s: 26px;
  --text-heading-xs: 25px;
  --text-title: 24px;
  --text-subheading: 21px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-label: 14px;
  --text-caption: 13px;
  --text-micro: 12px;

  --leading-display-xl: 72px;
  --leading-display-l: 68.92px;
  --leading-display-m: 64px;
  --leading-display-s: 60px;
  --leading-heading-xl: 56px;
  --leading-heading-l: 48px;
  --leading-heading-m: 34.2px;
  --leading-heading-s: 31.2px;
  --leading-heading-xs: 30px;
  --leading-title: 22.8px;
  --leading-subheading: 27.3px;
  --leading-body-lg: 28.8px;
  --leading-body: 25.6px;
  --leading-label: 22.4px;
  --leading-caption: 13px;
  --leading-micro: 18px;

  --tracking-display: -0.06em;
  --tracking-heading-xl: -0.04em;
  --tracking-heading-s: -0.03em;

  --spacing-2: 2px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-120: 120px;

  --radius-control: 6px;
  --radius-input: 7px;
  --radius-link: 8px;
  --radius-thumb: 12px;
  --radius-card: 16px;
  --radius-panel: 20px;
  --radius-block: 24px;
  --radius-slab: 60px;
  --radius-pill: 999px;
  --radius-product: 4px;

  --shadow-control: rgba(0, 0, 0, 0.02) 0px 1px 2px 0px;
  --shadow-raised: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
  --shadow-soft: rgba(0, 0, 0, 0.04) 0px 4px 24px 0px;
  --shadow-hairline: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
}
```