---
name: SIPEDI
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: '#5c5f61'
  on-secondary: '#ffffff'
  secondary-container: '#e0e3e5'
  on-secondary-container: '#626567'
  tertiary: '#006195'
  on-tertiary: '#ffffff'
  tertiary-container: '#287ab3'
  on-tertiary-container: '#fdfcff'
  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: '#e0e3e5'
  secondary-fixed-dim: '#c4c7c9'
  on-secondary-fixed: '#191c1e'
  on-secondary-fixed-variant: '#444749'
  tertiary-fixed: '#cde5ff'
  tertiary-fixed-dim: '#94ccff'
  on-tertiary-fixed: '#001d32'
  on-tertiary-fixed-variant: '#004b74'
  background: '#f8f9ff'
  on-background: '#0b1c30'
  surface-variant: '#d3e4fe'
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: '700'
    lineHeight: 56px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '600'
    lineHeight: 40px
    letterSpacing: -0.01em
  headline-lg-mobile:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  headline-md:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  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: 0.5rem
  sm: 1rem
  md: 1.5rem
  lg: 2rem
  xl: 3rem
  container-max: 1280px
  gutter: 24px
---

## Brand & Style
The design system for this digital licensing platform is built on the pillars of **integrity, clarity, and growth**. It blends modern SaaS aesthetics with subtle Islamic design cues—not through overt ornamentation, but through a philosophy of balance, "Mizan," and rhythmic spacing.

The style is **Modern Corporate**, utilizing a clean, high-whitespace layout to reduce cognitive load for users navigating complex regulatory processes. It evokes an emotional response of "calm efficiency." The visual language relies on a light-filled environment to signal transparency, using professional emerald tones to represent both prosperity and the ethical roots of the institution.

## Colors
The palette is dominated by "Ethical Emerald," a range of greens that feel natural and professional rather than neon. 

- **Primary (#059669):** Used for main actions, active states, and brand identifiers. It strikes a balance between the vibrant #10b981 and the deeper #047857 to ensure AAA accessibility on white backgrounds.
- **Secondary/Surface (#F8FAFC):** A cool, airy gray-blue used for background surfaces to keep the UI feeling fresh and less stark than pure white.
- **Accent/Tertiary (#0369A1):** A deep ocean blue reserved for informational callouts and secondary data points, providing a professional contrast to the green.
- **Neutral:** A slate-based scale (Gray-50 to Gray-900) is used for typography and structural borders to maintain a grounded, institutional feel.

## Typography
This design system utilizes **Inter** for its exceptional legibility in data-heavy environments. The typographic scale is designed for high readability in forms and status dashboards.

- **Headlines:** Use a tighter letter-spacing and semi-bold weights to create a sense of authority and structure.
- **Body Text:** Uses a generous 1.5x line height to ensure long descriptions of regulations remain approachable.
- **Labels:** Small caps or medium-weight labels are used for form headers to distinguish between user input and system prompts.

## Layout & Spacing
The spacing system follows a **4px baseline grid**, ensuring all elements scale proportionally. 

- **Desktop:** A 12-column fixed grid (max-width 1280px) centered in the viewport. Sidebars for navigation are fixed at 280px.
- **Mobile:** A fluid single-column layout with 16px (sm) horizontal margins. Bottom navigation bars are preferred for primary licensing actions to improve reachability.
- **Rhythm:** Use "md" (24px) spacing between unrelated sections and "sm" (16px) for related components within a card.

## Elevation & Depth
To maintain a modern SaaS feel, the system avoids heavy shadows. Instead, it uses **Soft Ambient Depth**:

- **Level 0 (Background):** Surface-secondary (#F8FAFC).
- **Level 1 (Cards/Content):** Pure White (#FFFFFF) with a very fine 1px border in Gray-200.
- **Level 2 (Interactive/Hover):** A subtle shadow (0px 4px 12px rgba(0, 0, 0, 0.05)) to indicate clickability.
- **Modals:** Deepest elevation with a 20% backdrop blur (glassmorphism effect) to keep the user focused on the licensing task without losing context.

## Shapes
The shape language is **Softly Geometric**. A radius of 8px (0.5rem) is the standard for most containers, providing a friendly but structured appearance.

- **Primary Buttons:** Use the standard 8px radius.
- **Status Tags/Chips:** Use a fully rounded "pill" shape (999px) to distinguish them from interactive buttons.
- **Input Fields:** 8px radius to match cards, ensuring a cohesive form-factor.

## Components
- **Buttons:** The primary button is Solid Emerald-600 with white text. The secondary button is a "Ghost" style: transparent background with an Emerald-600 border and text.
- **Cards:** White background, 8px radius, and 1px Gray-100 border. Header sections within cards should have a subtle Gray-50 bottom border.
- **Input Fields:** Use a 1px Gray-300 border that transitions to Emerald-500 on focus. Label placement is always top-aligned for clarity.
- **Status Badges:** Crucial for perizinan (licensing) status. 
    - *Pending:* Amber background/dark text.
    - *Approved:* Light Green background/Emerald text.
    - *Rejected:* Pale Red background/Crimson text.
- **Progress Steppers:** Use a horizontal stepper for desktop and a vertical "compact" stepper for mobile to guide users through multi-step permit applications.
- **Empty States:** Use soft-colored illustrations in emerald tints with a clear primary CTA to "Start Application."