design tokens
định nghĩa chi tiết toàn bộ token của 1thay design system. file này là nguồn tham chiếu chính khi làm việc với figma, code, và storybook.
phân cấp token
global → dùng chung, không phụ thuộc brand
└─ brand → màu sắc & font của từng brand
└─ semantic → ánh xạ sang mục đích sử dụng
└─ component → nội bộ component
brand palettes
blue-reputa (mặc định)
phát triển từ #064BAE — sắc xanh đậm chuyên nghiệp, phù hợp dashboard tài chính, analytics.
| token |
giá trị |
contrast trên white |
dùng cho |
blue-reputa-900 |
#031f4a |
15.2:1 |
background tối, header |
blue-reputa-800 |
#042e6e |
12.8:1 |
text trên nền sáng |
blue-reputa-700 |
#053c92 |
9.6:1 |
hover state tối |
blue-reputa-600 |
#064BAE |
7.2:1 |
base — nút chính, link, accent |
blue-reputa-400 |
#5798e8 |
3.8:1 |
accent nhẹ, icon |
red-premier
phát triển từ #A10B2E — sắc đỏ đậm sang trọng, phù hợp thương mại điện tử, media.
| token |
giá trị |
contrast trên white |
dùng cho |
red-premier-900 |
#4a0412 |
16.8:1 |
background tối |
red-premier-800 |
#6e081d |
13.3:1 |
text trên nền sáng |
red-premier-700 |
#920b28 |
9.8:1 |
hover state tối |
red-premier-600 |
#A10B2E |
7.0:1 |
base — nút chính, link, accent |
red-premier-400 |
#e8576e |
3.5:1 |
accent nhẹ, icon |
neutral-gray
dải màu xám trung tính, dùng làm bề mặt toàn bộ giao diện.
| token |
giá trị |
dùng cho |
neutral-0 |
#ffffff |
background chính |
neutral-50 |
#f8fafc |
background phụ, row striped |
neutral-100 |
#f1f5f9 |
surface raised, card fill |
neutral-200 |
#e2e8f0 |
border mặc định, divider |
neutral-300 |
#cbd5e1 |
border mạnh, placeholder |
neutral-400 |
#94a3b8 |
text muted, icon phụ |
neutral-500 |
#64748b |
text secondary, caption |
neutral-600 |
#475569 |
body text (nền sáng) |
neutral-700 |
#334155 |
heading text |
neutral-800 |
#1e293b |
text chính (nền sáng) |
neutral-900 |
#0f172a |
text primary, emphasis |
neutral-1000 |
#020617 |
text trên nền rất sáng, shadow |
semantic colors
ánh xạ từ brand palette sang mục đích sử dụng:
| token |
blue-reputa |
red-premier |
dùng cho |
success |
#16a34a |
#16a34a |
thành công, xác nhận |
warning |
#d97706 |
#d97706 |
cảnh báo, chờ |
error |
#dc2626 |
#dc2626 |
lỗi, nguy hiểm |
info |
#2563eb |
#2563eb |
thông tin, trợ giúp |
semantic colors không thay đổi giữa các brand.
surface & text tokens
ánh xạ từ neutral palette cho các bề mặt và văn bản:
surface
| token |
giá trị |
mô tả |
surface-bg |
neutral-0 |
background trang |
surface-dim |
neutral-50 |
background khu vực phụ |
surface-raised |
neutral-0 |
card, modal trên nền dim |
surface-overlay |
neutral-800 |
overlay background (kèm opacity) |
text
| token |
giá trị |
mô tả |
text-primary |
neutral-900 |
text chính |
text-secondary |
neutral-500 |
text phụ |
text-muted |
neutral-400 |
placeholder, hint |
text-inverse |
neutral-0 |
text trên nền tối |
border
| token |
giá trị |
mô tả |
border-default |
neutral-200 |
viền mặc định |
border-strong |
neutral-300 |
viền nổi bật |
typography
font families
| token |
font stack |
mục đích |
font-display |
'Hanken Grotesk', sans-serif |
hero, heading chính |
font-text |
'Inter', sans-serif |
body, ui, label |
font-content |
'Merriweather', serif |
bài viết dài, docs |
font-number |
'Space Grotesk', monospace |
số liệu, metric, bảng |
type scale
| token |
font |
size |
line-height |
weight |
dùng cho |
text-hero |
display |
64px |
1.3 |
700 |
hero section |
text-h1 |
display |
48px |
1.2 |
700 |
heading 1 |
text-h2 |
display |
36px |
1.25 |
700 |
heading 2 |
text-h3 |
display |
28px |
1.3 |
700 |
heading 3 |
text-h4 |
display |
22px |
1.35 |
600 |
heading 4 |
text-body-lg |
text |
18px |
1.6 |
400 |
body lớn, intro |
text-body |
text |
16px |
1.625 |
400 |
body mặc định |
text-body-sm |
text |
14px |
1.5 |
400 |
body nhỏ |
text-ui |
text |
14px |
1.43 |
500 |
button, input, label |
text-ui-sm |
text |
12px |
1.33 |
500 |
caption, badge |
text-content |
content |
17px |
1.7 |
400 |
bài viết dài |
text-number-lg |
number |
36px |
1.2 |
700 |
số liệu lớn (dashboard) |
text-number |
number |
24px |
1.3 |
500 |
số liệu vừa |
text-number-sm |
number |
16px |
1.4 |
500 |
số trong bảng |
font weight
| token |
giá trị |
font-normal |
400 |
font-medium |
500 |
font-semibold |
600 |
font-bold |
700 |
spacing
scale dựa trên bội số của 4.
| token |
giá trị |
dùng cho |
space-xs |
4px |
gap nhỏ, icon-text |
space-sm |
8px |
padding trong component |
space-md |
16px |
padding card, gap section |
space-lg |
24px |
padding page, gap layout |
space-xl |
32px |
section spacing |
space-2xl |
48px |
block spacing |
space-3xl |
64px |
page section, hero |
border radius
| token |
giá trị |
dùng cho |
radius-none |
2px |
input, table cell, divider |
radius-sm |
4px |
button nhỏ, badge, tag |
radius-md |
8px |
button, input, card nhỏ |
radius-lg |
12px |
card, modal |
radius-xl |
16px |
card lớn, hero image |
radius-full |
9999px |
pill, avatar, badge tròn |
border
| token |
giá trị |
mô tả |
border-width |
1px |
viền mặc định |
border-width-md |
2px |
viền vừa (focus ring, active) |
border-width-lg |
4px |
viền dày (accent) |
border-style |
solid |
kiểu viền |
border-style-dashed |
dashed |
viền nét đứt |
border-color |
neutral-200 |
màu viền mặc định |
border-color-strong |
neutral-300 |
màu viền nổi bật |
opacity
| token |
giá trị |
dùng cho |
opacity-disabled |
0.4 |
thành phần bị vô hiệu hóa |
opacity-overlay |
0.5 |
overlay background |
opacity-hover |
0.8 |
hover state |
opacity-pressed |
0.9 |
active/pressed state |
opacity-invisible |
0 |
ẩn hoàn toàn |
shadow
| token |
giá trị |
dùng cho |
shadow-none |
none |
không đổ bóng |
shadow-sm |
0 1px 2px 0 rgba(0,0,0,0.05) |
card resting |
shadow-md |
0 4px 6px -1px rgba(0,0,0,0.1) |
dropdown, tooltip |
shadow-lg |
0 10px 15px -3px rgba(0,0,0,0.1) |
modal, dialog |
shadow-xl |
0 20px 25px -5px rgba(0,0,0,0.15) |
drawer, sheet |
size
icon
| token |
giá trị |
size-icon-sm |
16px |
size-icon-md |
20px |
size-icon-lg |
24px |
size-icon-xl |
32px |
component height
| token |
giá trị |
dùng cho |
size-input-sm |
32px |
input nhỏ |
size-input-md |
40px |
input mặc định |
size-input-lg |
48px |
input lớn |
size-btn-sm |
32px |
button nhỏ |
size-btn-md |
40px |
button mặc định |
size-btn-lg |
48px |
button lớn |
stacking / z-index
| token |
giá trị |
dùng cho |
z-base |
0 |
nội dung mặc định |
z-dropdown |
100 |
dropdown menu, select |
z-sticky |
200 |
sticky header, sticky column |
z-overlay |
300 |
sheet, drawer backdrop |
z-modal |
400 |
modal, dialog |
z-toast |
500 |
toast notification |
z-tooltip |
600 |
tooltip |
component tokens
token dành riêng cho component — không dùng trực tiếp bên ngoài.
button
| token |
giá trị |
btn-primary-bg |
brand-600 |
btn-primary-text |
neutral-0 |
btn-secondary-bg |
neutral-100 |
btn-secondary-text |
neutral-900 |
btn-ghost-bg |
transparent |
btn-ghost-text |
neutral-700 |
btn-destructive-bg |
semantic-error |
btn-destructive-text |
neutral-0 |
btn-font |
font-text |
btn-radius |
radius-md |
btn-px |
space-lg |
btn-h-sm |
size-btn-sm |
btn-h-md |
size-btn-md |
btn-h-lg |
size-btn-lg |
card
| token |
giá trị |
card-bg |
surface-raised |
card-radius |
radius-lg |
card-padding |
space-lg |
card-shadow |
shadow-sm |
card-border |
border-color |
input
| token |
giá trị |
input-bg |
surface-bg |
input-text |
text-primary |
input-placeholder |
text-muted |
input-border |
border-color |
input-border-focus |
brand-600 |
input-radius |
radius-md |
input-px |
space-md |
input-h-sm |
size-input-sm |
input-h-md |
size-input-md |
input-h-lg |
size-input-lg |
input-font |
font-text |
table
| token |
giá trị |
table-header-bg |
neutral-50 |
table-header-text |
text-secondary |
table-row-hover |
neutral-50 |
table-border |
border-color |
table-cell-px |
space-md |
table-cell-py |
space-sm |
table-font |
font-text |
table-number-font |
font-number |
cách dùng trong css
/* global tokens — dùng everywhere */
--space-md: 16px;
--radius-md: 8px;
/* brand tokens — dùng qua theme */
[data-brand="blue-reputa"] {
--color-brand-600: #064BAE;
}
[data-brand="red-premier"] {
--color-brand-600: #A10B2E;
}
/* semantic tokens — tham chiếu brand */
:root {
--color-primary: var(--color-brand-600);
--text-primary: var(--neutral-900);
--surface-bg: var(--neutral-0);
}
/* component tokens — chỉ trong component */
.btn-primary {
background: var(--color-primary);
color: var(--neutral-0);
border-radius: var(--radius-md);
}