Design Tokens

Hệ thống design token của 1thay được quản lý trực tiếp trong Figma và đồng bộ qua MCP. 456 variables · 8 collections.

Brand Colors — 🎨 1color

1tayquen (Teal/Success)

Teal 050

#ECFDF7

Teal 100

#D0FBEA

Teal 200

#A5F5D9

Teal 300

#6BEAC7

Teal 400

#30D7AE

Teal 500

#0BBE98

Teal 600

#019A7C

Teal 700

#017B66

Teal 800

#046152

Teal 900

#044F44

Teal 950

#012D28

1kien (Indigo/Primary)

Indigo 050

#F1F4FF

Indigo 100

#E5E9FF

Indigo 200

#CFD8FF

Indigo 300

#A9B7FF

Indigo 500

#424EFF

Indigo 600 🔗 Accent

#1C1EFF

Indigo 700

#0A0CF7

Indigo 800

#080ACF

Indigo 900

#090AA9

1ghi (Neutral/Surface)

White

#FFFFFF

Gray 050

#F6F7F9

Gray 100

#EDEEF2

Gray 200

#DCDEE6

Gray 300

#BBBFCC

Gray 500

#838799

Gray 700

#545766

Gray 900

#292B35

Gray 950

#11131A

Typography

1thay dùng Hanken Grotesk cho headings và Inter cho body text.

Token	Font Family	Sizes
`font-family/ui`	Inter	10px — 96px
`font-family/brand`	Hanken Grotesk	Headings
`font-family/mono`	Space Grotesk	Numbers, code
`font-family/content`	Merriweather	Long-form reading

Spacing Scale

Hệ thống spacing dựa trên bội số của 4px:

Token	Value	Token	Value
`unit-spacing/0`	0	`unit-spacing/0_5`	2px
`unit-spacing/1`	4px	`unit-spacing/2`	8px
`unit-spacing/3`	12px	`unit-spacing/4`	16px
`unit-spacing/6`	24px	`unit-spacing/8`	32px
`unit-spacing/10`	40px

Cách dùng

/* Dùng semantic token (khuyến nghị) */
background: var(--color-bg-primary);
color: var(--color-text-primary);
border: var(--border) solid var(--color-border-primary);

/* Dùng brand color trực tiếp */
background: var(--color-indigo-600);
color: var(--color-teal-600);

/* Spacing */
padding: var(--space-4);   /* 16px */
gap: var(--space-6);       /* 24px */
border-radius: var(--rounded-lg); /* 8px */