Design system · thành phần

‹ Trước69 / 71 · Design system · thành phầnSau ›

Nền tảng FoundationsTên token là “hợp đồng” giữa thiết kế và code (tokens.json). Mã màu chỉ để tham khảo.

Token màu Color tokens

color.bg.canvas#FCF7F4 · --cream · Nền app (cream)
trên cream 1.0:1 · trên trắng 1.1:1

color.bg.surface#FFFFFF · --white · Thẻ, ô nhập
trên cream 1.1:1 · trên trắng 1.0:1

color.bg.selected#F4E3DD · --blush · Dòng đã chọn, ghi chú, viền focus
trên cream 1.2:1 · trên trắng 1.2:1

color.bg.accent#E7CFC4 · --nude · Avatar, dải chờ khô
trên cream 1.4:1 · trên trắng 1.5:1

color.bg.disabled#EADFDB · --disbg · Nút / ô bị khóa
trên cream 1.2:1 · trên trắng 1.3:1

color.border.hairline#E9DAD3 · --line · Đường kẻ, viền thẻ
trên cream 1.3:1 · trên trắng 1.4:1

color.border.control#9A8285 · --ctl · Viền ô nhập, nút chưa chọn
trên cream 3.3:1 · trên trắng 3.6:1

color.primary#6E2A3F · --plum · Màu hành động duy nhất
trên cream 9.6:1 · trên trắng 10.2:1

color.primary.pressed#561F31 · --plum7 · Nút chính khi nhấn
trên cream 12.1:1 · trên trắng 12.8:1

color.on.primary#FFFFFF · #fff · Chữ trên nền chính
trên cream 1.1:1 · trên trắng 1.0:1

color.text.primary#2B1F22 · --ink · Chữ chính
trên cream 14.9:1 · trên trắng 15.9:1

color.text.secondary#6B5558 · --muted · Chữ phụ
trên cream 6.4:1 · trên trắng 6.9:1

color.text.disabled#7A6A6C · --distx · Chữ bị khóa
trên cream 4.8:1 · trên trắng 5.1:1

color.status.success#3E6B56 · --sage · Đã xác nhận, Đã đến
trên cream 5.7:1 · trên trắng 6.1:1

color.status.error#A3363A · --err · Lỗi, nguy cơ không đến
trên cream 6.3:1 · trên trắng 6.7:1

color.decor.rose#B5655F · --rose · Chỉ trang trí, không dùng cho chữ
trên cream 4.0:1 · trên trắng 4.2:1

Cỡ chữ · font hệ thống Type scale · system font

font.family.system = SF Pro (iOS) / Roboto (Android). Inter chỉ dùng để render. Không serif, không nghiêng.

type.display	Đặt lịch	24/29 · 700 · -0.3	Tiêu đề lớn, màn hình thành công
type.title	Đặt lịch	22/28 · 600 · -0.2	Tiêu đề màn hình
type.headline	Đặt lịch	17/22 · 700 · -0.2	Tiêu đề thẻ, tên khách
type.body	Đặt lịch	15/20 · 400	Nội dung, nút chính (600)
type.callout	Đặt lịch	13.5/18 · 600	Tên dịch vụ, mục danh sách
type.subhead	Đặt lịch	12.5/17 · 400	Dòng phụ, chip
type.caption	Đặt lịch	11/15 · 400	Chú thích, chữ nhỏ pháp lý
type.overline	Đặt lịch	10/14 · 700 · 1.2	NHÃN NHÓM (chữ in hoa)
type.price	$45.00	15.5/20 · 600	$45 · số canh đều

type.ipad · iPad (chủ tiệm): chữ chính 13/18, tiêu đề thẻ 15/700, tên hàng chờ 13.5/700, khối lịch 12.5 · 10.5 · 9.5

type.kiosk · Kiosk & iPad cho khách (×1.6–1.8): tiêu đề 40/45, lớn 56, nội dung 18/26, nút 22/700, ô nhập 24

Khoảng cách Spacing

Lề điện thoại 18 · đệm thẻ iPad 12 · lề kiosk 36 · vùng chạm ≥ 44 (kiosk ≥ 64).

Bo góc · viền · focus Radii · borders · focus

5
Nhãn

6
Ô chọn

12
Ô nhập, dòng

16
Thẻ

22
Ô kiosk

xxl

28
Hero, nút kiosk

pill

999
Nút, chip, khung giờ

border.width 1 · 1.5 · 2 · focus.ring 2px primary + 3px bg.selected · không đổ bóng

