```markdown
# Design System Document: The Sacred Horizon

## 1. Overview & Creative North Star
**Creative North Star: "The Celestial Anchor"**

This design system moves away from the "utility-first" clutter of traditional digital clocks. Instead, it adopts a High-End Editorial approach that treats the 1920x1080 canvas as a grand architectural space. The goal is to create a sense of calm, reverence, and absolute clarity. 

By leveraging **intentional asymmetry**, we avoid the rigid, "Excel-sheet" look of standard prayer displays. The layout utilizes "breathing room" (negative space) to draw the eye toward the most critical information—the current time and the upcoming prayer—while secondary data remains elegantly nested in the periphery. This is a system of depth, light, and silence.

---

## 2. Colors
The palette is rooted in the "Masjid Twilight"—a sophisticated blend of deep forest tones and luminous metallic accents.

### Color Tokens
- **Primary (The Living Green):** `#88d982` (Active state/Current prayer)
- **Secondary (The Sacred Gold):** `#e9c349` (Special alerts/Jumu'ah/Highlights)
- **Background (The Void):** `#131313` (The base canvas)
- **Surface Hierarchy:** 
  - `surface_container_low`: `#1c1b1b` (Section backgrounds)
  - `surface_container_highest`: `#353534` (Elevated prayer cards)

### The "No-Line" Rule
Traditional 1px borders are strictly prohibited. Sectioning must be achieved through **background color shifts**. For example, a sidebar for "Upcoming Events" should be defined by a shift from `surface` to `surface_container_low`, rather than a stroke. This ensures the UI feels like a single, cohesive piece of carved stone rather than a digital assembly.

### The "Glass & Gradient" Rule
To add "soul" to the dark theme, use subtle radial gradients on the main clock background (transitioning from `surface` to `primary_container` at 5% opacity). For slideshow overlays, use `surface_variant` at 60% opacity with a `24px` backdrop blur to create a premium "frosted glass" effect.

---

## 3. Typography
We utilize a pairing of **Plus Jakarta Sans** for authority and **Manrope** for functional elegance.

- **The Clock (display-lg):** Plus Jakarta Sans, `3.5rem`. This is the heartbeat of the system. It must be bold and legible from 20 feet away.
- **Prayer Names (headline-lg):** Plus Jakarta Sans, `2rem`. Used for the "Current Prayer" title to command respect.
- **Timings (title-lg):** Manrope, `1.375rem`. Clean, rhythmic numerals that prioritize quick scanning.
- **Labels (label-md):** Manrope, `0.75rem`. Used for secondary metadata (e.g., "Iqamah," "Sunrise").

**Editorial Hint:** Use `letter-spacing: -0.02em` on Display styles to give the typography a custom, "tight" high-fashion feel.

---

## 4. Elevation & Depth
Depth is not communicated via shadows, but through **Tonal Layering**.

- **The Layering Principle:** 
  1. Base Layer: `surface` (The deep background).
  2. Content Zones: `surface_container_low` (Large zones for prayer lists).
  3. Interactive/Active Elements: `surface_container_highest` (The "active" prayer card).
- **The "Ghost Border" Fallback:** If high-sunlight environments require more definition, use the `outline_variant` token at **15% opacity**. Never use 100% opaque lines.
- **Ambient Glow:** Instead of a drop shadow, use a subtle outer glow for the active prayer card using the `primary` color at 10% opacity and a `40px` blur. This simulates the "Nur" (light) of the current time.

---

## 5. Components

### Prayer Time Cards
- **Structure:** Use `Roundedness Scale: xl (0.75rem)`.
- **Styling:** Inactive cards use `surface_container_low`. The active card transitions to `primary_container` with `on_primary_container` text.
- **Spacing:** Use `Spacing Scale: 6 (2rem)` for internal padding to ensure the text has room to breathe.

### Slideshow Overlays (Hadith/Announcements)
- **Styling:** Floating containers using Glassmorphism. 
- **Backdrop:** `surface_variant` @ 70% opacity + `backdrop-filter: blur(12px)`.
- **Layout:** Positioned asymmetrically (e.g., bottom-left) to allow the background imagery to remain visible.

### Status Indicators (Adhan/Iqamah Countdown)
- **Styling:** Use a "Pill" shape (`Roundedness: full`).
- **Colors:** Pulsing `secondary` (Gold) for the 10-minute countdown to Iqamah. This creates urgency without using "Error" reds, which can feel aggressive in a prayer space.

### Lists & Tables
- **Rule:** Forbid divider lines.
- **Execution:** Use `Spacing Scale: 4 (1.4rem)` as a vertical gutter between list items. Use the `surface_container_lowest` for alternating "Zebra" stripes only if the list exceeds 7 items.

---

## 6. Do's and Don'ts

### Do:
- **Prioritize the Clock:** The current time should always be the highest contrast element on the screen.
- **Use "Golden" Accents:** Reserve the `secondary` (Gold) color for the most sacred or time-sensitive information (e.g., Jumu'ah time).
- **Embrace Wide Margins:** Treat the 1080p screen like a gallery wall. Keep a minimum margin of `Spacing: 12 (4rem)` from the screen edges.

### Don't:
- **Avoid Pure White:** Never use `#FFFFFF`. Use `on_surface` (`#e5e2e1`) for text to prevent "light bleed" and eye strain on large TV monitors.
- **No Sharp Corners:** Avoid the `none` or `sm` roundedness tokens. This system should feel organic and welcoming, not clinical.
- **No Center-Alignment Obsession:** Use left-aligned blocks for prayer times to create a sophisticated, asymmetric editorial grid.