# Design System Document: High-End Editorial ## 1. Overview & Creative North Star **Creative North Star: The Curated Monolith** This design system is built on the philosophy of "The Curated Monolith"—an architectural approach to digital design that treats every page as a high-end gallery space. It rejects the clutter of traditional UI in favor of bold, intentional voids and razor-sharp precision. By utilizing extreme whitespace and a rigid 0px radius, we create a sense of permanent, structural authority suitable for both luxury fashion and elite corporate identities. The system breaks the "template" look through: * **Intentional Asymmetry:** Off-setting text blocks against large-scale photography to create a dynamic, editorial rhythm. * **Scale Contrast:** Pairing massive `display-lg` serif headers with tiny, tracked-out `label-sm` sans-serif accents. * **Atmospheric Depth:** Moving away from borders and shadows toward a system of tonal shifts and glass-like layering. --- ## 2. Colors The palette is a study in monochromatic sophistication, utilizing subtle temperature shifts in grays to define importance. ### The "No-Line" Rule **Explicit Instruction:** You are prohibited from using 1px solid borders to section content. Boundaries must be defined solely through background color shifts. To separate a section, transition from `surface` (#f9f9f9) to `surface-container-low` (#f3f3f3). This creates a "soft block" layout that feels premium and integrated rather than boxed-in. ### Surface Hierarchy & Nesting Treat the UI as physical layers of fine paper. * **Base:** `background` (#f9f9f9). * **Primary Content Area:** `surface-container-lowest` (#ffffff) for maximum "pop" against the background. * **Nested Elements:** Use `surface-container` (#eeeeee) for internal modules like search bars or filter sets to create a "recessed" look. ### Signature Textures & Glass To prevent the design from feeling "flat," use `surface_tint` (#5f5e5e) at 5-10% opacity for overlays. For floating navigation or modals, apply a **Glassmorphism** effect: use a semi-transparent `surface` color with a heavy backdrop-blur (20px+). This allows high-quality photography to bleed through the UI, maintaining a sense of place. --- ## 3. Typography The typographic strategy relies on the tension between the classicism of **Noto Serif** and the industrial clarity of **Manrope**. * **Editorial Authority:** Use `notoSerif` for all `display` and `headline` roles. This signals heritage and high-end fashion. Increase letter-spacing slightly on `display-lg` to allow the letterforms to breathe. * **Corporate Precision:** Use `manrope` for all `title`, `body`, and `label` roles. This provides the functional, modern "corporate" backbone. * **The Label Accents:** `label-md` and `label-sm` should always be uppercase with a letter-spacing of `0.05rem` or higher. These act as "tags" in a gallery, providing metadata without distracting from the visual narrative. --- ## 4. Elevation & Depth In this design system, we do not "lift" objects with light; we define them through **Tonal Layering**. * **The Layering Principle:** Depth is achieved by "stacking." A card is not a box with a shadow; it is a `surface-container-lowest` rectangle sitting on a `surface-container` background. * **Ambient Shadows:** If a floating element (like a luxury product quick-view) requires a shadow, it must be invisible to the untrained eye. Use the `on_surface` color at 4% opacity with a 40px blur and 10px Y-offset. It should feel like an ambient occlusion, not a "drop shadow." * **The "Ghost Border" Fallback:** If accessibility requires a stroke (e.g., in high-contrast modes), use the `outline_variant` (#c6c6c6) at 20% opacity. Never use a 100% opaque border. * **Zero Roundedness:** Every element—buttons, inputs, images—must have a **0px border-radius**. This maintains the "Monolith" aesthetic and feels custom-tailored. --- ## 5. Components ### Buttons * **Primary:** `primary` (#000000) background with `on_primary` (#e5e2e1) text. Rectangular (0px radius). Padding: `1rem 2.5rem`. * **Secondary:** `outline` (#777777) Ghost Border at 30% opacity. Text in `primary`. * **Tertiary:** Text-only in `primary` with a 1px `primary` underline that expands on hover. ### Input Fields * **Styling:** Forgo the four-sided box. Use a bottom-border only (`outline_variant`). Labels should be `label-sm` and always visible (never hidden as placeholders). * **Focus State:** The bottom border transitions to `primary` (#000000) with a subtle 2px thickness. ### Cards & Lists * **Rule:** No dividers. Use vertical whitespace (the "Breath" scale) to separate items. * **Photography Cards:** The image is the container. Text should sit either entirely below the image in a `surface-container-lowest` block or overlap the corner of the image using a semi-transparent glass effect. ### Chips (Filters) * **Selection:** `secondary_container` (#d6d4d4) with `on_secondary_container` (#1b1c1c). 0px radius. * **Unselected:** `surface-container-high` (#e8e8e8). ### Editorial Suggestion: The "Lookbook" Component For fashion contexts, implement a "Lookbook" component: a horizontal scrolling section where images occupy 80% of the viewport height, and typography (`headline-sm`) rotates 90 degrees to run vertically along the margin. --- ## 6. Do's and Don'ts ### Do: * **Embrace the Void:** If a section feels empty, leave it. Whitespace is a luxury signal. * **Use High-Contrast Images:** This system relies on photography with deep blacks and bright whites to complement the `primary` and `surface` tones. * **Align to a Strict Grid:** While the layout can be asymmetric, every element must align to a rigid 12-column grid. ### Don't: * **Don't Round Corners:** Even a 2px radius will break the architectural "Monolith" feel. * **Don't Use Pure White for Everything:** Use `surface` (#f9f9f9) for the background to reduce eye strain and feel more "paper-like" than digital #ffffff. * **Don't Use Icons for Primary Navigation:** Use `label-md` text. Icons can feel "app-like"; text feels "editorial." * **Don't Use Dividers:** If you feel the need for a line, use more whitespace instead. Space is your primary separator.