# Design System Document: High-End Dental Editorial ## 1. Overview & Creative North Star This design system is built for 'Markadent' to transcend the clinical coldness of traditional dentistry. Our Creative North Star is **"The Curated Sanctuary."** We aim to evoke the feeling of a high-end architectural atelier or a premium spa rather than a medical office. The system breaks the "template" look through **Intentional Tonal Layering**. We reject the rigid, boxed-in layouts of standard health sites. Instead, we use expansive breathing room (whitespace), asymmetrical image placements, and a hierarchy that prioritizes editorial elegance. By layering subtle shifts in background tones rather than using hard lines, we create an interface that feels organic, fluid, and profoundly premium. --- ## 2. Colors: Metallic Sophistication The palette is a dialogue between the warmth of Metallic Gold and the precision of Platinum, grounded by an clinical-yet-approachable Teal. * **Primary (Gold):** `#7b5800` (Main branding, key emphasis). * **Secondary (Platinum/Grey):** `#5e5e5d` (Supporting elements, refined neutrality). * **Tertiary (Teal Accent):** `#006a6a` (Intentional CTAs, health-signaling interactions). * **Neutral (Surface):** `#fbf9f8` (A soft, warm-white foundation to avoid hospital-starkness). ### The "No-Line" Rule **Explicit Instruction:** Designers are prohibited from using 1px solid borders to define sections. Content boundaries must be created through: 1. **Background Color Shifts:** Moving from `surface` to `surface-container-low`. 2. **Negative Space:** Using the Spacing Scale (e.g., `16` or `20`) to let content breathe. ### Surface Hierarchy & Nesting Treat the UI as a series of physical layers. A `surface-container-lowest` card should sit atop a `surface-container-low` section. This "nested" depth provides structure without visual clutter. ### The "Glass & Gradient" Rule For floating elements like navigation bars or appointment modals, use **Glassmorphism**. Combine `surface` colors at 80% opacity with a `backdrop-blur` of 12px. For primary CTAs, apply a subtle linear gradient from `primary` (`#7b5800`) to `primary_container` (`#e1aa36`) to give the gold a metallic "soul." --- ## 3. Typography: Editorial Authority We use a dual-font strategy to balance character with readability. * **Display & Headlines (Manrope):** A geometric sans-serif that feels modern and authoritative. * *Display-LG (`3.5rem`):* Used for hero statements with tight letter-spacing (-0.02em). * *Headline-MD (`1.75rem`):* Used for section titles, conveying clinical confidence. * **Body & Labels (Plus Jakarta Sans):** A highly legible font with a friendly, open feel. * *Body-LG (`1rem`):* Our standard for patient information and descriptions. * *Label-MD (`0.75rem`):* Used for small metadata, always in `secondary` or `outline` tokens. **Typography Hierarchy:** High contrast in scale is essential. Large, elegant headlines should be paired with generous tracking in body text to maintain an "airy" editorial feel. --- ## 4. Elevation & Depth In this design system, depth is felt, not seen. We move away from traditional drop shadows toward **Ambient Luminosity**. * **The Layering Principle:** Stacking surface tiers creates a "soft lift." Use `surface-container-highest` for the most interactive foreground elements. * **Ambient Shadows:** If a shadow is required for a floating CTA or modal, use a blur value of `32px` or higher with a `4%` opacity. The color should be a tint of `on-surface` (`#1b1c1c`) rather than pure black. * **The "Ghost Border" Fallback:** If accessibility requires a border, use the `outline-variant` token at **15% opacity**. High-contrast, 100% opaque borders are strictly forbidden. --- ## 5. Components ### Buttons * **Primary (CTA):** Roundedness `full`. Gradient of `primary` to `primary_container`. White text. High-end metallic sheen. * **Secondary:** Roundedness `full`. `surface-container-lowest` background with a "Ghost Border." * **Tertiary:** Text-only in `tertiary` (`#006a6a`) with a `0.5rem` underline on hover. ### Cards & Lists * **Forbid Divider Lines:** Separate list items using `spacing-4` (1.4rem) or alternating background shifts between `surface` and `surface-container-low`. * **Card Style:** Roundedness `lg` (`1rem`). No borders. Use `surface-container-lowest` to pop against the main background. ### Input Fields * **Styling:** Use `surface-container-high` for the field background. * **States:** On focus, the "Ghost Border" transitions to a `primary` (Gold) weight of 1.5px. Use `label-md` for floating labels to maintain the editorial feel. ### Specialized Component: The "Service Carousel" Instead of a grid, use an asymmetrical horizontal scroll. Cards should vary slightly in height, creating a "masonry" feel that breaks the standard medical website template. --- ## 6. Do's and Don'ts ### Do: * **Use Intentional Asymmetry:** Offset images and text blocks to create a custom, high-end feel. * **Embrace Whitespace:** If you think there’s enough space, add 20% more. Premium equals breathing room. * **Use Tonal Transitions:** Define sections by shifting from `#fbf9f8` to `#f0eded` (surface-container). ### Don't: * **Don't use 1px solid borders:** They look "cheap" and "out-of-the-box." * **Don't use harsh shadows:** Avoid any shadow that is clearly visible. It should feel like a natural light source. * **Don't crowd the content:** Information density is the enemy of premium design. Break long forms into multi-step, airy sequences. * **Don't use standard icons:** Use custom, thin-stroke (1pt or 1.5pt) icons that match the `secondary` platinum color.