Foundation · 01

Design Tokens Preview

Halaman ini auto-generated dari packages/tokens (parser DESIGN.md). Toggle Terang / Gelap / Sistem di kanan atas untuk verifikasi dark mode.

Source of truth

Shopey UI Kit · Soft Material 3

Halaman ini auto-generated dari packages/tokens yang mem-parse docs/design/stich-export/token/DESIGN.md. Toggle Terang / Gelap / Sistem di kanan atas untuk verifikasi dark mode. Setiap token punya swatch, kode hex, dan nama variabel CSS-nya — tinggal copy.

Color palette

Material 3 inspired — Deep Teal anchor, Peach accent, mint surface. Token name = on-surface variant.

Surfaces

background#f7faf7--color-background

surface#f7faf7--color-surface

surface-container-lowest#ffffff--color-surface-container-lowest

surface-container-low#f1f4f1--color-surface-container-low

surface-container#ebefec--color-surface-container

surface-container-high#e5e9e6--color-surface-container-high

surface-container-highest#e0e3e0--color-surface-container-highest

surface-variant#e0e3e0--color-surface-variant

Ink (text on surface)

on-background#181c1b--color-on-background

on-surface#181c1b--color-on-surface

on-surface-variant#3e4945--color-on-surface-variant

outline#6e7975--color-outline

outline-variant#bec9c4--color-outline-variant

Primary — Deep Teal

primary#005344--color-primary

on-primary#ffffff--color-on-primary

primary-container#006d5b--color-primary-container

on-primary-container#96ebd5--color-on-primary-container

inverse-primary#81d6c0--color-inverse-primary

Secondary — Peach Salmon

secondary#7b5549--color-secondary

on-secondary#ffffff--color-on-secondary

secondary-container#ffccbc--color-secondary-container

on-secondary-container#7a5448--color-on-secondary-container

Tertiary

tertiary#763527--color-tertiary

on-tertiary#ffffff--color-on-tertiary

tertiary-container#934c3c--color-tertiary-container

on-tertiary-container#ffd1c7--color-on-tertiary-container

Error

error#ba1a1a--color-error

on-error#ffffff--color-on-error

error-container#ffdad6--color-error-container

on-error-container#93000a--color-on-error-container

Typography

Plus Jakarta Sans family. Display for headlines, Sans for body, Mono untuk request_id / hash.

Token	Spec	Sample
`text-display-lg`	32px / 700 / lh 1.2 / -0.02em	Modern Shopping
`text-display-lg-mobile`	26px / 700 / lh 1.2 / -0.02em	Modern Shopping (mobile)
`text-headline-md`	24px / 700 / lh 1.3	Recent Transactions
`text-title-sm`	18px / 600 / lh 1.4	Wallet Balance
`text-body-rg`	16px / 400 / lh 1.6	Find your awesome experience while shopping by your phone.
`text-label-md`	14px / 500 / lh 1.4	Dashboard
`text-caption-xs`	12px / 400 / lh 1.4	Verified Member since 2021

Spacing

Canonical spacing tokens dari DESIGN.md (container-margin, gutter, section-gap, card-padding).

element-gap-sm8px

element-gap-md16px

card-padding24px

gutter24px

container-margin32px

section-gap40px

Radius

Generous Curvature — pill buttons (full), cards 24px (xl), inputs 12px (md).

sm

0.25rem

rounded-sm

DEFAULT

0.5rem

rounded

md

0.75rem

rounded-md

lg

1rem

rounded-lg

xl

1.5rem

rounded-xl (cards)

full

9999px

rounded-full (pills)

Elevation

Tonal Layering + ambient shadows. z-1 cards, z-2 overlays, z-3 modals.

z-0

shadow-z-0

Background

z-1

shadow-z-1

Cards & resting elements

z-2

shadow-z-2

Overlays & active state

z-3

shadow-z-3

Modals & elevated drawers

Status chips

Semantic color pairing — success / warning / error / info. Dipakai untuk order state, payment state, dll.

SUCCESSPENDINGINFOFAILEDDRAFT

SUCCESSOrder paid / fulfillment OK
PENDINGAwaiting webhook / processing
INFOInformational state
FAILEDProvider error / declined
DRAFTDefault / inactive state