Internal

Design System

Visual QA cho mọi component. Không public. Dùng để kiểm tra trước khi build page thật.

1. Colors

Primary
#1E4C6B
Accent
#C9A961
Risk
#B85042
Progress
#1A9379
Governance
#6B4C6E
Charcoal
#2B2B2B
Stone
#D9D2C7
Paper
#FAF8F4

2. Typography

Display 72px

Heading 1 — 48px Fraunces

Heading 2 — 32px Fraunces

Heading 3 — 24px Be Vietnam Pro

Lead — 20px. Đánh giá tuân thủ bền vững tại các tổ chức quy mô lớn.

Body — 17px. Mười chín năm trên sàn nhà máy. Trường hợp ngoại lệ đặc biệt. Kiểm tra stacked diacritics: ề ể ễ ệ ớ ờ ở ỡ ợ ứ ừ ử ữ ự.

Caption — 14px Medium

Micro — 12px Uppercase Tracking

Mono — const hello = "Be Vietnam Pro";

3. Buttons

Variants

Sizes

As link / disabled

Link Button → External Ghost

4. Link

Đây là một đoạn văn bản có internal link và một external link với icon ↗ tự động. Hover để thấy ochre underline expand.

5. Badges

Default Accent Risk Compliance New Overdue

6. Dividers

Line (default)

Stamp variant

Stamp với custom text

7. Callouts

8. Stamp Signature

Hover để thấy rotate 15deg + shadow lift.

9. Section Backgrounds

background="paper" — #FAF8F4

background="stone" — #D9D2C7

background="indigo" — #1E4C6B

10. Container Sizes

narrow — 680px
default — 1280px
wide — 1440px