Brand Guidelines
Changelog
v0.5
One breakpoint and fixed headings made mid-size screens awkward.
- Fluid --fs-xl and --fs-lg via clamp() — headings scale smoothly
- Unified breakpoints to 52rem (tablet) and 32rem (mobile)
- Wide track collapses to content below 52rem — no more edge-to-edge
- Grid System section now uses wide track (was full)
v0.4
Larger text needs tighter line-height. Now it does.
- Added per-size line-heights: h1 1.2, h2 1.3, h3 1.4
- Type Styles section now shows line-height for each role
v0.3
Documenting exactly how text looks across the site.
- Added Type Styles section with live-rendered examples
- Replaced emojis with inline SVG icons site-wide
v0.2
Font sizes were too close together. Simplified.
- Merged --fs-sm into --fs-xs (5 sizes instead of 6)
- Fixed 3 hardcoded font sizes to use design tokens
v0.1
Starting point: putting the visual language on paper.
- Color palette with core and accent swatches
- Typography: font pairing and type scale
- Spacing scale and grid system
- Component examples: buttons, pills, cards
Design Principles
- Minimal
- Less is more. No decoration for decoration's sake.
- Fast
- Static HTML, zero unnecessary JS, CDN fonts.
- Warm
- Cream tones, serif fonts, literary voice.
- Bilingual
- Every visible text has English and Chinese.
Color Palette
Core Palette
米白 / Cream
#FAF7F2 --bg Page background
#F3EFE7 Subtle variation
#E4DDD2 Warm border
绿色 / Green
#DDEEE7 --bubble-visual Green background
#A8D7C6 Green accent
#5a8a6e --color-visual Green text
蓝色 / Blue
#D6E6F3 --bubble-ds Blue background
#7FB6DD Blue accent
#5a7a94 --color-ds Blue text
粉色 / Pink
#F0D7D7 --bubble-pm Pink background
#D9797B Pink accent
#9a6868 --color-pm Pink text
灰黑 / Gray–Black
#8A939B Subtle / decorative
#5A636B --text-light Secondary text
#1F2328 --text Primary text
Typography
Font Pairing
EB Garamond
My past is catching up to me.
LXGW WenKai · 霞鹜文楷
兴尽悲来，识盈虚之有数。
Type Scale
Major Third ratio (1.25×). Root font-size is fluid.
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox
Type Styles
Page Title
Section Heading
Subheading
Body text reads like this.
Caption or label
Section Label
Spacing
Fluid scale using clamp(), adapts to viewport width.
--space-xs
clamp(0.5rem, 1vw, 0.75rem)
--space-sm
clamp(0.75rem, 1.5vw, 1.25rem)
--space-md
clamp(1rem, 2vw, 2rem)
--space-lg
clamp(1.5rem, 3vw, 3rem)
--space-xl
clamp(2rem, 5vw, 5rem)
Grid System
Named-line CSS Grid with three content tracks.
full · 100%
wide · 44rem
content · 36rem
Components
Buttons
Filters / Pills
All Free Paid Online
Card / List Item
Sample Item Title A description in secondary text, using --text-light.
Another Item Separated by a subtle 1px border-bottom.