Google Stitch ベータ刷新まとめ｜無限キャンバス・DESIGN.md・Prototypes・MCPを実画面で検証

Sure! Let’s flip the script entirely. Since the original was dark, moody, and "slow" (like a quiet Tokyo night), let's create a design system that is bright, energetic, and high-speed.

Think of a "Sun-Drenched Juice Bar" or a "High-Energy Health App" in the middle of a bustling city at noon.

Design System Strategy: The Neon Garden
1. Overview & Creative North Star
Creative North Star: "Electric Vitality"
This system rejects the "recessed" and "quiet" look for a high-energy, high-contrast experience. It’s designed for speed, clarity, and health. The aesthetic centers on The Neon Garden—where bright, citrus-inspired pops of color sit on a crisp, pure-white canvas. It feels fresh, urgent, and optimistic.

2. Colors & Surface Philosophy
The palette is built on "Sunlight" and "Vibrancy."

The Hero Palette:

Primary (#FFD700 - Solar Yellow): Used for primary CTAs to grab immediate attention.

Secondary (#00E676 - Neon Mint): Used for success states and health indicators.

The Pure Base: surface is absolute white (#FFFFFF). We want the interface to feel like it’s glowing with natural light.

The "Bold Border" Rule: Unlike the "No-Line" rule, we use clear, 2px solid strokes (#F0F0F0) to define cards. This ensures the user knows exactly where one piece of information ends and another begins.

3. Typography: The Pulse of the City
We use bold, approachable fonts that scream "Read me now!"

Display & Headline (Poppins): A geometric, thick sans-serif. Use display-lg (3.5rem) with Extra Bold weights to create a sense of urgency and confidence.

Body (Inter): A highly legible font designed for small screens. High X-height to make sure ingredients are easy to scan while walking.

Editorial Hierarchy:

Dish Names: Bold, black, and loud.

Prices: Large, highlighted with a secondary_container background chip to make them pop.

4. Elevation & Pop
Elevation here is about "Bouncing" and "Playfulness."

Flat-Plus: We don't use soft, realistic shadows. We use "Hard Shadows" (2px offset, 0 blur) to give a 2D, sticker-like feel to buttons.

Micro-Interactions: Elements should "pop" (scale 1.1x) when tapped, giving the user instant tactile feedback.

5. Components
Buttons (The "Call to Action")
Primary: Squircle shape (rounded corners, but not a pill). High-contrast black text on Solar Yellow.

Interaction: On hover, the button should shift its hard shadow to look like it’s being pressed into the screen.

Cards (The Grid Gallery)
Strict Grids: No asymmetry here. Everything sits in a clean, 2-column grid for maximum scanning speed.

High Saturation: Food photography should be bright, over-saturated, and shot in "top-down" flat-lay style.

6. Do’s and Don’ts
Do:
Do use bright, "Zesty" colors like orange and lime.

Do use emojis in headers to add a friendly, human touch.

Do maximize white space to keep the "Fresh" feeling.

Don’t:
Don’t use gradients. Stick to flat, solid "Power Colors."

Don’t use italics. They feel too "old-fashioned" for this high-speed system.

Don’t use any color darker than a mid-gray for text.

7. Spacing Logic
The spacing is Compact and Mathematical. We use a strict 8px grid. Section padding is 8 (2rem) because we want more content on the screen at once. It’s about efficiency, not "breathing room."