# Design System Strategy: Modern Bistro Brutalism ## 1. Overview & Creative North Star **Creative North Star: "The Culinary Architect"** This design system rejects the "cozy" tropes of traditional dining in favor of a high-impact, editorial aesthetic. We are moving away from the standard restaurant template toward "Modern Bistro Brutalism"—a style defined by sharp edges, massive typographic scales, and aggressive contrast. The layout should feel like a high-end fashion magazine crossed with an architectural blueprint. We break the "template" look by using intentional asymmetry—such as oversized imagery that bleeds off-canvas and headlines that overlap containers. This isn't just a menu; it’s a structural statement. --- ## 2. Colors Our palette is a tension between the warmth of a charcoal grill and the clinical precision of a modern kitchen. * **Primary Accent (`primary` / `primary_container`):** #ac3416 / #f06543. Use this sparingly but boldly. It is the "heat" of the brand. * **The Neutrals:** A sophisticated mix of `surface` (#f8f9fb) and `tertiary` (#5c5c55). These provide a "cool" counterpoint to the vibrant orange. * **The "No-Line" Rule:** Sectioning must never rely on 1px borders. Distinguish sections using color blocking. For example, a hero section in `on_surface` (Charcoal) should sit directly against a menu section in `surface_container` (Light Grey). The edge of the color block *is* the divider. * **Surface Hierarchy & Nesting:** Use the surface tiers to create "plates." A `surface_container_highest` card sits on a `surface_container_low` background. This creates depth through value shifts rather than artificial shadows. * **Signature Textures:** Apply a subtle 2% noise grain to the `background` and `surface` tokens. This removes the "digital flatness" and gives the interface a tactile, paper-like quality. --- ## 3. Typography The typography is the backbone of this system. We use **Space Grotesk** for its mechanical, "edgy" feel and **Be Vietnam Pro** for its neutral, high-legibility body. * **Traditional Chinese Integration:** When rendering Traditional Chinese, ensure the weight is set to Bold for headlines to match the "Display" impact. Use increased tracking (1-2%) for body text to maintain the minimalist, airy feel. * **Display-LG (3.5rem):** Use for hero prices or burger names. It should feel uncomfortably large, demanding attention. * **Headline-MD (1.75rem):** Used for category headers (e.g., "經典漢堡" or "手工配菜"). * **Body-MD (0.875rem):** All menu descriptions. High line-height (1.6) is mandatory to ensure the "Modern Bistro" clarity. --- ## 4. Elevation & Depth: The Sharp-Edge Principle In this system, **rounded corners are forbidden (0px).** Every element must be sharp, reinforcing the "edgy" brand persona. * **The Layering Principle:** Depth is achieved by "stacking." Place a `surface_container_lowest` (#ffffff) element on top of a `surface_container` (#edeef0) area to create a "lift" that feels like a physical sheet of paper on a table. * **Ambient Shadows:** Avoid traditional shadows. If a floating element (like a floating action button for "Order Now") is required, use a shadow with a 40px blur at only 4% opacity, tinted with `#ac3416` to create a "glow" rather than a shadow. * **The "Ghost Border" Fallback:** If a container needs definition on a complex background, use `outline_variant` at 15% opacity. It should be felt, not seen. * **Glassmorphism:** For the navigation bar, use `surface` at 80% opacity with a `backdrop-filter: blur(20px)`. This allows the vibrant food photography to bleed through the UI, creating a high-end, layered effect. --- ## 5. Components ### Buttons * **Primary:** Solid `primary` (#ac3416) background, `on_primary` (#ffffff) text. Rectangular, 0px radius. Heavy weight. * **Secondary:** Solid `on_surface` (#191c1e) background. This provides the "High Contrast" look. * **Tertiary:** Text only in `primary`, but with a 2px underline that only spans the width of the text. ### Cards & Lists * **Forbid Dividers:** Do not use lines to separate menu items. Use `spacing-6` (2rem) of vertical whitespace or alternating background shifts (`surface` to `surface_container_low`). * **Menu Items:** Title in `Headline-SM`, Price in `Title-LG` (Primary color), Description in `Body-MD`. ### Inputs * **Style:** Underline only. Use `outline` token for the bottom border (2px). When focused, the border transforms to `primary` (#ac3416). ### Additional Component: The "Feature Ribbon" A full-width marquee or static bar using `primary_container` (#f06543) with scrolling text in `on_primary_container`. Use this for "Limited Time Offers" or "Sold Out" status. --- ## 6. Do's and Don'ts ### Do: * **Do** use asymmetrical margins. A left margin of `spacing-10` and a right margin of `spacing-4` can create a high-fashion editorial look. * **Do** let text overlap images. Ensure the text color uses `inverse_on_surface` for legibility. * **Do** treat white space as a design element. Large gaps represent luxury. ### Don't: * **Don't** use a single border-radius. Everything must be 0px. * **Don't** use "Grey" for shadows. Use a tint of the background or primary color. * **Don't** use standard "Center-Aligned" layouts for everything. Left-aligned typography is more authoritative and fits the "Architect" persona. * **Don't** use icons unless absolutely necessary. Rely on strong typography first.