---
name: Terapisku Wellness System
colors:
  surface: '#fdf7ff'
  surface-dim: '#ded8e0'
  surface-bright: '#fdf7ff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f8f2fa'
  surface-container: '#f2ecf4'
  surface-container-high: '#ece6ee'
  surface-container-highest: '#e6e0e9'
  on-surface: '#1d1b20'
  on-surface-variant: '#494551'
  inverse-surface: '#322f35'
  inverse-on-surface: '#f5eff7'
  outline: '#7a7582'
  outline-variant: '#cbc4d2'
  surface-tint: '#6750a4'
  primary: '#4f378a'
  on-primary: '#ffffff'
  primary-container: '#6750a4'
  on-primary-container: '#e0d2ff'
  inverse-primary: '#cfbcff'
  secondary: '#63597c'
  on-secondary: '#ffffff'
  secondary-container: '#e1d4fd'
  on-secondary-container: '#645a7d'
  tertiary: '#765b00'
  on-tertiary: '#ffffff'
  tertiary-container: '#c9a74d'
  on-tertiary-container: '#503d00'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#e9ddff'
  primary-fixed-dim: '#cfbcff'
  on-primary-fixed: '#22005d'
  on-primary-fixed-variant: '#4f378a'
  secondary-fixed: '#e9ddff'
  secondary-fixed-dim: '#cdc0e9'
  on-secondary-fixed: '#1f1635'
  on-secondary-fixed-variant: '#4b4263'
  tertiary-fixed: '#ffdf93'
  tertiary-fixed-dim: '#e7c365'
  on-tertiary-fixed: '#241a00'
  on-tertiary-fixed-variant: '#594400'
  background: '#fdf7ff'
  on-background: '#1d1b20'
  surface-variant: '#e6e0e9'
typography:
  display-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 40px
    fontWeight: '700'
    lineHeight: '1.2'
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Plus Jakarta Sans
    fontSize: 32px
    fontWeight: '700'
    lineHeight: '1.2'
  headline-lg-mobile:
    fontFamily: Plus Jakarta Sans
    fontSize: 24px
    fontWeight: '700'
    lineHeight: '1.3'
  headline-md:
    fontFamily: Plus Jakarta Sans
    fontSize: 20px
    fontWeight: '600'
    lineHeight: '1.4'
  body-lg:
    fontFamily: Manrope
    fontSize: 18px
    fontWeight: '400'
    lineHeight: '1.6'
  body-md:
    fontFamily: Manrope
    fontSize: 16px
    fontWeight: '400'
    lineHeight: '1.6'
  label-md:
    fontFamily: Manrope
    fontSize: 14px
    fontWeight: '600'
    lineHeight: '1.4'
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Manrope
    fontSize: 12px
    fontWeight: '500'
    lineHeight: '1.4'
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  base: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  container-margin: 20px
  gutter: 16px
---

## Brand & Style
The design system for this wellness platform is built on the pillars of **Trust (Kepercayaan)**, **Professionalism (Profesionalisme)**, and **Serenity (Ketenangan)**. It targets a premium Indonesian demographic seeking reliable on-demand wellness and therapy services.

The visual style is **Modern-Tactile Minimalism**. It leverages deep, trustworthy blues paired with warm amber accents to create an interface that feels both clinical in its precision and organic in its warmth. The atmosphere is light and airy, utilizing generous whitespace and soft-depth transitions to reduce cognitive load, ensuring users feel a sense of relief the moment they open the application.

## Colors
The palette is dominated by the **Deep Ocean Gradient**, which establishes authority and calm. This is strictly used for primary actions, branding elements, and active states. 

The **Amber CTA** (#E8A838) is used sparingly for high-intent conversion points (e.g., "Pesan Sekarang") to provide a warm, energetic contrast that guides the eye. Surfaces use a "Paper White" (#FFFFFF) base with "Soft Slate" (#F8FAFC) used for secondary containers to maintain a clean, premium aesthetic. All text adheres to high-contrast ratios against the light background to ensure accessibility for all age groups.

## Typography
The system uses **Plus Jakarta Sans** for headlines to provide a modern, friendly, yet bold Indonesian character. The geometric nature of the font ensures legibility and a contemporary feel. 

For body copy and functional text, **Manrope** is utilized. Its balanced proportions and clean terminals make long-form content, such as therapist bios or service descriptions, easy to digest. Weight is used strategically to create hierarchy: Bold for service titles and Semibold for navigation, while keeping Body text at a Regular weight for maximum comfort.

## Layout & Spacing
This design system employs a **Fluid-Fixed Hybrid** approach. On mobile, we use a 4-column grid with 20px side margins to ensure content doesn't feel cramped. On desktop, content is centered within a 1200px max-width container using a 12-column grid.

Spacing follows a 4px base unit, with a preference for larger increments (24px, 32px) between sections to promote the "calm" brand attribute. Grouped elements (like an icon and its label) should use 8px or 12px to maintain clear associations.

## Elevation & Depth
Depth is created through **Ambient Shadowing** rather than harsh borders. 
- **Level 1 (Base):** Flat white background.
- **Level 2 (Cards):** Soft, diffused shadow (Y: 4px, Blur: 20px, Opacity: 6% Black) to lift therapist cards and service options.
- **Level 3 (Modals/Floating Actions):** Higher elevation (Y: 10px, Blur: 30px, Opacity: 10% Blue-Tinted Shadow) to indicate immediate priority.

We avoid heavy lines, opting for subtle 1px borders in #F1F5F9 only when necessary to define boundaries between similar white surfaces.

## Shapes
In alignment with the "Wellness" theme, all corners are generously rounded to evoke a sense of safety and approachability. 
- **Standard UI elements** (Inputs, small buttons) use `rounded-lg` (16px).
- **Primary Containers & Cards** use `rounded-xl` (24px) for a soft, premium appearance.
- **Icon wrappers and Avatars** use full-circle (pill) shapes to contrast against the structured grid.

## Components

### Buttons
- **Primary:** Gradient background (#1B6CA8 to #2980B9), white text, 16px rounded corners. Includes a subtle "glow" shadow using the primary color.
- **CTA (Action):** Solid Amber (#E8A838) with white or dark-slate text. Reserved for "Pesan" or "Bayar".
- **Secondary:** Transparent with a primary-colored border or light blue tint.

### Cards
Therapist cards must feature a large profile photo with a high border-radius (top-left/right: 24px). Bottom section contains white-space for the name, rating (Amber star), and "Spesialisasi" labels.

### Chips & Tags
Used for service categories (e.g., "Massage", "Akupuntur"). Use a light blue background (#E1EFFE) with primary-colored text. Shapes must be fully rounded (pill-shaped).

### Input Fields
Soft Slate (#F8FAFC) background with no border in the default state. Upon focus, a 2px border using the primary solid color appears. Labels are always positioned above the field for clarity.

### Specific Wellness Components
- **Booking Calendar:** Minimalist grid with the selected date highlighted using the primary gradient.
- **Status Indicator:** Soft pulsing dots for "Terapis sedang menuju lokasi" (Therapist on the way).
- **Service Icons:** Custom thin-line icons with a circular backdrop of 10% opacity primary blue.