The design systems behind 1,289 websites, taken apart.

# fastht.ml — Style Reference
> Confetti scattered across gallery walls

**Theme:** mixed

FastHTML runs on a sticker-pack logic: monochrome type and pill-shaped controls float over alternating full-bleed color bands (light canvas, deep aubergine, periwinkle violet) while vivid green, yellow, pink, and violet shapes scatter like confetti in the margins. The signature is the button — a black pill with a two-layer shadow that stacks a bright white inner highlight on top of a dark drop shadow, making every control read as a physical sticker peeled from the page. Typography stays geometric and compact (Geist, tight tracking on large sizes, Geist Mono for code) so the saturated accents can do the emotional work. Cards are generously rounded (24–40px) but never feel soft — they sit on hard color blocks, not on layered neutrals.

## Colors

| Name | Value | Role |
|------|-------|------|
| Sticker Green | `#3cdd8c` | Decorative blob shapes, accent fills in hero and code-demo section |
| Sticker Yellow | `#ffc435` | Decorative blob shapes, warm accent fill in hero |
| Sticker Pink | `#e699d9` | Decorative blob shapes, soft accent fill in hero |
| Periwinkle Violet | `#7575f0` | Full-bleed FAQ section background, section-level color band |
| Soft Periwinkle | `#939eeb` | Inline text accents, table text, light violet typography |
| Deep Aubergine | `#3a2234` | Dark code-demo section background — the primary dark band |
| Mint Cream | `#d4f7e6` | Tinted card surface — pale green card variant |
| Cotton Candy | `#ffccf7` | Tinted card surface — pale pink card variant |
| Butter Cream | `#ffeecc` | Tinted card surface — pale yellow card variant |
| Lavender Mist | `#e8e8fc` | Tinted card surface — pale violet card variant, nav pill background |
| Dusty Mauve | `#eddee9` | Tinted card surface — mauve card variant |
| Carbon | `#000000` | Primary text, filled button fill, hero headline color |
| Paper White | `#ffffff` | Light section canvas, card surface on dark/violet bands, button text on black |
| Fog | `#f3f3f3` | Light card surfaces on light sections, subtle fills |
| Silver | `#e5e7eb` | Hairline borders, dividers, table grid lines |
| Ash | `#cccccc` | Muted secondary text, placeholder labels |
| Graphite | `#999999` | Disabled/inactive text, table muted cells |
| Slate | `#333333` | Borders on dark sections, secondary dividers |

## Typography

### Geist
All interface text — headlines, body, buttons, nav, cards. Geist is a geometric sans with hard-cut terminals; weight 400 carries body, weight 500 carries UI controls and subheads. Display sizes use tight negative tracking (up to -0.015em) to lock letters together at hero scale.

- **Fallbacks:** Inter, Manrope, or system-ui
- **Weights:** 400, 500
- **Sizes:** 16px, 20px, 24px, 32px, 60px, 72px
- **Line height:** 1.10–1.50 (tight 1.10–1.25 on display, 1.40–1.50 on body)
- **Features:** "clig" 0, "liga" 0
- **Letter spacing:** -0.015em at 72px, -0.01em at 60px, -0.005em at 32px, normal at 16px

### Geist Mono
Code blocks, inline code, file labels, tabular data. Loose 1.80 line-height is deliberate — it creates breathing room around syntax tokens so colored keywords read as decoration, not noise.

- **Fallbacks:** JetBrains Mono, Fira Code, or ui-monospace
- **Weights:** 500
- **Sizes:** 14px, 16px
- **Line height:** 1.80
- **Features:** "clig" 0, "liga" 0

### Arial Black
Arial Black — detected in extracted data but not described by AI

- **Weights:** 400, 700
- **Sizes:** 16px, 20px
- **Line height:** 1.5
- **Features:** "clig" 0, "liga" 0

## Spacing & Shape

- **Page max width:** 1200px
- **Section gap:** 64-96px
- **Element gap:** 8-16px
- **Card padding:** 32px
- **Radius:** nav 9999px, hero 40px, tags 9999px, cards 24px, images 20px, buttons 9999px, codeBlocks 16px

## Do

- Use 9999px radius on every button, nav, tag, and pill-shaped control
- Apply the two-layer embossed shadow (white inner highlight + dark drop) to any interactive element that should feel like a physical sticker
- Alternate full-bleed color bands vertically — light canvas, then dark, then saturated — rather than padding one background with colored cards
- Use Geist at weight 400 for body and weight 500 for UI controls; never go above weight 500
- Apply tight negative letter-spacing on display sizes: -0.015em at 72px, scaling toward 0 at body size
- Scatter 3–5 oversized confetti shapes (circles, rounded rectangles, capsule pills) around hero content as absolutely positioned decorations in Sticker Green, Yellow, Pink, and Periwinkle Violet
- Use Geist Mono at 14px with 1.8 line-height for all code blocks; color keywords with site accents

## Don't

- Don't introduce a colored CTA — the primary action is always black filled; the only action color is #000000
- Don't use square or 4px-radius buttons — every interactive shape is a pill or a generously rounded rectangle (16–24px)
- Don't put cards on layered neutral grays — cards sit on hard color blocks or stay flat on the white canvas
- Don't use serif fonts, script fonts, or display fonts — Geist and Geist Mono only
- Don't set body line-height below 1.4 or code line-height below 1.6 — the loose spacing is part of the sticker-pack reading
- Don't use #7575f0 (Periwinkle Violet) as a small accent — it's a section-level full-bleed background color, not a token
- Don't add drop shadows to FAQ cards or code-demo demo cards — their separation comes from the color block beneath, not from elevation