# Design System Strategy: The Human-Centric Oracle ## 1. Overview & Creative North Star **Creative North Star: The Digital Curator** This design system moves away from the cold, industrial aesthetic typically associated with AI. Instead, it adopts the persona of a high-end editorial publication—think *Kinfolk* meets *MIT Technology Review*. We are not building a "tool"; we are designing a "consultancy experience." The system rejects the standard "dashboard" look in favor of **intentional asymmetry** and **tonal depth**. We utilize extreme typographic scales and generous white space to create a sense of calm authority. By breaking the rigid 12-column grid with overlapping elements and offset text blocks, we signal that our AI solutions are bespoke, human-led, and sophisticated. --- ## 2. Colors & Surface Philosophy The palette is grounded in warmth (`#fef9f1`) to establish trust, punctuated by a high-energy orange (`#c2410c`) that represents the "spark" of AI innovation. ### The "No-Line" Rule **Explicit Instruction:** Designers are prohibited from using 1px solid borders to define sections. Traditional dividers are considered "visual noise." Instead: - **Structural Shifts:** Use background color shifts (e.g., a `surface-container-low` section sitting on a `surface` background) to signify a new content area. - **Tonal Transitions:** Use the hierarchy of `surface-container` tokens to create natural containment. ### Surface Hierarchy & Nesting Treat the UI as a series of physical layers, like stacked sheets of fine vellum. - **Base Layer:** `surface` (#fef9f1) for the main page body. - **The Inset:** `surface-container-low` (#f8f3eb) for subtle content grouping. - **The Floating Layer:** `surface-container-lowest` (#ffffff) for high-priority cards or interactive elements. ### The "Glass & Gradient" Rule To prevent the warm minimalism from feeling "flat" or "retro," we introduce "The Digital Glow": - **Signature Textures:** Main CTAs or Hero backgrounds should use a subtle linear gradient transitioning from `primary` (#9b2f00) to `primary_container` (#c2410c) at a 45-degree angle. - **Glassmorphism:** Use `surface_container_lowest` with an 80% opacity and a `24px` backdrop-blur for floating navigation bars or modals to ensure the warm background "bleeds" through the interface. --- ## 3. Typography The typography is the backbone of the editorial feel. It balances the intellectual weight of a Serif with the precision of a modern Sans-Serif. - **Display & Headlines (Newsreader/EB Garamond):** Used for storytelling. Set these with "tight" letter-spacing (-2%) and generous line-height to feel like a premium broadsheet. - **Body & Labels (Manrope/DM Sans):** Used for data and functional instruction. These should have slightly increased tracking (+1%) for maximum legibility against the off-white background. **The Hierarchy of Authority:** - **Display-LG:** For visionary statements. Large, bold, and unapologetic. - **Title-SM:** Used for "overlines" or category tags. Always uppercase with 0.1rem letter spacing to act as a modern anchor for the serif headers. --- ## 4. Elevation & Depth In this system, depth is a whisper, not a shout. - **The Layering Principle:** Achieve lift by stacking `surface-container` tiers. A `surface-container-lowest` card placed on a `surface-dim` section creates a natural, soft lift. - **Ambient Shadows:** When a physical float is required (e.g., a dropdown), use a shadow with a blur of `40px` and an opacity of `4%`. The shadow color must be tinted with the `on_surface` (#1d1c17) color, never pure black. - **The "Ghost Border" Fallback:** If a border is required for accessibility, use the `outline_variant` token at **15% opacity**. 100% opaque borders are strictly forbidden. --- ## 5. Components ### Buttons - **Primary:** `primary` background with `on_primary` text. Use the `xl` (0.75rem) roundedness for a modern, "pebble" feel. No borders. - **Secondary:** `surface_container_high` background. This should feel like a tactile "indent" on the page. - **Tertiary:** Text-only in `primary` orange, using `label-md` typography. ### Cards & Lists - **The Divider Rule:** Forbid the use of line dividers. Use a `32px` vertical gap (Spacing Scale) or a shift to `surface_container_low` for separation. - **Interaction:** On hover, a card should not move "up"; instead, it should transition its background color from `surface_container` to `surface_container_lowest` for a "glow" effect. ### Input Fields - **Styling:** Use the "Underline-Only" editorial style or a very subtle `surface-variant` fill. - **States:** The active state should never be a blue glow; use a 2px `primary` (orange) bottom border. ### Narrative Tooltips - **Context:** Unlike standard tooltips, these should use `newsreader` italic typography at `body-sm` size to feel like "Editor's Notes" in a margin. --- ## 6. Do's and Don'ts ### Do: - **Use Intentional Asymmetry:** Align a headline to the left and a body paragraph to the right of a 2-column container to create visual interest. - **Embrace White Space:** If you think there is enough padding, add 16px more. Space is a luxury brand attribute. - **Use "Signature" Photography:** Pair the UI with high-grain, slightly desaturated editorial photography or abstract 3D glass renders. ### Don't: - **No 1px Lines:** Do not use lines to separate header from body or section from section. Use white space. - **No Pure Black:** Never use `#000000`. Use the `on_background` charcoal (#1d1c17) for all dark elements. - **No Sharp Corners:** Avoid `rounded-none`. Even the most "minimal" containers should use at least the `sm` (0.125rem) radius to feel approachable and organic.