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.

01

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

02

Typography

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

TokenSpecSample
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

03

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

04

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)

05

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

06

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

Status checkpoint

  • Light mode tokens: verbatim dari DESIGN.md.
  • Dark mode tokens: derived menggunakan inverse-* hint + Material 3 dark scheme convention. Iterate kalau Stitch ship dark export.
  • Status colors (success / warning / info) tidak ada di DESIGN.md → diturunkan sendiri dari palette teal / peach / Material 3. Approve atau adjust.