# 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.