---
name: Sacred Serenity
colors:
  surface: '#f8f9ff'
  surface-dim: '#d1dbec'
  surface-bright: '#f8f9ff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#eef4ff'
  surface-container: '#e5eeff'
  surface-container-high: '#dfe9fa'
  surface-container-highest: '#d9e3f4'
  on-surface: '#121c28'
  on-surface-variant: '#404944'
  inverse-surface: '#27313e'
  inverse-on-surface: '#eaf1ff'
  outline: '#707974'
  outline-variant: '#bfc9c3'
  surface-tint: '#2b6954'
  primary: '#003527'
  on-primary: '#ffffff'
  primary-container: '#064e3b'
  on-primary-container: '#80bea6'
  inverse-primary: '#95d3ba'
  secondary: '#5e5e5c'
  on-secondary: '#ffffff'
  secondary-container: '#e1dfdc'
  on-secondary-container: '#636360'
  tertiary: '#735c00'
  on-tertiary: '#ffffff'
  tertiary-container: '#cca72f'
  on-tertiary-container: '#4e3d00'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#b0f0d6'
  primary-fixed-dim: '#95d3ba'
  on-primary-fixed: '#002117'
  on-primary-fixed-variant: '#0b513d'
  secondary-fixed: '#e4e2de'
  secondary-fixed-dim: '#c8c6c3'
  on-secondary-fixed: '#1b1c1a'
  on-secondary-fixed-variant: '#474744'
  tertiary-fixed: '#ffe088'
  tertiary-fixed-dim: '#e9c349'
  on-tertiary-fixed: '#241a00'
  on-tertiary-fixed-variant: '#574500'
  background: '#f8f9ff'
  on-background: '#121c28'
  surface-variant: '#d9e3f4'
typography:
  display-quran:
    fontFamily: Noto Serif
    fontSize: 40px
    fontWeight: '500'
    lineHeight: 72px
  headline-lg:
    fontFamily: Noto Serif
    fontSize: 32px
    fontWeight: '600'
    lineHeight: 40px
  headline-lg-mobile:
    fontFamily: Noto Serif
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  body-reading:
    fontFamily: Source Serif 4
    fontSize: 20px
    fontWeight: '400'
    lineHeight: 36px
  label-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: '500'
    lineHeight: 20px
  caption:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: '400'
    lineHeight: 16px
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 8px
  container-padding: 24px
  gutter: 16px
  section-gap: 40px
---

## Brand & Style
The design system is centered on the concepts of tranquility, reverence, and clarity. It is tailored for a spiritual audience seeking a focused, undistracted environment for recitation and reflection. 

The aesthetic blends **Modern Minimalism** with **Tactile/Skeuomorphic** elements inspired by traditional manuscript illumination. The UI should evoke the feeling of touching high-quality parchment. Heavy whitespace is used to ensure the sacred text remains the focal point, while subtle geometric Islamic patterns provide a culturally resonant texture without cluttering the visual field.

## Colors
The palette is rooted in tradition and ocular comfort. 
- **Primary (Deep Emerald):** Used for key brand moments, headers, and active states. It symbolizes life and peace.
- **Secondary (Parchment):** The foundational surface color. Unlike pure white, this soft cream reduces eye strain during prolonged reading sessions.
- **Tertiary (Gold):** Reserved for highlights, borders of distinction, and decorative accents (Ayah markers, Tajweed rules).
- **Neutral:** A muted charcoal for secondary text and icons, ensuring sufficient contrast against the parchment background.

## Typography
Typography is the core of this design system.
- **Scripture:** The Quranic text uses a high-contrast, Naskh-style serif (Source Serif 4/Noto Serif) to mimic the fluidity of calligraphy. Line heights are exceptionally generous (1.8x - 2.0x) to accommodate vowel marks (Tashkeel) without crowding.
- **Headlines:** Noto Serif provides an authoritative, literary feel for Surah names and section titles.
- **Interface:** Plus Jakarta Sans is used for functional labels and navigation to provide a clean, modern counterpoint to the traditional serif text.

## Layout & Spacing
The layout follows a **Fixed Grid** model on desktop (centered 800px max-width for reading) and a fluid margin model on mobile. 

The rhythm is intentionally slow. Sections are separated by significant vertical gaps to give the user "room to breathe" between Surahs or Juz. Reading views should utilize a "Zen Mode" where margins expand to 10% of the screen width on each side to eliminate peripheral distractions.

## Elevation & Depth
Depth is communicated through **Tonal Layers** rather than aggressive shadows. 
- **Surface 0:** The main parchment background.
- **Surface 1:** A slightly lighter cream or subtle white for cards and floating menus, using a very soft, diffused gold-tinted shadow (Hex: #D4AF37 at 8% opacity).
- **Overlays:** Modals use a backdrop blur to maintain a sense of context while obscuring the underlying text to aid focus.
- **Borders:** Use 1px solid Gold (#D4AF37) for high-importance elements like the active Ayah or a Juz marker.

## Shapes
The shape language is "Softly Geometric." While containers use a standard 0.5rem (8px) radius, decorative elements should incorporate 8-pointed star motifs (Rub el Hizb). 
- **Cards:** Subtle 8px rounded corners to feel modern yet organic.
- **Active Indicators:** Use pill-shaped (rounded-xl) geometry for progress bars and badges to provide a friendly, accessible feel.

## Components
- **Surah Cards:** Features the Surah name in Noto Serif, a subtitle for translation, and a thin Gold (#D4AF37) progress bar at the bottom to indicate reading completion.
- **Ayah Marker:** A stylized 8-pointed geometric shape containing the Ayah number, using the Primary Emerald color for the number.
- **Reading Interface:** A distraction-free toggle that hides all navigation. The background should have a subtle, low-opacity Islamic geometric watermark.
- **Navigation:** Bottom bar icons should be thin-stroke, using the Emerald color for active states and Gray-500 for inactive.
- **Audio Player:** A floating parchment-colored bar with a prominent "Play" button in Emerald.
- **Tajweed Legend:** A bottom drawer using color-coded text labels (Primary for Ikhfa, Gold for Mad, etc.) on a clean cream background.