# Design System Document: High-End Editorial for Safety & Recovery (Light Mode Edition) ## 1. Overview & Creative North Star: "The Resilient Sanctuary" This design system rejects the clinical, cold aesthetic often found in safety applications. Instead, it adopts **"The Resilient Sanctuary"** as its Creative North Star, optimized for a bright, airy, and expansive light environment. The goal is to move beyond the "utility" feel of a standard mobile app and provide a digital environment that feels as supportive and high-end as a modern wellness retreat bathed in natural morning light. We achieve this by breaking the rigid, boxy grid of standard UI. We employ **intentional asymmetry**, high-scale typography for clear guidance, and **tonal layering** to create a sense of calm authority. In light mode, this sanctuary becomes an uplifting space that promotes clarity and provides "digital breathing room" during potentially high-stress moments. --- ## 2. Colors: Luminous Clarity The palette is rooted in nature and safety—restorative blues and greens—adapted for a high-end, clean light interface. ### The "No-Line" Rule Standard 1px borders are strictly prohibited for sectioning. They create visual noise and "trap" the user. Instead, boundaries must be defined solely through: 1. **Background Color Shifts:** Use `surface-container-low` sections sitting on a clean, bright `surface` background. 2. **Tonal Transitions:** Define areas by the subtle contrast between light neutral surfaces and slightly elevated containers. ### Surface Hierarchy & Nesting Treat the UI as physical layers of "soft linen" or "frosted glass." - **Base Layer:** `surface` (Light Neutral / #F8FAFC) - **Primary Content Areas:** `surface-container-low` - **Interactive High-Priority Cards:** `surface-container-lowest` - **Overlays/Floating Action Menus:** Glassmorphism using the light `surface` with 70% opacity and a 20px backdrop-blur to maintain a sense of lightness and depth. ### Signature Textures & Gradients To avoid a "flat" or "cheap" feel, main CTAs and Hero sections should utilize a subtle **"Atmospheric Gradient"**: * *Primary CTA:* Linear gradient from `primary` (#4A90E2) to `primary_container` at 135 degrees. * *Recovery Milestones:* Linear gradient from `secondary` (#50C878) to `secondary_container` at 45 degrees. --- ## 3. Typography: Authoritative Clarity The typography system uses a pairing of **Plus Jakarta Sans** for editorial impact and **Inter** for functional readability. * **Display (Plus Jakarta Sans):** Used for encouraging headlines and "moment of success" screens. The large scale (`display-lg`: 3.5rem) creates a premium, magazine-like feel that communicates confidence in a bright, open layout. * **Headline (Plus Jakarta Sans):** Used for section headers. These should often be left-aligned with generous leading to provide an easy entry point for the eye. * **Body & Title (Inter):** Used for all functional content. Inter’s neutral, high-legibility character ensures that safety instructions are never misread. Use `body-lg` (1rem) for most recovery content to ensure high accessibility. * **Label (Inter):** Reserved for metadata and micro-copy. Use `label-md` (0.75rem) in `on_surface_variant` to keep the UI clean and subordinate to main content. --- ## 4. Elevation & Depth: Soft Shadow & Tonal Lift In Light Mode, depth is created through soft shadows and subtle color shifts. ### The Layering Principle Do not use harsh, heavy shadows to separate cards. Instead, use very soft, high-diffusion shadows (Ambient Occlusion style) combined with placing a `surface-container-lowest` card on a slightly deeper `surface-container-low` background. This creates a "natural lift" that feels organic and non-threatening. ### Ambient Glows When an element must "float" (e.g., a Bottom Sheet or a Floating Action Button): * **Blur:** 32px to 48px. * **Opacity:** 5% - 8% shadow density. * **Color:** Use a neutral grey or a very faint tint of the `primary` color to anchor the element without muddying the bright aesthetic. ### The "Ghost Border" Fallback If accessibility testing requires a hard boundary, use a **Ghost Border**: `outline_variant` at **15% opacity**. It should be felt as a subtle edge, not a hard line. --- ## 5. Components: Softness & Intent ### Buttons * **Primary:** Uses the "Atmospheric Gradient" with `xl` (Roundedness 2) roundedness. Padding: `1rem 2rem`. Text: `title-sm` (Inter). * **Secondary:** No fill. `Ghost Border` (15% opacity `outline_variant`) with `on_surface` text. * **States:** On press, the button should scale down to 98% rather than just changing color. ### Cards & Lists (Safety-First) * **Rule:** Forbid divider lines. Use `normal` (Spacing 2) of vertical white space to separate items. * **Cards:** Use `xl` corner radius (Roundedness 2). For emergency features, use a `primary_fixed` background to draw the eye without the "alarmism" of red. ### Input Fields * **Style:** Filled backgrounds (`surface_container`) with no bottom line. * **Corners:** `md` (Roundedness 2) roundedness. * **Error State:** Use `error` text for the label, but keep the input background `error_container` at 15% opacity for a softer, less punishing alert on light backgrounds. ### Special Component: "The Breathing Pulse" For the recovery app context, utilize a pulsing "Home" button or "Check-in" orb using a `primary_container` glow to signify a safe, welcoming space for the user to tap. --- ## 6. Do’s and Don’ts ### Do * **Do** use asymmetrical layouts to guide the eye naturally through the white space. * **Do** prioritize the `surface_container` hierarchy over any line-based decoration. * **Do** use `secondary` (Green) tones for progress and "Safe" states to subconsciously reinforce calm. * **Do** leave at least 24px of padding (Spacing 2/3) on the edges of the mobile screen to ensure content feels "contained." ### Don’t * **Don’t** use pure black (#000000) for body text. Always use `on_surface` (a deep charcoal) to maintain a high-end, editorial feel. * **Don’t** use sharp corners. The minimum corner radius should be `sm`, but the `xl` (Roundedness 2) is the preferred standard for comfort. * **Don’t** use "Alert Red" for everything. Reserve `error` colors for critical safety failures only. * **Don’t** use heavy "Drop Shadows." In light mode, rely on tonal elevation and very soft, large-radius blurs.