# Design System Specification: Precision & Prestige

## 1. Overview & Creative North Star
The Creative North Star for this design system is **"The Digital Atelier."** 

In the context of high-end automotive care in Thailand, we are not just building a utility; we are creating a digital showroom that mirrors the precision of a ceramic coating application. We move away from the "template" look of generic booking apps by embracing **Intentional Asymmetry** and **Editorial Spacing**. 

By leveraging a high-contrast typography scale and layered tonal surfaces, we evoke a sense of high-tech craftsmanship. The interface should feel like a premium automotive magazine—clean, authoritative, and spacious—where the car (the hero) is supported by a sophisticated, "invisible" UI framework.

---

## 2. Colors & Surface Philosophy
The palette balances the deep authority of the Thai corporate sector with the vibrant energy of "Action Green" to signify status and momentum.

### The "No-Line" Rule
To achieve a high-end editorial feel, **1px solid borders are prohibited for sectioning.** 
Structure must be defined through background color shifts. For example, a section using `surface-container-low` (#f2f4f7) should sit directly against a `background` (#f7f9fc) to create a soft edge. This forces a cleaner, more modern aesthetic that relies on proximity and tone rather than rigid scaffolding.

### Surface Hierarchy & Nesting
Treat the UI as a series of physical layers. Use the `surface-container` tiers to create "nested" depth:
*   **Base:** `surface` (#f7f9fc)
*   **Secondary Content Area:** `surface-container-low` (#f2f4f7)
*   **Interactive Cards:** `surface-container-lowest` (#ffffff)
*   **Overlays/Modals:** `surface-container-highest` (#e0e3e6)

### The "Glass & Gradient" Rule
Standard flat colors feel "out-of-the-box." To elevate the experience:
*   **Signature Gradients:** Use a subtle linear gradient for Hero CTAs, transitioning from `primary` (#001e40) to `primary_container` (#003366) at a 135-degree angle.
*   **Glassmorphism:** For floating navigation or status bars, use `surface_container_lowest` at 80% opacity with a `backdrop-filter: blur(20px)`. This allows the vibrant vehicle imagery to bleed through, softening the interface.

---

## 3. Typography
We utilize **Inter** (and **Kanit** for Thai-specific scripts) to maintain a technical, clean-room aesthetic.

*   **Display Scale (`display-lg` to `display-sm`):** Use these for high-impact service titles (e.g., "Ceramic Pro Gold"). Use `on_surface` with tight letter-spacing (-0.02em) to create an authoritative, editorial look.
*   **Headline Scale:** Designed for section headers. Ensure `headline-lg` (2rem) is used with generous top padding to allow the layout to "breathe."
*   **The Narrative Hierarchy:** 
    *   **Titles** are for car models and service names.
    *   **Body** text handles the technical descriptions. 
    *   **Labels** (using `on_tertiary_fixed_variant` for Action Green accents) should be used for status indicators like "In Progress" or "Booked."

---

## 4. Elevation & Depth
Depth in this system is achieved through **Tonal Layering** rather than heavy shadows.

*   **The Layering Principle:** Instead of a shadow, place a `surface-container-lowest` (#ffffff) card on a `surface-container-low` (#f2f4f7) background. The subtle 2% difference in luminosity creates a sophisticated "lift."
*   **Ambient Shadows:** When a true float is required (e.g., a "Book Now" floating action button), use a shadow with a blur radius of 32px and 4% opacity. The color should be a tinted `#001b3c` (from `on_primary_fixed`) to ensure the shadow feels like a natural lighting effect on a blue-toned surface.
*   **The "Ghost Border" Fallback:** If accessibility requires a container boundary, use `outline_variant` (#c3c6d1) at **20% opacity**. It should be a whisper of a line, not a statement.
*   **Roundedness:** Stick to `xl` (1.5rem) for main containers and `md` (0.75rem) for buttons. This high-radius look mimics the aerodynamic curves of modern luxury vehicles.

---

## 5. Components

### Buttons
*   **Primary:** A gradient of `primary` to `primary_container`. Text in `on_primary`. Roundedness: `full`.
*   **Action/Status:** Use `tertiary_fixed` (#62ff96) for CTAs that require immediate attention (e.g., "Confirm Booking"). This "Action Green" is our signature status color.
*   **Tertiary:** No background. Use `primary` text with a `full` rounded ghost-border (20% opacity) on hover.

### Cards & Lists
*   **The "No Divider" Mandate:** Forbid the use of horizontal lines. Separate list items using `body-md` spacing (0.875rem) and subtle background shifts.
*   **Service Cards:** Use `surface-container-lowest`. Include a 2px vertical accent of `tertiary_fixed` on the left edge for "Active" or "Premium" service levels.

### Input Fields
*   **Styling:** Use `surface_container_low` for the fill. Avoid a bottom border. Use `title-sm` for the input text and `label-md` for the floating label.
*   **States:** On focus, the background should shift to `surface_container_lowest` with a "Ghost Border" of `primary` at 40%.

### Contextual Components
*   **Service Timeline:** A vertical track using `outline_variant` (10% opacity) with `tertiary_fixed` "pulses" to show car cleaning progress.
*   **Vehicle Toggle:** A segmented control using `secondary_container` with `xl` rounded corners to switch between "Sedan," "SUV," and "Supercar" profiles.

---

## 6. Do’s and Don’ts

### Do:
*   **Embrace White Space:** Allow at least 48px of padding between major sections. High-end brands aren't afraid of "empty" space.
*   **Use Imagery as UI:** Let high-resolution photos of water beading or polished chrome act as the background for hero sections.
*   **Maintain Thai Readability:** When using Kanit, ensure line heights for `body-md` are increased by 1.2x compared to English to accommodate Thai glyphs.

### Don’t:
*   **No Pure Black:** Never use #000000. Use `on_primary_fixed` (#001b3c) for deep tones to maintain the automotive "Deep Blue" soul.
*   **No Sharp Corners:** Avoid the `none` or `sm` roundedness tokens unless it's for a technical data grid.
*   **No "Heavy" Borders:** Avoid 100% opaque borders; they break the "Digital Atelier" illusion of layered glass and light.