Home / Typography & Color
Chapter 05 · 13 entries

Type & Color.

Typography and color are the DNA of a brand's visual identity. They communicate personality before a single word is read.

5.1
Type Scale & Hierarchy
Mathematically related font sizes. clamp() for fluid scaling.
View demo
5.2
Font Pairing
Two complementary fonts. Clash Display + Satoshi from Fontshare.
View demo
5.3
60-30-10 Rule
Dominant, secondary, accent — a simple color distribution formula.
View demo
5.4
Gradient Text
background-clip:text. The Vercel/AI website headline treatment.
View demo
5.5
Display / Hero Typography
Text itself becomes the design. No image needed.
View demo
5.6
Dark / Light Mode Toggle
CSS custom properties + localStorage + prefers-color-scheme.
View demo
5.7
Variable Font Sliders
Live-morph weight, slant, casual, mono axes. Powered by Recursive.
View demo
5.8
Outline / Stroke Text
Hollow type. Hover to fill. Plus chromatic offset variant.
View demo
5.9
Marker Highlight
Yellow marker stripe behind key words + hand-drawn strike + circle annotations.
View demo
5.10
3D Layered Shadow
Stacked text-shadows for extruded type. Plus long-shadow, neon, embossed variants.
View demo
5.11
Animated Gradient Text
Gradient flows through letters forever. The Apple Intelligence / OpenAI look.
View demo
5.12
Mix-blend Text
One text element auto-inverts against any background. 6 blend modes to try.
View demo
5.13
Color Palette Explorer
5 curated palettes, click swatches to copy hex, live UI mockup re-themes.
View demo