---
title: "FastHTML design system"
variant: extended
source: https://fastht.ml/
captured_at: 2026-10-12
theme: dark
industry: devtools
generator: Design DNA (https://four.wiralomi.com/style/fastht-ml)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# FastHTML · Design System

> Bright color, clear structure, Python-first simplicity.

**Theme:** dark · **Industry:** devtools · **Source:** https://fastht.ml/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

FastHTML pairs a clean, centered hero with vivid color-blocked sections and playful geometric accents. Rounded cards, compact navigation, and developer-oriented examples make the page feel approachable without losing its technical focus.

## North star

Let a centered, readable content structure sit within bold, rounded color chapters, keeping decoration playful and controls unmistakably clear.

## Overview

The page uses a pale, near-white canvas as a quiet stage for bold, full-width section bands: warm yellow for the getting-started pitch, vivid green for the stack, periwinkle for FAQs, and pink for testimonials. The opening hero is centered, black-on-light, and framed by floating rounded geometric shapes; treat these accents as decorative illustration rather than interface states. Geist carries headings and body copy with compact, confident line breaks, while Geist Mono marks small labels, code, and navigation details. The layout moves from a spacious hero into denser feature cards, then alternates color-led sections with a light gallery panel. Rounded pills, large soft-corner cards, and restrained shadows keep the vivid palette friendly rather than severe. Preserve clear contrast and allow each section color to define its own visual chapter; reserve black for high-contrast actions, text, and the closing footer.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Carbon Ink | `#000000` | `--color-carbon-ink` | neutral | Primary hero and body text, black pill CTAs, and the full-width footer canvas. |
| Mist Blush | `#f3e9f0` | `--color-mist-blush` | surface | Subtle pale gradient tint; use only where a soft background transition is visible. |
| Gallery Porcelain | `#f3f3f3` | `--color-gallery-porcelain` | surface | Light page canvas, opening hero background, and the samples gallery section. |
| Fast Green | `#3cdd8c` | `--color-fast-green` | brand | Bright technology-stack section band and green geometric illustration accents. |
| Warm Charcoal | `#333029` | `--color-warm-charcoal` | neutral | Muted text tone measured in content; subordinate to primary black copy. |
| Signal Marigold | `#ffc435` | `--color-signal-marigold` | brand | Getting-started feature section band and yellow geometric accents. |
| Plum Stage | `#3a2234` | `--color-plum-stage` | surface | Dark plum product-demo section and supporting dark visual panels. |
| Periwinkle Field | `#7575f0` | `--color-periwinkle-field` | brand | FAQ section band and periwinkle decorative shapes. |
| Lavender Text | `#939eeb` | `--color-lavender-text` | accent | Measured accent text; use sparingly for secondary emphasis, not as the main canvas. |
| Graphite Hairline | `#333333` | `--color-graphite-hairline` | neutral | Thin navigation borders and restrained separators. |
| Soft Gray | `#aaaaaa` | `--color-soft-gray` | neutral | Muted border or secondary text detail where visible; not a dominant brand color. |
| Candy Orchid | `#e699d9` | `--color-candy-orchid` | brand | Testimonial section band and pink rounded geometric decorations. |
| Deep Moss | `#2a312e` | `--color-deep-moss` | neutral | Minor dark heading or text detail measured in content; keep subordinate. |
| Leaf Link | `#2a9a62` | `--color-leaf-link` | accent | Link treatment measured in content; use for occasional inline links, not broad fills. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | Text on dark elements and small high-contrast highlights. |
| Coral Note | `#ff8087` | `--color-coral-note` | semantic | Minor content text accent; appears as a small detail rather than a section color. |
| Mint Card | `#d4f7e6` | `--color-mint-card` | surface | Pale mint inverse cards inside the green technology-stack section. |
| Petal Card | `#ffccf7` | `--color-petal-card` | surface | Pale pink testimonial or content cards, distinct from the stronger pink section band. |

### Semantic aliases

`--color-canvas` → `#000000` (Carbon Ink) · `--color-surface` → `#f3f3f3` (Gallery Porcelain) · `--color-surface-2` → `#3a2234` (Plum Stage) · `--color-surface-3` → `#d4f7e6` (Mint Card) · `--color-surface-4` → `#ffccf7` (Petal Card) · `--color-text` → `#939eeb` (Lavender Text) · `--color-text-muted` → `#000000` (Carbon Ink) · `--color-text-subtle` → `#333029` (Warm Charcoal) · `--color-border` → `#333333` (Graphite Hairline) · `--color-accent` → `#3cdd8c` (Fast Green) · `--color-accent-2` → `#ffc435` (Signal Marigold) · `--color-accent-3` → `#939eeb` (Lavender Text)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#939eeb` | `#000000` | 8.33:1 | AAA |
| `#939eeb` | `#f3f3f3` | 2.27:1 | fail |
| `#939eeb` | `#3a2234` | 5.71:1 | AA |
| `#939eeb` | `#d4f7e6` | 2.19:1 | fail |
| `#000000` | `#f3f3f3` | 18.93:1 | AAA |
| `#000000` | `#3a2234` | 1.46:1 | fail |
| `#000000` | `#d4f7e6` | 18.25:1 | AAA |
| `#333029` | `#000000` | 1.6:1 | fail |
| `#333029` | `#f3f3f3` | 11.86:1 | AAA |
| `#333029` | `#3a2234` | 1.09:1 | fail |

### Gradients

- `radial-gradient(circle at 90% -20%, rgba(255, 255, 255, 0.333), rgba(0, 0, 0, 0.06))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 500 | Display headings, body copy, links, and buttons | Inter |
| Geist Mono | `--font-mono` | webfont | 500 | Small labels, code samples, and compact navigation text | Space Mono |

- **Geist:** Use measured medium weight for display and headings, regular body text, and natural sentence case.
- **Geist Mono:** Reserve for technical metadata and code; measured at medium weight, with no forced uppercase beyond label styling.

### Type scale — Augmented Fourth (ratio ≈ 1.377, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 500 | 1.22 | -0.015em | — | Geist | Large centered hero statement. |
| h1 | 60px | 500 | 1.1 | -0.015em | — | Geist | Primary page or section headline. |
| h2 | 32px | 500 | 1.25 | -0.015em | — | Geist | Major feature and FAQ section headings. |
| h3 | 24px | 400 | 1.33 | -0.01em | — | Geist | Feature-card and supporting subsection titles. |
| body | 20px | 400 | 1.4 | -0.01em | — | Geist | Hero support copy and explanatory paragraphs. |
| caption | 16px | 500 | 1.8 | 0 | — | Geist Mono | Small uppercase section labels and technical metadata. |
| button | 16px | 400 | 1.5 | -0.005em | — | Geist | Pill-shaped navigation and primary action labels. |
| link | 24px | 400 | 1.33 | -0.01em | — | Geist | Inline philosophy, sample, and navigation links. |
| code | 16px | 500 | 1.8 | 0 | — | Geist Mono | Code previews and developer-focused snippets. |

OpenType features in use: `"clig" 0, "liga" 0`.

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 16, 20, 24, 32, 48, 64, 96 px.
- Section rhythm 64px · element gap 8px · card padding 32px · max content width 800px.

The measured content max width is 800px, set within full-bleed section bands. The hero centers its heading, copy, and actions; later sections vary between a three-card feature row, stacked technology cards, a four-item gallery, split FAQ content, and testimonial cards. Section changes create the primary rhythm, with comfortable density and generous breathing room. Use the measured 8px spacing base and preserve the distinction between compact labels and larger content groupings.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `9999px` · nav `9999px` · xs `10px` · sm `16px` · md `20px` · lg `24px` · xl `40px` · pill `9999px`
- Shadow `sm` (button, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.5) 0px 2px 2px 0px, rgba(0, 0, 0, 0.2) 0px 3px 3px 0px`
- Shadow `inset` (other, button, card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.1) 0px 2px 4px 0px inset, rgba(0, 0, 0, 0.5) 0px 4px 8px 0px`
- Shadow `sm-2` (card): `rgba(0, 0, 0, 0.6) 0px 1px 5px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most sections rely on flat, saturated color rather than deep elevation. Rounded cards separate from their backgrounds through pale contrasting fills; FAQ rows and pill controls use subtle shadowing for definition. Keep borders sparse, with thin dark navigation hairlines where needed, and use layering mainly for hero decorations and inset media.

## Imagery

The page combines colorful abstract geometric shapes, product and sample previews, small technology logos, and testimonial portraits. The hero decorations are oversized, cropped rounded forms around the centered message. Sample artwork sits inside bright icon-like tiles, while cards contain compact previews or logos. Keep imagery crisp and secondary to the section colors; avoid introducing a photography-led visual direction.

## Components

### Centered hero

Large black multiline headline and concise support copy on a light canvas, with floating geometric accents and paired pill-shaped actions.

### Dark demo panel

A plum showcase band with centered heading, code preview, sample media, and compact tab-like controls.

### Feature cards

Three pale cards sit together on the marigold section, each with a concise heading and supporting copy.

### Stack cards

Pale mint cards organize foundations, familiar tools, and deployment options within the green section.

### Sample gallery

A light rounded gallery panel presents four colorful app tiles with short linked labels.

### FAQ accordion

A split periwinkle section pairs a left-side title and description with a vertical stack of rounded question rows.

### Testimonial cards

Pink section with introductory copy and a horizontal set of pale testimonial cards, including small author portraits.

### Footer

Black closing band with compact monospace links and oversized FastHTML wordmark imagery.

### Measured component styles

- **Primary button** (“ASGI”): background #eefcf5 · text #000000 · radius 9999px · padding 8px 16px · 400 20px Geist · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 25
- **Secondary button** (“Read docs”): background #000000 · text #ffffff · radius 1000px · padding 8px 16px · 400 16px Geist
- **Link** (“Game of life”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Geist
- **Card** (“FastHTML is as intuitive as FastAPI, len”): background #ffccf7 · text #000000 · radius 24px · padding 32px · 400 16px Geist
- **Navigation item** (“Github”): transparent background · text #ffffff · radius 0px · padding 0px · 500 16px Geist Mono

## Do

- Keep the hero centered on a light canvas.
- Use full-width color bands to separate content chapters.
- Set small technical labels in Geist Mono.
- Use rounded cards and pill-shaped actions consistently.
- Keep card copy concise and clearly hierarchical.
- Treat floating geometric shapes as decoration.

## Don't

- Do not make the whole page dark.
- Do not use gradients as a substitute for the solid section bands.
- Do not let decoration obscure headings or controls.
- Do not use dense, edge-to-edge text blocks.
- Do not apply bright colors to every individual card.
- Do not introduce heavy borders or dramatic shadows.

## Agent prompt

Build a new developer-tools page in the FastHTML visual style. Use a pale Gallery Porcelain (#f3f3f3) canvas, black Carbon Ink (#000000) typography, and generous centered space around the opening message. Organize content into full-width color chapters using Signal Marigold (#ffc435), Fast Green (#3cdd8c), Periwinkle Field (#7575f0), and Candy Orchid (#e699d9); keep each band distinct and readable. Use Geist or Inter for headings and body, with Geist Mono or Space Mono for labels and code. Favor rounded pale cards, black pill actions, compact technical labels, and restrained shadows. Add a few cropped geometric decorations and useful product previews, but keep them secondary to content. Vary section layouts while preserving clear hierarchy, comfortable spacing, and direct developer-focused copy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero on light canvas, followed by a dark demo showcase. | Primary action, Intro video action | Floating geometric shapes, Black pill CTA, Dark demo band |
| 2 | feature-grid | Centered introduction above a three-card row on a yellow band. | Three benefits, Scannable feature cards | Marigold background, Pale rounded cards, Centered headline |
| 3 | other | Centered heading and short supporting text on the marigold section. | Philosophy link, Transition into stack details | Centered typography, Inline text link |
| 4 | integrations | Left-aligned section heading followed by three stacked tool cards on green. | Grouped technologies, Deployment options | Green band, Pale mint cards, Small logo chips |
| 5 | gallery | Centered heading and description above four sample tiles on a light panel. | Explore examples, Linked sample labels | Rounded light section, Colorful icon tiles, Compact links |
| 6 | faq | Split layout with intro copy on the left and stacked questions on the right. | Expandable questions, Topic scanning | Periwinkle section band, Rounded accordion rows, Plus indicators |
| 7 | testimonials | Introductory copy at left and horizontally arranged quote cards at right. | Social proof, Carousel-style browsing | Pink band, Pale quote cards, Author portraits |
| 8 | footer | Black full-width footer with compact top-row links and oversized brand artwork. | Footer navigation, Social destinations | Black canvas, Monospace link row, Large wordmark |

## Source CSS custom properties (selected)

```css
--cardsSectionGap: 2rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/fastht-ml