Foundations

Tokens

Brand colors

The fixed Amantrika product palette — used for landing, onboarding and admin chrome. Never overridden by themes.

amantrika-maroon

#6B1F2A

amantrika-gold

#C9A227

amantrika-ivory

#FBF6EC

amantrika-henna

#8C4A2F

amantrika-rani

#D63A6A

amantrika-peacock

#14595B

amantrika-ink

#2B1B12

Semantic colors

Every theme overrides only these variables. Switch the theme in the header and watch each swatch flip.

Page background

--color-bg

Card surface

--color-surface

Raised surface

--color-surface-raised

Text

--color-text

Muted text

--color-text-muted

Primary

--color-primary

Accent / gold

--color-accent

Ornate border

--color-border-ornate

Success

--color-success

Error

--color-error

Overlay

--color-overlay

Tonal ramps & gradients

Derived automatically from the semantic tokens with color-mix — every theme gets a full tonal palette and three gradients without defining a single extra value.

primary ramp

primary-soft

primary-tint

primary

primary-strong

accent ramp

accent-soft

accent-tint

accent

accent-strong

gold foil

--gradient-gold

royal depth

--gradient-royal

soft blush wash

--gradient-blush

Typography

Cormorant Garamond for ceremony, Mulish for clarity, Tiro Devanagari and Amiri for scripts.

display-xl

Swarnil weds Prachi

display-lg · italic (verses)

Two souls, one story

Calligraphy — Great Vibes

Swarnil & Prachi

Devanagari display — Rozha One

शुभ विवाह

Devanagari body — Tiro Devanagari Hindi

।। दोनों परिवारों के आशीर्वाद से ।।

Devanagari playful — Yatra One

बधाई हो!

Arabic — Amiri

بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ

Urdu nastaliq — Noto Nastaliq Urdu

دعوتِ نکاح

heading-1With blessings of both familiespage titles

heading-2With blessings of both familiessection titles

heading-3With blessings of both familiescard titles

body-lgWith blessings of both familieslead paragraphs

bodyWith blessings of both familiesdefault UI text

captionWith blessings of both familieshelper text

overlineSave the dateletterspaced labels — "SAVE THE DATE"

Spacing

4px base scale plus ceremonial semantic spacings (card-padding, section-gap, envelope-inset).

1 · 4px

2 · 8px

3 · 12px

4 · 16px

5 · 20px

6 · 24px

8 · 32px

10 · 40px

12 · 48px

16 · 64px

20 · 80px

24 · 96px

Radii & shadows

Including the arch radius for Mughal/temple frames and the gold-glow hover.

sharp

soft

card

arch

pill

card-resting

card-lifted

gold-glow

envelope-depth

Motifs & ornaments

Inline SVGs inheriting currentColor — themes recolor them freely. Click to copy the import.

Motion

Durations, easings and the eight named presets. All presets no-op under prefers-reduced-motion.

Preset	Duration	Easing
envelope-open	grand · 1200ms	silk
card-slide-out	grand · 1200ms	silk
seal-break	ceremonial · 600ms	silk
curtain-reveal	grand · 1200ms	silk
petal-fall	7–14s loop	linear
diya-flicker	2.2s loop	ease-in-out
shimmer-gold	2.4s	silk
fade-up-stagger	ceremonial · 600ms	silk

Tokens: instant 100ms · quick 200ms · ceremonial 600ms · grand 1200ms — ease-silk cubic-bezier(0.22, 1, 0.36, 1)

card

envelope-open

card

card-slide-out

seal-break

card

curtain-reveal

card

petal-fall

diya-flicker

Swarnil weds Prachi

shimmer-gold

card

fade-up-stagger

card

bounce-in

card

rotate-in

card

flip-reveal

card

zoom-bloom

card

swing-hang

card

float-loop

card

heartbeat

card

sparkle-pop

card

thread-draw

card

garland-sway

card

slide-in-left

card

slide-in-right