---
name: Digital Student Permit System
colors:
  surface: '#f8f9ff'
  surface-dim: '#cbdbf5'
  surface-bright: '#f8f9ff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#eff4ff'
  surface-container: '#e5eeff'
  surface-container-high: '#dce9ff'
  surface-container-highest: '#d3e4fe'
  on-surface: '#0b1c30'
  on-surface-variant: '#3d4a42'
  inverse-surface: '#213145'
  inverse-on-surface: '#eaf1ff'
  outline: '#6d7a72'
  outline-variant: '#bccac0'
  surface-tint: '#006c4a'
  primary: '#006948'
  on-primary: '#ffffff'
  primary-container: '#00855d'
  on-primary-container: '#f5fff7'
  inverse-primary: '#68dba9'
  secondary: '#545f73'
  on-secondary: '#ffffff'
  secondary-container: '#d5e0f8'
  on-secondary-container: '#586377'
  tertiary: '#545c72'
  on-tertiary: '#ffffff'
  tertiary-container: '#6c748b'
  on-tertiary-container: '#fefcff'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#85f8c4'
  primary-fixed-dim: '#68dba9'
  on-primary-fixed: '#002114'
  on-primary-fixed-variant: '#005137'
  secondary-fixed: '#d8e3fb'
  secondary-fixed-dim: '#bcc7de'
  on-secondary-fixed: '#111c2d'
  on-secondary-fixed-variant: '#3c475a'
  tertiary-fixed: '#dae2fd'
  tertiary-fixed-dim: '#bec6e0'
  on-tertiary-fixed: '#131b2e'
  on-tertiary-fixed-variant: '#3f465c'
  background: '#f8f9ff'
  on-background: '#0b1c30'
  surface-variant: '#d3e4fe'
typography:
  display-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 48px
    fontWeight: '700'
    lineHeight: 60px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
    letterSpacing: -0.01em
  headline-lg-mobile:
    fontFamily: Plus Jakarta Sans
    fontSize: 24px
    fontWeight: '700'
    lineHeight: 32px
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  title-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 20px
    fontWeight: '600'
    lineHeight: 28px
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  label-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '500'
    lineHeight: 20px
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '600'
    lineHeight: 16px
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  base: 4px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  container-max: 1280px
  gutter: 16px
  margin-mobile: 16px
  margin-desktop: 32px
---

## Brand & Style
The design system is built on the principles of **Institutional Trust**, **Operational Efficiency**, and **Modern Islamic Identity**. It bridges the traditional environment of a boarding school with the precision of a digital administrative tool.

The visual style is **Corporate Modern** with a focus on high-clarity information architecture. It utilizes ample whitespace, structured grids, and a systematic approach to status communication to ensure parents, security personnel, and administrators can navigate complex permit workflows with zero friction. The aesthetic response should feel organized, authoritative yet accessible, and technologically advanced.

## Colors
The palette is rooted in a professional "Islamic Green" (#059669) which represents growth and tradition, paired with a deep Navy (#1E293B) to convey institutional authority and stability.

- **Primary:** Used for main actions, active navigation states, and brand highlights.
- **Secondary/Navy:** Used for sidebars, headers, and text headings to establish a professional tone.
- **Neutral:** A range of cool grays used for borders, secondary text, and background surfaces to maintain a clean, "uncluttered" look.
- **Semantic Palette:** Status colors are high-chroma for instant recognition:
    - **Pending (Amber):** Cautionary, awaiting action.
    - **Approved (Green):** Successful, active permit.
    - **Rejected (Red):** Action denied.
    - **Overdue (Crimson):** High-priority alert for security and administration.

## Typography
This design system uses a dual-font strategy. **Plus Jakarta Sans** provides a friendly yet modern geometric touch for headings and titles, ensuring the interface feels approachable for parents. **Inter** is used for all body text, data tables, and forms due to its exceptional legibility and systematic, neutral character.

Maintain a strict vertical rhythm using the defined line heights. For mobile views (Security/Parents), prioritize `headline-lg-mobile` to ensure titles do not wrap awkwardly. Use `label-sm` with uppercase styling for metadata and category headers in the administrative dashboard.

## Layout & Spacing
The layout follows a **4px baseline grid** for internal component spacing and an **8pt grid** for layout-level spacing.

- **Mobile (Parents/Security):** Single column fluid layout. Use `margin-mobile` (16px) for safe areas. Bottom navigation is preferred for thumb-reachability in parent roles.
- **Desktop (Admin):** Fixed-width sidebar (280px) with a fluid content area. Use a 12-column grid with `gutter` (16px) for data dashboards and permit lists.
- **Spacing Logic:** Use `lg` (24px) for padding within cards and `md` (16px) for spacing between related form elements.

## Elevation & Depth
Depth is achieved through **Tonal Layering** and **Subtle Ambient Shadows**. The design avoids heavy black shadows in favor of tinted shadows that use the Secondary Navy color with very low opacity.

- **Level 0 (Background):** #F8FAFC (Slate 50) – used for the main application canvas.
- **Level 1 (Cards/Surfaces):** White (#FFFFFF) with a 1px border (#E2E8F0) and a soft 4px blur shadow. Used for student list items and permit summaries.
- **Level 2 (Modals/Popovers):** White (#FFFFFF) with a 12px blur shadow, 8% opacity. Used for permit approval dialogs.
- **Interactive:** Hover states on buttons should increase shadow depth slightly to indicate clickability.

## Shapes
The shape language is notably **Rounded (2xl)** to create a soft, modern, and friendly atmosphere that reduces the "bureaucratic" feel of a permit system.

- **Standard Buttons & Inputs:** 0.5rem (8px).
- **Cards & Modal Containers:** 1rem (16px) — defined as `rounded-lg`.
- **Status Chips & Profile Avatars:** Full pill (999px) or 1.5rem (24px) — defined as `rounded-xl`.

## Components
Consistent implementation of these components ensures institutional clarity across all roles.

- **Buttons:** 
    - *Primary:* Solid #059669 with white text. 
    - *Secondary:* Ghost style with #1E293B border and text.
    - *Roundedness:* 0.5rem.
- **Status Chips:** Small badges with 10% opacity background of the status color and 100% opacity text of the same color (e.g., Pending: Background #FEF3C7, Text #D97706).
- **Input Fields:** White background, 1px border (#CBD5E1), 0.5rem corner radius. On focus, the border transitions to Primary Green with a 2px soft outer glow.
- **Permit Cards:** Mobile-optimized cards featuring the student's name in `title-lg`, permit type as a `label-md`, and a prominent status chip in the top right.
- **Data Tables (Admin):** High-density rows with light gray dividers (#F1F5F9). Use `inter` font for all data cells.
- **Security Scanner:** A dedicated mobile view component featuring a large QR code scanner interface with high-contrast guides and immediate haptic feedback on success/failure.