Thành phần điều khiển ControlsHiển thị ở cỡ app khách; kiosk và iPad cho khách dùng cùng thành phần, phóng ×1.6–1.8.

Nút Buttons

Chính

Đặt lịch

Đang nhấn

Đặt lịch

Bị khóa

Đặt lịch

Phụ

Đổi lịch

Focus

Tiếp tục

Liên kết

Thêm vào lịch

button.primary bg color.primary · text color.on.primary · radius.pill · 15/600 · mỗi màn hình 1 nút chính

Chip & nhãn Chips & tags

Chip

Làm chân

Đã chọn

Làm tay

Lọc có số

Không đến 7

Bắt buộc

Tùy chọn

Cọc

Cần cọc

chip radius.pill · border color.border.control · selected = color.primary · tag radius.xs · type.overline

Ô nhập Inputs

Mặc định

Số điện thoại

Focus

(555) 404-77|

Lỗi

(555) 404-77

! Nhập đủ 10 số

Bị khóa

Visa •• 4242

input radius.m · border 1px control → focus 2px primary + 3px halo · error 2px status.error + câu báo lỗi có “!”

Ô chọn · radio · công tắc · nút chọn Checkbox · radio · toggle · segmented

Chưa chọn

Đã chọn

✓

Focus

✓

Lỗi

Khóa

Radio

Radio chọn

Tắt

Bật

EN | VI

EN VI

Ô đồng ý (SMS, khuyến mãi) là tùy chọn và không bao giờ chọn sẵn; ô chính sách bắt buộc có nhãn “Bắt buộc”.

Dòng dịch vụ Service row

MẶC ĐỊNH

Làm chân Deluxe

50 phút

$45

ĐÃ CHỌN

✓

Làm tay sơn gel (Shellac)

45 phút

$40

CÓ CỌC

Full set Gel-X Cần cọc

75 phút

$65+

serviceRow radius.m · selected bg.selected + border primary + ✓

Khung giờ Time slot

10:30

1:00

2:00

Còn trống

Đã chọn

Hết chỗ

timeSlot radius.pill · full = dashed + line-through + text.disabled (không chỉ dựa vào màu)

Lịch hẹn & điều hướng Scheduling & navigationThành phần iPad chủ tiệm ở cỡ thật.

Trạng thái khối lịch Appointment block states

Đã xác nhận

✓Jessica M.Đã lưu thẻ

Gel Mani + Deluxe Pedi

Đã xác nhận

appointmentBlock.confirmed

Chưa xác nhận

?Hannah

Classic Manicure

Chưa xác nhận

unconfirmed · dashed

Nguy cơ không đến

!Nina P.2 lần không đến

Acrylic Fill

Nguy cơ không đến

noShowRisk · 2px error + edge

Đã đến

→Sarah L.Kiosk 11:38

Dip Powder Full Set

Đã đến

arrived · 2px success + edge

Đang làm

▶MaiWalk-in

Gel Manicure

Đang làm

inProgress · filled primary

Xong

✓Linda H.

Deluxe Pedicure

Xong

done · faded hairline

Thời gian chờ

Chờ khô · 20 phút

processing · chờ khô (Dip) / hơ đèn (Gel-X)

Trạng thái = icon + kiểu viền + chữ, không chỉ dựa vào màu. “Đã đến” mới ở v0.5 (check-in ở kiosk hoặc quầy).

Thẻ hàng chờ walk-in Walk-in queue card

Thợ rảnh kế tiếp

Lily P. · đang rảnh

Rảnh đến 1:00 chiều · 2 lượt

Khách đang chờ

1. Emily chờ 12 phút

Gel Manicure (Shellac) · 45m

Giao cho LilyChọn thợ

Từ kiosk

3. Sophie T. vừa xong

Kiosk Classic Manicure · 30m

☏ Không nhận tin: gọi tên

walkInQueueCard next = bg.selected + 1px primary · item radius.l · kiosk = dashed + ink “Kiosk” tag

Điều hướng Navigation

THANH TAB KHÁCH

Đặt lịch Lịch hẹn Cá nhân

THANH BÊN IPAD (CHỦ TIỆM)

BƯỚC KIOSK · 80%

1 · Số điện thoại

2 · Xác nhận

3 · Xong

Mục đang chọn = color.primary + bg.selected (thanh bên) hoặc vạch 4px (thanh tab). Luôn có chữ, không chỉ icon.

Token nằm trong tokens.json. Thành phần hiện kèm các trạng thái.