Design System
Warm Clay Editorial
Tokens, type, spacing and components powering Dastan-e-Rang. Live preview of the current theme as defined in src/styles.css.
Tokens
Semantic colors
background
--background
foreground
--foreground
card
--card
popover
--popover
primary
--primary
secondary
--secondary
muted
--muted
muted-foreground
--muted-foreground
accent
--accent
destructive
--destructive
border
--border
input
--input
ring
--ring
Tokens
Brand palette
ink
--ink
gold (terracotta)
--gold
gold-soft
--gold-soft
gold-deep
--gold-deep
ivory (cream)
--ivory
clay
--clay
clay-soft
--clay-soft
vibrance
--vibrance
Type
Typography
Display · Syne
Every color tells a story.
H1 — Heading display
H2 — Section heading
H3 — Subsection heading
H4 — Card heading
Body · Plus Jakarta Sans
Body copy uses Plus Jakarta Sans — neutral, modern, and quiet enough to let the editorial type carry the voice.
Muted secondary text for captions, metadata, and supporting copy.
Eyebrow · uppercase
Layout
Spacing scale
10.25rem
20.5rem
30.75rem
41rem
61.5rem
82rem
123rem
164rem
246rem
Shape
Radii
sm
md
lg
xl
2xl
full
Components
Buttons
Components
Forms & badges
Default
Secondary
Outline
Destructive
Components
Cards
Editorial card
A surface elevated against the espresso base, edged with a hairline border.
Accent card
Terracotta border and heading for highlighted stories.
Muted card
A quieter surface for supporting modules.
Patterns
Product detail preview
Product imagery
Sana Safinaz
Printed Cotton Suit
PKR 18,500
Breezy summer cotton, digital print. Three-piece unstitched.
Size
Color
Patterns
Header & cart drawer
The site header is rendered at the top of this page. Open the cart drawer to preview the empty and filled states.