tham khảo

hệ thống thiết kế

mọi component và design token dùng trên trang này. bấm vào bất kỳ khối code nào để sao chép.

màu sắc

nhấn

màu

accent

màu

accent-soft

màu

accent-deep

màu

accent-surface

bề mặt (sáng)

màu

soil

màu

soil-muted

màu

soil-deeper

chữ (sáng)

bark

bark-soft

bark-muted

bề mặt (tối)

màu

night

màu

night-raised

chữ

tiêu đề 1

con cáo nâu nhanh nhẹn

text-4xl md:text-5xl font-bold tracking-tight — inter

tiêu đề 2

con cáo nâu nhanh nhẹn

text-2xl font-semibold — inter

thân (sans)

con cáo nâu nhanh nhẹn nhảy qua con chó lười biếng. chữ thân dùng inter ở 16px với line height thoải mái cho khả năng đọc.

text-base — inter

đọc (serif)

nội dung đọc dài dùng newsreader, một kiểu chữ serif được thiết kế để đọc dài thoải mái. đây là mặc định cho ghi chép trong vườn và bài viết blog.

.prose — newsreader

nhãn phân đoạn

nhãn chữ hoa

.section-label — 12px, 600 weight, 0.06em tracking

huy hiệu tăng trưởng

chỉ mức độ trưởng thành của ghi chép trong vườn.

hạt mầm

<span class="growth-badge growth-seedling">< size={14} /> hạt mầm</span>

nảy mầm

<span class="growth-badge growth-budding">< size={14} /> nảy mầm</span>

thường xanh

<span class="growth-badge growth-evergreen">< size={14} /> thường xanh</span>

thẻ

dùng cho ghi chép vườn, sách, và xem trước nội dung.

thẻ vườn mẫu

hover để thấy hiệu ứng viền và bóng.

<div class="garden-card">...</div>

có huy hiệu

thẻ với huy hiệu tăng trưởng đính kèm.

<div class="garden-card">
  <div class="flex items-start justify-between gap-2">
    <p class="font-semibold">tiêu đề</p>
    <span class="growth-badge growth-budding"><Leaf size={14} /></span>
  </div>
</div>

điều hướng

liên kết nav

liên kết mẫu

<a href="#" class="nav-link">liên kết</a>

danh sách dữ liệu

hiển thị khóa-giá trị cho thông tin và metadata.

nơi ở: việt nam
editor: vs code
theme: tối

<dl class="data-list">
  <dt>nơi ở</dt>
  <dd>việt nam</dd>
  <dt>editor</dt>
  <dd>vs code</dd>
</dl>

nút bấm

<button class="px-5 py-2.5 rounded font-medium bg-accent text-white hover:bg-accent-soft transition-colors">...</button>

ô nhập liệu

<input
  type="email"
  class="px-3 py-2.5 text-sm rounded border bg-transparent focus:outline-none focus:ring-2 focus:ring-accent/30"
/>

phân cách đoạn

mẫu phân cách đoạn chuẩn với nhãn phân đoạn.

<section class="py-8 border-t" style="border-color: oklch(0.15 0.006 85 / 0.1)">
  <p class="section-label">nhãn</p>
  <h2 class="text-xl font-semibold">tiêu đề</h2>
</section>

bố cục trang

<BaseLayout title="trang">
  <div class="max-w-3xl mx-auto px-4 sm:px-6">
    <header class="pt-16 pb-8 md:pt-24 md:pb-12">
      <p class="section-label">danh mục</p>
      <h1 class="text-4xl md:text-5xl font-bold mt-4">tiêu đề trang</h1>
    </header>
    <!-- các đoạn với py-8 border-t -->
  </div>
</BaseLayout>

mọi component trên trang này được hiển thị trực tiếp. bấm vào bất kỳ khối code nào để sao chép markup. design token được định nghĩa trong src/styles/global.css.