philosophy
- lowercase everywhere: titles, labels, navigation
- minimalist: clean, lots of whitespace, warm paper tones
- garden metaphors: seeds, tending, growth stages, garden beds
- vietnamese-friendly: fonts and spacing optimized for diacritics
- non-chronological: organized by topic, not by date
typography
- primary: Be Vietnam Pro (Google Fonts, variable weight 300-700)
- monospace: JetBrains Mono (for code blocks)
- fallback: system-ui, -apple-system, sans-serif
- body: 1rem / 16px, line-height 1.7
- headings: 600-700 weight, lowercase
- why Be Vietnam Pro: designed specifically for Vietnamese text, excellent
diacritic rendering, modern geometric sans-serif
color palette
| token | hex | usage |
|---|---|---|
| ------------------- | ----------- | --------------------------------- |
--color-bg |
#faf9f4 |
main background (warm paper) |
--color-bg-alt |
#f2efe9 |
hover states, alternate bg |
--color-text |
#2d2a24 |
primary text (soft black) |
--color-text-muted |
#8a8578 |
secondary text, meta info |
--color-border |
#e2ddd2 |
dividers, card borders |
--color-green |
#7a9e7e |
primary accent, links, blooming |
--color-green-light |
#c5d9c6 |
seedling status, subtle accents |
--color-evergreen |
#4a7c4e |
evergreen status, strong accent |
--color-amber |
#c48f5a |
warm accent (reserved) |
--color-terracotta |
#b8735a |
warm accent (reserved) |
--color-tag-bg |
#e8e4dc |
tag pill background |
--color-tag-text |
#5a5548 |
tag pill text |
status visual language
| status | dot color | meaning |
|---|---|---|
| ------------ | ----------------- | -------------------- |
| seedling | pale green | just planted |
| growing | medium green | taking root |
| blooming | full green | in full bloom |
| evergreen | deep green | timeless |
layout
- homepage: max 960px, cards in 3-column grid (auto-fill, min 280px)
- entry detail: max 720px (reading width)
- cards: thin border (
1px solid var(--color-border)), rounded-lg, no shadow - spacing: generous padding (py-12 to py-16 on sections)
- responsive: 1 col mobile, 2 cols tablet, 3 cols desktop
icons
- library: IBM Carbon Icons (
@carbon/iconsv11) - size: 32px source, rendered at 10-24px in ui
- usage: navigation, status indicators, topic markers, metadata
- component:
src/components/icon.astro— reusable icon wrapper
icon mapping by context
| context | icon |
|---|---|
| -------------- | --------------------------- |
| home/nav | home, tag, sprout |
| status | sprout, growth, star, star--filled |
| topics | book, tools, cube, store, document, headphones, video, idea |
| metadata | calendar, pen, link, launch |
| actions | caret-right, caret-down, close, menu |
design system page
the /system page serves as a living design system and branding reference. it displays the color palette, typography scale, icon library, and all reusable components. this page is tied to design.md and should be updated whenever new visual patterns are introduced.
responsive breakpoints
- mobile: < 640px — single column, larger touch targets
- tablet: 640-1024px — 2-column grid
- desktop: > 1024px — 3-column grid, max-width containers