← garden

design system

brand identity, tokens, and components for trămhay

brand

name

trămhay

trăm (hundred) + hay (good) = a hundred good things

typeface

Be Vietnam Pro

vietnamese-optimized geometric sans-serif

colors

background & text

bg
#faf9f4
bg-alt
#f2efe9
text
#2d2a24
text-muted
#8a8578
border
#e2ddd2

accents

green
#7a9e7e
green-light
#c5d9c6
evergreen
#4a7c4e
amber
#c48f5a
terracotta
#b8735a

status colors

seedling #c5d9c6
growing #a3c8a6
blooming #7a9e7e
evergreen #4a7c4e

typography

heading 1

trămhay digital garden

text-3xl font-semibold lowercase
heading 2

~ topic name

text-xl font-semibold lowercase
heading 3 (card title)

entry title

font-medium lowercase
body

bài viết về lịch sử và triết lý của digital garden, nguồn cảm hứng cho trang web này

text-base font-sans
meta / muted

planted 25 may 2025 · tended yesterday

text-sm text-text-muted lowercase

icons

ibm carbon icons — 32px, used at 16-24px in ui

home
tag
launch
calendar
sprout
growth
book
tools
cube
store
document
headphones
video
idea
star
star filled
checkmark
checkmark outline
close
menu
overflow horizontal
caret down
caret right
caret left
caret up
information
arrow up-right
search
favorite
favorite filled
play
pause
link
globe
pen
user
settings
copy
filter
arrow right

components

status indicators

seedling
growing
blooming
evergreen

tag chips

productivity vietnamese design open-source

topic pills

~ sách ~ công cụ ~ đồ vật ~ thương hiệu ~ bài viết ~ nghe ~ xem ~ ý tưởng

garden card

notion

không gian làm việc linh hoạt cho ghi chú, tài liệu, wiki và cơ sở dữ liệu

productivity tools
tended 5 days ago

guidelines

content voice

  • — all titles in lowercase
  • — informality welcome, như đang nói chuyện
  • — vietnamese-first, english terms ok
  • — no marketing speak, no exaggeration

layout rules

  • — max-width 960px homepage, 720px reading
  • — generous whitespace (py-12 minimum)
  • — thin borders, no shadows
  • — 3-col grid → 2-col → 1-col

naming conventions

  • — kebab-case for all files
  • — lowercase component props
  • — topic values in vietnamese
  • — tags in english or vietnamese

linked documents