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 Philosophy
- Minimal
-
Page depth ≤ 3. Dependencies in single digits. No framework where static HTML will do.
If it doesn't serve a purpose, it doesn't exist.
- Warm
-
The palette was refined from my deeply loved character -- 小龙格林, a little dragon.
Warm like the character itself.
- Personal
- Who I am, not what I've done.
Color 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 Styles
Major Third ratio (1.25×). Root font-size is fluid.
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.