Design systems, extracted.
Paste any URL to create a design system from it. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
Halden Miller
Halden Miller is a literary, consultative brand system: cream parchment surfaces, charcoal ink, italic serif emphasis. Soft pill buttons, monospace eyebrow labels, uppercase tags — restrained and precise, designed to convey expertise rather than performance. The palette stays close to the page: one canvas tone, two lifted parchments, near-black ink, plus utility states (amber, red, fern) reserved strictly for feedback. Scales from quiet long-form pages to dark hero sections without losing its tone.
Sections from Halden Miller
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Process Timeline with Image
View section
Hero Section with Animated Text
View section
Hero Section with Video Widget
View section
Framework Process Feature Grid
View section
Advanced Dropdown Navigation Bar
View section
CTA with Contact Form
View section
Feature Cards Three Column Grid
View section
Features Grid With Contact CTA
View section
Callout Block with Image
View section
Two Column CTA Cards Section
View section
Statistics Cards Scroll Animation
View section
Bento Grid Layout Component
View section
Colors
Canvas
Pressed Linen
#efede7
Lifted surface. Cards, form blocks, label tags, soft section gradients.
Parchment Cream
#f7f7f2
Page canvas. Warm off-white that anchors the light theme.
Weathered Stone
#e1dcd5
Depth surface. Inset sections, FAQ backdrops, gradient bases.
Ink
Deep Walnut
#22201f
Dark depth. Innermost dark surface, slightly lifted from black.
Midnight Ink
#191818
Primary text & ink. Headlines, body copy, primary button fills.
Obsidian Shade
#1e1c1b
Dark surface. Navigation, footer, full-bleed dark sections.
State — utility only
Ember Red
#c94040
Error state. Form validation, destructive cues. Used sparingly.
Kiln Amber
#c56a21
Warning state. Single warm accent for cautionary UI, never decorative.
Fern Success
#2ad87f
Success state. Confirmation pills, positive validation.
Typography
The quick brown fox jumps
Uppercase eyebrow labels, tags, and stat captions. Monospace introduces a quietly technical, archival counterpoint to the serif headlines.
The quick brown fox jumps
Body copy and button labels. Calm, neutral, and highly legible — the voice of the brand at conversational volume.
The quick brown fox jumps
All headings (H0–H6). The italic style is used as a deliberate emphasis device on key words to create editorial rhythm.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
120pxCard padding
32pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-0
0px--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-32
32px--spacing-48
48px--spacing-64
64px--spacing-80
80px--spacing-120
120pxBorder radius
full9999pxtags16pxcards12pxinputs8pxbuttons16pxcards-large16pxbuttons-pill24pxSurfaces
Step from canvas (level 1) to lifted (level 2) to inset depth (level 3), then invert into the dark levels for full-bleed sections. Hex codes and roles live in the Colors section above; this ladder shows the layering only.
Level 1Parchment Cream
Level 2Pressed Linen
Level 3Weathered Stone
Level 4Obsidian Shade
Level 5Deep Walnut
Do's and don'ts
- Use Plex Serif italic deliberately on a single phrase per headline to create editorial emphasis — never italicize entire sentences.
- Reserve Plex Mono exclusively for uppercase eyebrow labels, stat captions, and tags with 0.75px letter-spacing.
- Layer surfaces gently from Parchment Cream → Pressed Linen → Weathered Stone using vertical gradients for atmospheric section transitions.
- Apply 16px radius to all standard buttons and 24px radius to circular icon buttons to maintain the soft pill language.
- Pair primary charcoal pill buttons with transparent secondary pills — never two filled buttons side by side.
- Use 120px vertical section padding as the default rhythm, expanding to 160–200px only for hero and CTA moments.
- Keep body copy in Plex Sans regular and let the serif headlines do all expressive work.
- Don't introduce additional saturated colors; keep utility hues (amber, red, fern) reserved strictly for state feedback.
- Don't use heavy weights on Plex Serif — headings stay at weight 400 and rely on italic and size for emphasis.
- Don't place light gray borders on cards; differentiate panels by surface tone (Pressed Linen / Weathered Stone) instead.
- Don't mix the serif with non-IBM Plex fallbacks in production — the family ties the whole system together.
- Don't tighten section padding below 80px on desktop; the brand depends on generous whitespace to feel considered.
- Don't use drop shadows or glow effects on cards or buttons beyond the subtle 1px bevel on primary buttons.
- Don't justify body text or center long paragraphs — copy stays left-aligned with comfortable measure (≈680px max).
- Don't use the parchment canvas as a card background inside a parchment section; always step up to Pressed Linen for contrast.
Example prompts
Hero section
Case study card
Dark CTA section
# Design System Guide
> Unlock the template to access the full design system.
## Brand voice
A short paragraph describing the brand voice, mood, and visual
principles that anchor the system. Tone, cadence, and intent.
## Colors
| Token | Hex | Role |
| ------------ | -------- | ------------------------------------- |
| canvas-1 | #xxxxxx | Page background, large surfaces |
| canvas-2 | #xxxxxx | Lifted surfaces, cards |
| canvas-3 | #xxxxxx | Inset wells, depressed states |
| ink-1 | #xxxxxx | Primary body text |
| ink-2 | #xxxxxx | Secondary text, labels |
| ink-3 | #xxxxxx | Tertiary text, hints |
| accent-1 | #xxxxxx | Primary brand accent |
| accent-2 | #xxxxxx | Secondary accent |
| state-ok | #xxxxxx | Success, confirmations |
| state-warn | #xxxxxx | Warnings |
| state-err | #xxxxxx | Errors, destructive actions |
## Typography
- **Display** — heading scale, used for hero text and section titles.
- **Body** — primary reading text, optimized for paragraphs.
- **Mono** — code, data, and tabular numerals.
```
display: 32px / 40px / 48px / 64px / 80px
body: 14px / 16px / 18px
mono: 12px / 14px
```
## Spacing & shape
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Radii: sm (4px), md (8px), lg (12px), xl (20px), full (9999px).
## Surfaces
Layered elevation from canvas → lifted → inset. Surfaces invert in
dark sections for full-bleed contrast.
## Do's and don'ts
- Do use accent-1 sparingly for primary CTAs only.
- Do maintain at least 4.5:1 contrast on body text.
- Don't mix display and body in the same line.
- Don't use state colors for branding.
## Agent prompt guide
Prompts for AI design tools that respect this system.
Includes example prompts for sections, components, and layouts.
# ...
Unlock the full style guide