Design System Hub

VMS v0.3.0

Release 27/10/2026 · 33 tokens · Bấm vào tên hoặc mã màu để copy.

Màu semantic dùng trong app

TokenMàu
--color-text-default #364153 {color.neutral.700}
--color-text-subtle #99a1af {color.neutral.400}
--color-border-default #d1d5dc {color.neutral.300}
--color-action-primary #f0b100 {color.primary.500}
--color-feedback-error #e7000b {color.red.600}
--color-feedback-success #00a63e {color.green.600}
--color-overlay-default #07101880 {color.base.overlay-50}
--color-overlay-subtle #07101840 {color.base.overlay-25}

Màu primitive chỉ để tham chiếu, app không dùng trực tiếp

primary

500 #f0b100

neutral

300 #d1d5dc
400 #99a1af
700 #364153

red

600 #e7000b

green

600 #00a63e

base

overlay-25 #07101840
overlay-50 #07101880

Typography

Thiết kế đồng nhất cho mọi nền tảng

--typography-screen-titleInter 500 · 16px/24pxApp bar / screen title (Text LG/Medium)

Thiết kế đồng nhất cho mọi nền tảng

--typography-titleInter 500 · 14px/18pxList item and card titles (text-sm/Medium)

Thiết kế đồng nhất cho mọi nền tảng

--typography-subtitleInter 500 · 12px/16pxSecondary emphasized text, counters (Text SM/Medium)

Thiết kế đồng nhất cho mọi nền tảng

--typography-contentInter 400 · 14px/20pxBody text, messages (Text Base/Regular)

Thiết kế đồng nhất cho mọi nền tảng

--typography-sub-contentInter 400 · 12px/16pxSupporting text under content (Text SM/Regular)

Thiết kế đồng nhất cho mọi nền tảng

--typography-captionInter 400 · 10px/12pxSmallest labels such as camera codes (Text XS/Regular)

Layout

16 --layout-screen-paddingHorizontal padding between content (lists, cards) and the screen edge.
8 --layout-list-gapGap between items in a list (event lists use 12).
16 --layout-item-paddingPadding inside a list row, all sides.
12 --layout-card-paddingPadding inside a card.
12 --layout-section-gapGap between content blocks on a screen (popups use 16 before buttons).

Radius

0px --radius-0
4px --radius-4
8px --radius-8
12px --radius-12
16px --radius-16
full --radius-full