A calm, structured visual system with subtle humor. This page previews the tokens:
colors, type, spacing, buttons, cards, forms, and blog prose.
Typography
Headings
H1 • Calm Temple Energy
H2 • Structured & Airy
H3 • Minimal, Warm
H4 • Subtle Personality
Use display only for headings if you enable an alternate font later.
Body & Utilities
Body text uses ink on a soft light background. It aims to be
readable, friendly, and unpretentious — with whitespace that invites deep breaths.
Muted text reduces emphasis without losing contrast.
Links have a warm marigold accent and a quiet hover shift to teal,
reinforcing the brand’s balanced, human tone.
// Inline code
const hello = "नमस्ते, दुनिया!";
Color Palette
Foundations
bg
surface
ink
The quick brown fox
ink-dim / ink-mute
Dim headline
Muted caption
Warm Accents
marigold-400
marigold-500
terracotta-400
terracotta-500
Balance / Brand
brand-600
brand-700
saffron-100
saffron-200
Tip: keep marigold/terracotta for highlights and buttons; use teal on hover/focus for balance.
Components
Buttons
Cards
Eyebrow
Calm & Structured Card
Use cards for content groupings. Spacing and borders keep things temple-quiet.
Warm Highlight
A subtle saffron wash for callouts or featured notes.
Forms
Prose / Blog
Three Months in South India: Notes from a Quiet Tourist
I came for idli and left with a respect for early mornings. Trains, temples, and
tiny cups of coffee. I’m still learning Hindi (Roman script for now), slowly replacing
panic with polite apologies.
Calm is a layout choice. Whitespace is a blessing. Shoes off, mind open.
A few highlights:
Getting lost near a market and finding the best mangoes of my life.
Writing code between power cuts — shipping anyway.
Realizing “not spicy” is a state of mind.
export function namaste(name = "duniya") {
return `नमस्ते, ${name}!`;
}