DESIGN.md

Auto-synced mirror · last updated 2026-06-09

# ŚUBHAKĀLA — DESIGN SYSTEM
# Single source of truth for all visual decisions.
# Accessible to both Claude.ai chat and Claude Code.
# Update this file whenever a design decision is made.
# Push live via sync_context.py (add design-md page to sync targets).

---

## COLOURS
- Background primary: #2c1000 (deep dark brown) — page backgrounds, hero sections
- Background secondary: #3d1a00 (medium dark brown) — cards, inner sections
- Background tertiary: #1a0800 (darkest brown) — hero, about section footer
- Accent / headings: #c8960c (gold) — all headings, CTAs, links, highlights
- Body text: #FDF6EC (cream) — all body text on dark backgrounds
- Muted text: #FDF6EC99 (cream 60%) — subtitles, captions, metadata
- Devī colour: #13612e (green) — female deity stotrams
- Deva colour: #b82105 (red) — male/mixed stotrams
- Button primary: #c8960c bg, #2c1000 text — filled gold buttons
- Button secondary: transparent bg, #c8960c border + text — outlined buttons
- Button hover (primary): #a67a0a bg, #2c1000 text

## TYPOGRAPHY
- Font: system serif for headings (Georgia/Times fallback), system sans for body
- Hero title (Devanāgarī): 64px+, gold, centered
- Hero subtitle (IAST): 24px, gold, italic, centered
- Page headings (h1): 32px, gold
- Section headings (h2): 22px, gold
- Sub-headings (h3): 18px, gold
- Body text: 16-18px, cream, line-height 1.7
- Metadata/captions: 13-14px, cream 60%
- Labels/eyebrows: 11px, uppercase, letter-spacing 0.1em, gold or cream 60%

## LAYOUT
- Max content width: match hero section width (no narrower containers below hero)
- Border radius: 16-20px for hero/major sections, 12px for cards, 8px for buttons
- Card padding: 20-24px
- Section spacing: 2rem between major sections

## LANGUAGE & TONE
- English only for navigation labels and page UI
- Bilingual (EN + Hindi) only where explicitly designed in (hero tagline, section subheadings where approved)
- No per-page language toggle (global toggle coming later)
- Never say 'free to all' or 'no paywall' — say 'start free' or 'free tier available'
- Preferred terms: 'classical Vedic methods' not 'Swiss Ephemeris', 'Lāhirī ayanāṃśa' for technical contexts
- IAST for transliteration throughout (never simplified romanisation)

## COMPONENTS

### Hero sections
- Full dark brown background (#2c1000 or #1a0800)
- Devanāgarī title large + IAST subtitle italic
- Gold divider line (40px, centered)
- Description text 18px cream
- Two CTA buttons (primary filled + secondary outlined)
- Dynamic date/Tithi/māsa line at bottom in muted cream

### Cards
- Background: #3d1a00
- Border: 1px solid #c8960c33
- Border radius: 12px
- Heading: gold
- Body: cream
- Hover: border brightens to #c8960c66

### Navigation
- Background: #2c1000
- Text: cream #FDF6EC
- Active/current: gold #c8960c
- Logged-in: show first name in gold + avatar indicator, links to /membership-account/
- Logged-out: show 'Login' linking to /login/

### Buttons
- Primary: gold fill (#c8960c), dark text (#2c1000), rounded 24px, padding 10px 20px
- Secondary: transparent, gold border, gold text, rounded 24px
- Hover primary: darker gold (#a67a0a), same dark text
- Never: gold text on gold background (illegible on hover)

### Stotram cards
- Border-top: 3px solid (green for Devī, red for Deva)
- Background: var card background
- Type label: 10px uppercase, colour matches border
- Title: 13px, font-weight 500, cream

### Adhika māsa banner
- Gold border (#c8960c), cream background tint
- Font size 17px, padding 18px 24px
- Only shown during Adhika months — dynamic, auto-removes

## PAGES — BACKGROUND RULES
- Homepage: dark brown throughout, no white sections
- About page: dark brown throughout
- Pañcāṅga pages: light cream background (#FDF6EC) for content area — exception to dark rule
- Stotram pages: light cream background — exception to dark rule
- Account/checkout pages: dark brown
- Login page: dark brown, card max-width 600px centered

## WHAT NOT TO DO
- Never white background on About, Homepage, Account, Login, Muhūrta pages
- Never gold text on gold background
- Never use 'Swiss Ephemeris' in user-facing copy
- Never 'free for all' / 'no paywall' — use 'start free'
- Never per-page language toggles
- Never sharp corners on hero sections (use border-radius: 20px)
- Never stack two identical CTAs (e.g. two 'Today's Pañcāṅga' buttons)

---
Last updated: June 4 2026