Brand Guidelines
Bộ nguyên tắc thiết kế
Mọi UI trong focus.camp đều dựng trên một bộ token cố định bên dưới. Không dùng inline pixel ngoài scale này.
Typography — 3 fonts
Heading
h1 · Tiêu đề trang
Roboto
Body
Body · Nội dung đoạn văn
Arial
Display / Quotes
Trích dẫn đặc biệt — lửa kéo người đến.
Playfair Display
Font sizes — 8 kích cỡ duy nhất
Chỉ dùng các size bên dưới cho mọi text. Không inline pixel khác.
| Token | Px | Dùng cho | Ví dụ |
|---|---|---|---|
--text-3xl | 36px | Landing hero mega | Aa Bb Cc |
--text-2xl | 28px | h1, hero secondary | Aa Bb Cc |
--text-xl | 22px | h2, section header | Aa Bb Cc |
--text-lg | 18px | h3, card title, sidebar active item | Aa Bb Cc |
--text-md | 16px | Button default, leading paragraph, h4 | Aa Bb Cc |
--text-base | 14px | UI default, body standard, button sm | Aa Bb Cc |
--text-sm | 13px | Body small, captions, secondary info | Aa Bb Cc |
--text-xs | 11px | Labels, meta, timestamps, chip badges | Aa Bb Cc |
Font weights — 5 cấp
Aa
Regular · 400
Aa
Medium · 500
Aa
Semibold · 600
Aa
Bold · 700
Aa
Extrabold · 800
Colors — palette
Brand green
var(--brand-green) · Primary CTA, accentsBrand green dark
var(--brand-green-dark) · Hover/activeFire orange
#ff7043 — Manifesto / fire accent only
Text heading
var(--text-heading) · h1-h6, strong textText normal
var(--text-normal) · Body defaultText muted
var(--text-muted) · Labels, hints, metaBG body
var(--bg-body) · Page backgroundBG card
var(--bg-card) · Card/surfaceBG elevated
var(--bg-elevated) · Input, chip, sublayerDanger
var(--danger) · Error, destructiveSuccess
var(--success) · Join / completedWarning
var(--warning) · Alert, pendingSpacing — 4px base
--space-14px--space-28px--space-312px--space-416px--space-520px--space-624px--space-832px--space-1040px--space-1248px--space-1664px--space-2080pxBorder radius
--r-sm
4px
--r-md
8px
--r-lg
10px
--r-xl
14px
--r-2xl
20px
--r-full
full
Nguyên tắc sử dụng
✅Mọi text phải dùng 1 trong 8 size token ở trên.
✅Heading dùng Roboto, body dùng Arial, quote/manifesto dùng Playfair italic.
✅Chỉ 1 accent: brand-green cho mọi CTA. Fire orange CHỈ dùng trong Manifesto.
✅Spacing theo scale 4px (space-1..space-20). Không dùng số lẻ (13px, 17px, 22px…).
❌KHÔNG dùng inline
fontSize: 15 hay padding: 22px.❌KHÔNG pick màu tuỳ tiện — tham chiếu palette trên.