HTML Effectiveness

A functional-minimalist reading design system with warm editorial style, featuring classic Serif/San...
Back to Home
01

Visual Theme & Atmosphere

# Design System — "The unreasonable effectiveness of HTML"

Extracted from [thariqs.github.io/html-effectiveness](https://thariqs.github.io/html-effectiveness). A functional-minimalist, content-forward design language with editorial warmth.

---

Live Visual Theme Representation:

Visual Theme Example

02

Color Palette & Roles

primary
#d97757
primary-focus
#b85c3e
canvas
#FAF9F5
surface-card
#FFFFFF
surface-soft
#E3DACC
ink
#141413
body
#3D3D3A
muted
#87867F
hairline
#D1CFC5
03

Typography Rules

Dynamic Preview:
display-xl size: 38px | weight: 500 | height: 1.06 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Page Heading
body-md size: 16px | weight: 400 | height: 1.55 | spacing: 0
The quick brown fox jumps over the lazy dog
Use: Primary Body
04

Layout Principles

Grid Layout Wireframe Mockup:

Layout Grid Example

Layout Wireframe blueprint
1
2
3
4
5
6
7
8
9
10
11
12
Gutter spacing: 16px / 24px
Side Margins: 24px (Mobile) / 48px (Desktop)
Max Container Width: 1200px
05

Depth & Elevation

Elevation Level Showcase:

Elevation Level Example

Flat Surface (Level 0)

Used for background layers, sidebar headers, or baseline borders.

Low Elevation (Level 1 / Card)

Used for floating product elements, cards, and hover states.

High Elevation (Level 2 / Popover & Dropdown)

Used for modals, select menus, code editor tooltips, and overlay headers.

Border Radius & Shape Scale:

radius-sm 4px
radius-md 6px
radius-lg 8px
radius-pill Pill / Tag
06

Component Stylings

Interactive Component Demonstrations:

Component Interactive Example

07

Do's and Don'ts

Do

  • Use warm-tinted neutrals throughout; never pure black or pure gray.
  • Set snappy transitions (120–150ms) for responsive hover states.
  • Rely on borders and spacing to define cards and layouts.

Don't

  • Don't use bold weights above 600.
  • Don't apply drop shadows to static cards or containers.
  • Don't use background blurs, glassmorphism, or mesh gradients.
  • Don't load external fonts; rely strictly on system typography.
✅ Recommended / Do
  • Use warm-tinted neutrals throughout; never pure black or pure gray.
  • Set snappy transitions (120–150ms) for responsive hover states.
  • Rely on borders and spacing to define cards and layouts.
❌ Discouraged / Don't
  • Don't use bold weights above 600.
  • Don't apply drop shadows to static cards or containers.
  • Don't use background blurs, glassmorphism, or mesh gradients.
  • Don't load external fonts; rely strictly on system typography.
08

Responsive Behavior

Responsive Adaptation Note:

Responsive Behavior Example

Interactive Viewport Simulator
Width: 800px (Desktop Mode) Grid Container
Primary Column

Adjusts layout width

Secondary Column

Folds on viewport change

Sidebar Column

Stacks to bottom on mobile

09

Agent Prompt Guide

Copyable Agent Integration Prompt:

Prompt Guide Copy Box

10

Full System Design Tokens

The parsed design tokens extracted from the core stylesheet of this design system:

Design TokenHex ValueSystem Palette Role
--primary#d97757System color representation for primary
--primary-focus#b85c3eSystem color representation for primary-focus
--canvas#FAF9F5System color representation for canvas
--surface-card#FFFFFFSystem color representation for surface-card
--surface-soft#E3DACCSystem color representation for surface-soft
--ink#141413System color representation for ink
--body#3D3D3ASystem color representation for body
--muted#87867FSystem color representation for muted
--hairline#D1CFC5System color representation for hairline