---
name: Secure Recovery System
colors:
  surface: '#fcf8f8'
  surface-dim: '#dcd9d9'
  surface-bright: '#fcf8f8'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f6f3f2'
  surface-container: '#f0edec'
  surface-container-high: '#ebe7e7'
  surface-container-highest: '#e5e2e1'
  on-surface: '#1c1b1b'
  on-surface-variant: '#5c3f3f'
  inverse-surface: '#313030'
  inverse-on-surface: '#f3f0ef'
  outline: '#916f6e'
  outline-variant: '#e6bdbc'
  surface-tint: '#bf0030'
  primary: '#b1002c'
  on-primary: '#ffffff'
  primary-container: '#dc143c'
  on-primary-container: '#fff1f0'
  inverse-primary: '#ffb3b3'
  secondary: '#495f84'
  on-secondary: '#ffffff'
  secondary-container: '#bcd2fe'
  on-secondary-container: '#445a7f'
  tertiary: '#aa193d'
  on-tertiary: '#ffffff'
  tertiary-container: '#cc3554'
  on-tertiary-container: '#fff1f1'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#ffdad9'
  primary-fixed-dim: '#ffb3b3'
  on-primary-fixed: '#40000a'
  on-primary-fixed-variant: '#920022'
  secondary-fixed: '#d6e3ff'
  secondary-fixed-dim: '#b1c7f2'
  on-secondary-fixed: '#001b3d'
  on-secondary-fixed-variant: '#31476b'
  tertiary-fixed: '#ffdadc'
  tertiary-fixed-dim: '#ffb2b9'
  on-tertiary-fixed: '#400010'
  on-tertiary-fixed-variant: '#91002e'
  background: '#fcf8f8'
  on-background: '#1c1b1b'
  surface-variant: '#e5e2e1'
typography:
  display-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 48px
    fontWeight: '800'
    lineHeight: '1.1'
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 32px
    fontWeight: '700'
    lineHeight: '1.2'
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 24px
    fontWeight: '700'
    lineHeight: '1.3'
  body-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  label-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 14px
    fontWeight: '600'
    lineHeight: '1.4'
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Plus Jakarta Sans
    fontSize: 12px
    fontWeight: '600'
    lineHeight: '1.4'
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  base: 8px
  xs: 4px
  sm: 12px
  md: 24px
  lg: 48px
  xl: 80px
  gutter: 20px
  margin-mobile: 16px
  margin-desktop: 32px
---

## Brand & Style

This design system is built for a recovery and safety service, demanding an interface that balances immediate urgency with professional reliability. The brand personality is vigilant, protective, and highly responsive.

The design style follows a **Corporate / Modern** aesthetic with a high-contrast edge. It utilizes generous whitespace and a "Safety-First" visual hierarchy to ensure information is scannable during critical moments. The interface avoids unnecessary decoration, focusing instead on clarity, speed of recognition, and a sense of "digital armor"—sturdy, clean, and technologically advanced. The emotional response should be one of total confidence and rapid assistance.

## Colors

The palette is anchored by **Crimson Red (#DC143C)**, used strategically for primary actions and safety alerts to signal importance and urgency. This is balanced by a deep **Midnight Navy (#001B3D)**—introduced as the secondary color—which provides the professional stability and "institutional" feel necessary for a safety service.

**Soft Rose (#F2526E)** serves as a tertiary accent for hover states or less critical notifications, while a rich **Obsidian Black (#0A0A0A)** is used for high-contrast typography against a pure **White (#FFFFFF)** base. This high-contrast approach ensures maximum legibility in outdoor or high-stress environments.

## Typography

This design system utilizes **Plus Jakarta Sans** across all levels to bring a modern, approachable, and highly legible character to the interface. The typography is characterized by high contrast in weights—using ExtraBold (800) for displays to command attention, and Regular (400) for body text to maintain breathability.

Headlines use tight tracking and line heights to feel compact and urgent. Labels use a slightly increased letter spacing and a semi-bold weight to remain distinct even at small sizes on mobile devices or hardware-adjacent interfaces.

## Layout & Spacing

The layout utilizes a **Fixed Grid** model for desktop to maintain a controlled, authoritative structure, transitioning to a fluid layout for mobile devices. A strict 8px base unit governs the spacing rhythm, ensuring all elements align to a predictable vertical and horizontal cadence.

In safety-critical views, vertical spacing is increased (using the `lg` and `xl` tokens) to isolate touch targets and prevent errors. Containers use a 12-column grid on desktop with substantial gutters to prevent information density from overwhelming the user.

## Elevation & Depth

This design system conveys depth through **Tonal Layers** and extremely subtle **Ambient Shadows**. Instead of heavy shadows, depth is primarily communicated through surface color shifts—using very light greys or navy tints to distinguish containers from the background.

Where shadows are necessary (such as on primary action buttons or floating modals), they are highly diffused with a low-opacity navy tint (#001B3D at 8% alpha). This creates a "lifted" effect that feels integrated rather than floating, reinforcing the grounded and stable nature of the service.

## Shapes

The shape language is defined as **Rounded**, striking a balance between the friendliness of curved edges and the precision of a professional service.

- Standard components (buttons, inputs) use a **0.5rem (8px)** corner radius.
- Larger containers and cards use **1rem (16px)**.
- Extreme elements like notification badges or search bars utilize **pill-shaped** geometry to differentiate them as interactive utilities.

This consistency in rounding softens the high-contrast color palette, making the recovery service feel helpful and human rather than purely clinical.

## Components

### Buttons
Primary buttons use the Crimson Red background with White text, employing a semi-bold weight. Secondary buttons use the Midnight Navy background to signify auxiliary but important actions. All buttons include a subtle 2px bottom border of a darker shade to provide a tactile, pressable feel.

### Input Fields
Inputs are framed by a 1.5px border in a muted navy-grey. Upon focus, the border transitions to Midnight Navy with a soft outer glow. Labels are always positioned above the input field for maximum visibility.

### Cards
Cards are the primary containment unit. They feature a 1px "low-contrast outline" in a light grey, with a subtle white-to-grey gradient to provide structural depth without relying on heavy shadows.

### Status Indicators
Given the safety focus, status indicators (chips) are prominent. "Active" or "Safe" states use Midnight Navy; "Alert" or "Recovery" states use Crimson Red. These chips use the `label-sm` typography for crispness.

### Emergency Toggle
A specialized component for this design system: a large, high-contrast toggle with a textured background pattern, specifically designed to be the most "tactile" and visible element on any dashboard.