# Design System Document: The Executive Editorial ## 1. Overview & Creative North Star **Creative North Star: The Sovereign Architect** This design system moves away from the "generic corporate template" by embracing a high-end editorial aesthetic. It is inspired by prestigious Japanese business publications and architectural minimalism. Instead of relying on boxes and lines, we use **intentional asymmetry, massive typographic contrast, and tonal layering** to create a sense of authority and calm. The goal is to evoke the feeling of a premium physical workspace: deep indigo inks, gold accents, and expansive white space. We break the grid by allowing large headlines to overlap imagery and by using "suspended" layouts that feel light yet grounded. --- ## 2. Colors: Tonal Depth & Soul Our palette is rooted in deep Japanese Navy (#0C3260) and professional Sky Blue (#00A2E8), accented with a refined Gold (#E1B64A). ### The "No-Line" Rule **Explicit Instruction:** You are prohibited from using 1px solid borders to define sections or containers. Visual separation must be achieved through: - **Background Shifts:** Placing a `surface_container_low` section against a `surface` background. - **Tonal Transitions:** Moving from `primary_container` to `primary` to define content blocks. - **Negative Space:** Using generous padding (minimum 80px-120px between sections) to signify a change in context. ### Surface Hierarchy & Nesting Treat the UI as a series of physical layers. - **Base Layer:** `surface` (#f9f9ff) - **Secondary Block:** `surface_container_low` (#f0f3ff) - **Interactive/Floating Elements:** `surface_container_lowest` (#ffffff) to provide "lift." - **Nesting:** When placing a card within a section, ensure the card uses a tier higher (lighter) or lower (darker) than its parent. This creates a "recessed" or "elevated" effect without a single line being drawn. ### The "Glass & Gold" Rule To add soul to the corporate structure: - **Glassmorphism:** For navigation bars or floating action overlays, use `surface` at 80% opacity with a `20px` backdrop-blur. - **Signature Textures:** Use subtle linear gradients for primary CTAs (e.g., `primary` to `primary_container`) to provide a tactile, "ink-like" quality that flat colors lack. Use `secondary` (Gold) sparingly—only for high-conversion highlights or "VIP" indicators. --- ## 3. Typography: Editorial Authority The typography system uses **Inter** for Latin characters paired with a clean, high-legibility Gothic (e.g., Noto Sans JP) for Japanese text. - **The Scale of Authority:** We use extreme contrast between `display-lg` (3.5rem) and `body-md` (0.875rem). - **Headline Strategy:** Headlines should be tight-leading (1.1–1.2) to feel like a newspaper masthead. - **Body Strategy:** Body text should have generous line-height (1.6–1.8) and letter-spacing (0.02em) to ensure a premium, relaxed reading experience. - **Bilingual Hierarchy:** When mixing Japanese and English, the English subtitle should be in `label-md` uppercase, tracked out (0.1em), and placed above the Japanese `headline-md` in a `tertiary` color to act as a visual anchor. --- ## 4. Elevation & Depth Depth is not a shadow; it is a relationship between tones. - **The Layering Principle:** Stacking `surface_container` tokens is the primary method of organization. - **Ambient Shadows:** Only use shadows for "active" floating elements (e.g., a triggered modal). Shadows must be `on_surface` color at 4% opacity with a `32px` blur and `8px` Y-offset. It should feel like a soft glow, not a dark smudge. - **The "Ghost Border" Fallback:** If a border is required for accessibility (e.g., input fields), use `outline_variant` at 20% opacity. **Never use 100% opaque borders.** - **Glassmorphism:** Use semi-transparent `surface_variant` for cards over colored backgrounds to let the brand blue "bleed through," softening the layout. --- ## 5. Components ### Buttons - **Primary:** Gradient from `primary` to `primary_container`. `md` (0.375rem) roundedness. No border. - **Secondary:** Transparent background with a `Ghost Border` (20% opacity `outline`). Text color is `primary`. - **States:** On hover, the primary button should "lift" slightly using an `Ambient Shadow` and scale to 102%. ### Input Fields - **Style:** Minimalist. Only a bottom border using `outline_variant` at 40% opacity. - **Focus:** The bottom border transitions to `primary` (2px thickness), and the label (`label-sm`) shifts to `on_tertiary_container`. ### Cards & Lists - **The Divider Ban:** Do not use line dividers between list items. Use `24px` vertical spacing and a very subtle background shift (`surface_container_low`) on hover. - **Editorial Cards:** Images in cards should have a `sm` (0.125rem) corner radius to keep them looking "sharp" and professional. ### Additional Component: The "Hero Marquee" For business events, use a decorative text-scroll component in the background using `display-lg` typography at 5% opacity (`on_background`). This adds a layer of sophisticated motion without distracting from the CTA. --- ## 6. Do's and Don'ts ### Do: - **Asymmetric Layouts:** Place a large image on the left and offset the headline so it hangs halfway off the image edge. - **White Space:** Use more space than you think you need. High-end design "breathes." - **Tonal Color Blocks:** Use full-bleed `primary_container` sections to break up long white pages. ### Don't: - **Don't use 1px borders.** It makes the UI look like a legacy bootstrap site. - **Don't use pure black.** Use `on_background` (#001b3d) for all "black" text to maintain the blue-based tonal harmony. - **Don't use "Large" rounded corners.** Avoid `xl` or `full` roundedness for corporate components; stick to `sm` or `md` to maintain a "sharp" executive feel. - **Don't center everything.** Editorial design thrives on left-aligned or intentionally staggered content. --- *This design system is a living document intended to guide the creation of authoritative, high-conversion, and visually stunning corporate experiences.*