Token Probe — Design Token Audit

Brand

primary (#e7000b)

primary-light

primary-alpha-30

Background

bg-deepest

bg-dark (#0f172b)

bg-card

bg-secondary

bg-surface

bg-base

Text

text-primary-fg (#ffffff)

text-muted

text-subtle

text-dark

Border

border-default

border-light

Success

success

success-light

success-bg

success-alpha-20

Overlay

overlay-dark

overlay-card

overlay-black-60

overlay-black-80

Font Sizes

text-xs (12px)

text-sm (14px)

text-base (16px)

text-lg (18px)

text-xl (20px)

text-2xl (24px)

text-4xl (36px)

text-hero (96px)

Spacing (p-space-, gap-space-)

space-1 (4px)

space-2 (8px)

space-3 (12px)

space-4 (16px)

space-5 (20px)

space-6 (24px)

space-8 (32px)

space-12 (48px)

Border Radius

rounded-sm (6px)

rounded-md (10px)

rounded-lg (14px)

rounded-xl (20px)

rounded-full

Component Demo — NiuButton Wrapper Pattern (US2)

Animation Demo (US3) — Framer Motion + Lottie + GSAP

✓ fadeInUp preset loaded

✓ staggerContainer preset loaded

✓ fadeIn preset loaded

✓ slideInLeft preset loaded

✓ scaleIn preset loaded

✓ lottie-react — autoplay=true(pauses when prefers-reduced-motion)

✓ gsap — from() animation with context.revert() cleanup(skips when prefers-reduced-motion)

NiuStepSlider — step dots (008-calculate-installments)

4-step · displayValue override · unit="%"

เลือกเงินดาวน์฿6,900

10%

15%

20%

4-step · labelUnit="" (no unit in labels) · unit=" เดือน"

เลือกระยะเวลาผ่อนชำระ30 เดือน

3-step · value=0 (no fill)

เลือกเงินดาวน์0

10%

15%

disabled state

เลือกเงินดาวน์15%

10%

15%

20%

Token Probe — Design Token Audit

Brand

Background

Text

Border

Success

Overlay

Font Sizes

Spacing (p-space-, gap-space-)

Border Radius

Component Demo — NiuButton Wrapper Pattern (US2)

Animation Demo (US3) — Framer Motion + Lottie + GSAP

NiuStepSlider — step dots (008-calculate-installments)

ui-niu Primitives — Checkbox / RadioOption / TextField / Dropdown / StoreSelector / ColorSwatch

NiuCheckbox

NiuRadioOption / NiuRadioGroup

NiuTextField

NiuDropdown

NiuStoreSelector / NiuStoreGroup

NiuColorSwatch

Token Probe — Design Token Audit

Brand

Background

Text

Border

Success

Overlay

Font Sizes

Spacing (p-space-*, gap-space-*)

Border Radius

Component Demo — NiuButton Wrapper Pattern (US2)

Animation Demo (US3) — Framer Motion + Lottie + GSAP

NiuStepSlider — step dots (008-calculate-installments)

ui-niu Primitives — Checkbox / RadioOption / TextField / Dropdown / StoreSelector / ColorSwatch

NiuCheckbox

NiuRadioOption / NiuRadioGroup

NiuTextField

NiuDropdown

NiuStoreSelector / NiuStoreGroup

NiuColorSwatch

Spacing (p-space-, gap-space-)