A functional-minimalist, content-forward design language with editorial warmth. Extracted from thariqs.github.io/html-effectiveness. Warm neutrals, serif headings, mono metadata, and subtle delight — all in a single self-contained file.
Use serif for headings, sans for body, mono for metadata — three fonts, clear roles.
Warm neutrals only — ivory, paper, oat. Never pure white or pure black.
Single accent color (clay) used sparingly. Olive is a cool counterpoint for diagrams.
Generous whitespace. Content breathes. Borders are thin (1.5px) and warm.
Subtle delight: gentle rotations, hover lifts, fast transitions. Never gaudy.
No bold weights above 600 — use weight 500 for emphasis.
No box shadows on static elements — only on hover or depth-establishing moments.
No background blur, glassmorphism, or gradient backgrounds.
No opacity-based hover states — shift color or position instead.
No external fonts, icon libraries, or CSS frameworks. Fully self-contained.
| Token | Hex | Role |
|---|---|---|
| --ivory | #FAF9F5 | Page background |
| --paper | #FFFFFF | Card / surface background |
| --slate | #141413 | Primary text (near-black) |
| --clay | #D97757 | Primary accent, links, highlights |
| --clay-d | #B85C3E | Darker accent (hover variant) |
| --oat | #E3DACC | Secondary surface, decorative |
| --olive | #788C5D | Secondary accent (diagrams only) |
| --g100 | #F0EEE6 | Light surface, thumbnail bg |
| --g200 | #E6E3DA | Light border |
| --g300 | #D1CFC5 | Default border |
| --g500 | #87867F | Secondary / muted text |
| --g700 | #3D3D3A | Body text |
This is .intro body copy — 16.5px sans on g700. Twenty self-contained files an agent produced instead of a wall of markdown.
This is .sec-intro — 14.5px sans, used for section descriptions. Slightly smaller, still highly readable.
This is .desc — 13.5px sans, used for card body text at 1.5 line-height.
| Token | Font Stack |
|---|---|
| --serif | ui-serif, Georgia, "Times New Roman", Times, serif |
| --sans | system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif |
| --mono | ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace |
| Element | Font | Size | Weight | Line-height | Letter-spacing |
|---|---|---|---|---|---|
| h1 | serif | clamp(38px, 5.4vw, 62px) | 500 | 1.06 | -0.018em |
| h1 em | serif | inherit | italic | — | — |
| h2 | serif | 27px | 500 | — | -0.012em |
| .intro | sans | 16.5px | 400 | 1.55 | — |
| .sec-intro | sans | 14.5px | 400 | 1.55 | — |
| .title (card) | serif | 19px | 500 | 1.22 | -0.008em |
| .desc (card) | sans | 13.5px | 400 | 1.5 | — |
| .eyebrow | mono | 12px | 400 | — | 0.12em |
| .file | mono | 11px | 400 | — | — |
| .idx | mono | 13px | 600 | — | — |
| nav.toc a | sans | 12.5px | 400 | — | — |
| .tag | mono | 9.5px | 400 | — | 0.08em |
| Token | Value | Usage |
|---|---|---|
| max-width | 1120px | .wrap container |
| h-padding | 32px | .wrap left/right |
| b-padding | 140px | .wrap bottom |
| section gap | 72px | margin-top between sections |
| card gap | 20px | grid gap between cards |
| card body | 18px 20px 16px | internal card padding |
| nav pill | 7px 14px | toc link internal padding |
| sec-head gap | 16px | flex gap in section header |
| sec indent | 50px | left margin on .spec-block / .grid / .sec-intro |
| Element | Border | Border-radius |
|---|---|---|
| Cards | 1.5px solid g300 | 14px |
| Hero panes | 1.5px solid g300 | 10px |
| Tags / badges | 1.5px solid g300 | 6px |
| Nav pills | 1.5px solid g300 | 999px (fully rounded) |
| Count badges | none | 999px (fully rounded) |
| Code blocks / pre | 1.5px solid g300 | 10px |
| SVG rects | varies | 3–5px |
| Section dividers | 1.5px solid g300 (border-bottom) | — |
Rule: Every border in the system is 1.5px. Never thicker, never thinner. This consistency is a defining characteristic. Border colors shift contextually (g300 default, g200 light, slate for emphasis/hover).
| Context | Value |
|---|---|
| Card hover | 0 10px 30px rgba(20, 20, 19, 0.10) |
| Hero HTML pane | 0 12px 32px rgba(20, 20, 19, 0.10) |
Shadows are used only on hover or to establish depth hierarchy. Static cards have no shadow — the border alone defines them. Shadows are always warm-tinted (slate-based) with subtle 0.10 opacity.
| Pattern | CSS | Notes |
|---|---|---|
| Page wrapper | max-width: 1120px; margin: 0 auto; padding: 0 32px 140px |
Generous bottom padding |
| Card grid | grid-template-columns: repeat(auto-fill, minmax(316px, 1fr)); gap: 20px |
Fluid, no breakpoints needed |
| Hero grid | grid-template-columns: 1fr 340px; gap: 48px |
Stacks at 880px |
| Section layout | sec-head (flex row) → sec-intro → grid (50px left indent) | Indent drops at 640px |
| Nav (TOC) | display: flex; flex-wrap: wrap; gap: 8px |
Pills wrap naturally |
| Footer | display: flex; justify-content: space-between; flex-wrap: wrap |
Two sections, stacks on narrow |
| Breakpoint | Behavior |
|---|---|
| 880px | Hero grid stacks to single column |
| 640px | Section intro + card grid lose 50px left indent |
Card (static)
Navigation Pills
Section Header
Eyebrow
| Element | Properties | Duration | Easing |
|---|---|---|---|
| Nav pills | border-color, color, background | 120ms | ease (default) |
| Cards | transform, box-shadow, border-color | 150ms | ease |
| Card thumb bg | background | 150ms | ease |
| Card arrow | transform (translateX 3px) | 150ms | ease |
| Page scroll | scroll-behavior | — | smooth |
Rule: Transitions are fast (120–150ms) and snappy. No opacity fades — changes are positional or color-shift based. The card hover lift (3px translateY) combined with shadow and border-color change creates a subtle-but-clear interactive signal.
Content-heavy documentation, portfolios, blogs, companion pages, technical writing
Projects that value self-contained single-file HTML with zero dependencies
Interfaces where readability and scanability are the primary goals
Data-dense dashboards, complex forms, real-time apps
Projects requiring dark mode (no dark palette defined)
Brand work that needs loud, high-energy visual language
| Avoid | Use Instead |
|---|---|
| Pure black (#000) or pure gray | Warm-tinted neutrals (slate, g700, g500) |
| Bold weights above 600 | Weight 500 for emphasis |
| Box shadows on static elements | Borders only; shadows reserved for hover/depth |
| Background blur / glassmorphism | Solid paper or g100 backgrounds |
| Gradient backgrounds | Solid colors (one exception: hero SVG decorative) |
| Border-radius above 14px (except pills) | 14px max for cards; 999px only for pill-shaped elements |
| Animations over 150ms | 120-150ms snappy transitions |
| External font loads (Google Fonts, etc.) | System font stacks (ui-serif, system-ui, ui-monospace) |
| Icon libraries (Font Awesome, Lucide, etc.) | Inline SVG using design tokens |
| CSS frameworks (Tailwind, Bootstrap, etc.) | Hand-rolled CSS with custom properties |
| Opacity-based hover states | Color shifts or positional changes |