zugzbot 1.0.20 → 1.0.22

package/.opencode/oh-my-design/web/references/studio/DESIGN.md

@@ -1,602 +0,0 @@
----
-id: studio
-name: Studio
-country: JP
-category: design-tools
-homepage: "https://studio.design"
-primary_color: "#007cff"
-logo:
-  type: favicon
-  slug: "https://www.google.com/s2/favicons?domain=studio.design&sz=128"
-verified: "2026-06-06"
-added: "2026-06-06"
-omd: "0.1"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    primary: "#007cff"
-    blue-light: "#4b9cfb"
-    white: "#ffffff"
-    off-white: "#f7f7f7"
-    black: "#000000"
-    ink: "#111111"
-    error: "#f84f65"
-    error-deep: "#b50000"
-    caution: "#ffff99"
-    grey-50: "#fafafa"
-    grey-100: "#f5f5f5"
-    grey-150: "#f2f2f2"
-    grey-200: "#ededed"
-    grey-250: "#e5e5e5"
-    grey-300: "#eeeeee"
-    grey-400: "#cccccc"
-    grey-600: "#616161"
-    grey-700: "#333333"
-    grey-800: "#222222"
-    grey-900: "#1a1a1a"
-  typography:
-    family: { sans: "Inter", mono: "Menlo" }
-    display-hero: { size: 64, weight: 600, lineHeight: 1.05, tracking: -0.03, use: "Landing hero headline" }
-    display:      { size: 48, weight: 600, lineHeight: 1.1, tracking: -0.02, use: "Major section openers" }
-    heading-1:    { size: 32, weight: 600, lineHeight: 1.2, tracking: -0.02, use: "Page / panel titles" }
-    heading-2:    { size: 24, weight: 600, lineHeight: 1.25, tracking: -0.015, use: "Section headings" }
-    heading-3:    { size: 18, weight: 600, lineHeight: 1.35, tracking: -0.01, use: "Card / group titles" }
-    subtitle:     { size: 16, weight: 500, lineHeight: 1.4, use: "List headers, nav labels" }
-    body-lg:      { size: 16, weight: 400, lineHeight: 1.6, use: "Marketing paragraphs" }
-    body:         { size: 14, weight: 400, lineHeight: 1.55, use: "Standard UI text" }
-    body-sm:      { size: 13, weight: 400, lineHeight: 1.5, use: "Secondary info" }
-    caption:      { size: 12, weight: 400, lineHeight: 1.45, tracking: 0.01, use: "Metadata, timestamps" }
-    code:         { size: 12, weight: 400, lineHeight: 1.5, use: "CSS values, tokens (Menlo)" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 96 }
-  rounded: { sm: 4, md: 6, lg: 8, full: 9999 }
-  shadow:
-    subtle: "0 1px 2px rgba(0,0,0,0.06)"
-    floating: "0 4px 16px rgba(0,0,0,0.08)"
-    modal: "0 8px 32px rgba(0,0,0,0.16)"
-    showcase: "0 8px 24px rgba(0,0,0,0.10)"
-  components:
-    button-primary: { type: button, bg: "#111111", fg: "#ffffff", radius: 6, padding: "0 18px", font: "14px/600 Inter", use: "Primary CTA, hover #000000" }
-    button-blue: { type: button, bg: "#007cff", fg: "#ffffff", radius: 6, padding: "0 18px", font: "14px/600 Inter", use: "Action emphasis inside editor" }
-    button-secondary: { type: button, bg: "#ffffff", fg: "#111111", radius: 6, padding: "0 18px", font: "14px/500 Inter", use: "Outline, 1px #e5e5e5 border, hover #fafafa" }
-    button-ghost: { type: button, fg: "#616161", radius: 6, padding: "0 10px", font: "14px/500 Inter", use: "Tertiary / toolbar actions" }
-    button-pill: { type: badge, fg: "#4b9cfb", radius: 9999, padding: "4px 12px", font: "12px/600 Inter", use: "New, Beta, category chips" }
-    input-text: { type: input, bg: "#ffffff", fg: "#111111", radius: 6, padding: "9px 12px", font: "14px/400 Inter", use: "Standard form input, 1px #e5e5e5 border, focus #007cff" }
-    input-inset: { type: input, bg: "#f7f7f7", fg: "#111111", radius: 4, padding: "6px 8px", font: "13px/400 Inter", use: "Property/inspector value fields" }
-    card-standard: { type: card, bg: "#ffffff", radius: 6, padding: "20px", use: "Template tiles, project cards, 1px #eeeeee border, no shadow" }
-    card-floating: { type: card, bg: "#ffffff", radius: 6, padding: "16px", use: "Popovers, inspector, floating menus" }
-    card-showcase: { type: card, bg: "#f7f7f7", radius: 6, padding: "0", use: "Gallery tile, image-filled, hover scale 1.01" }
-    badge-neutral: { type: badge, bg: "#f5f5f5", fg: "#616161", radius: 4, padding: "2px 8px", font: "12px/500 Inter", use: "Tag, status metadata" }
-    badge-accent: { type: badge, fg: "#007cff", radius: 9999, padding: "3px 10px", font: "12px/600 Inter", use: "New, highlighted category" }
-    badge-error: { type: badge, fg: "#f84f65", radius: 4, padding: "2px 8px", font: "12px/600 Inter", use: "Failed / blocked state" }
-    tab-underline: { type: tab, fg: "#616161", padding: "0 4px 12px", font: "14px/500 Inter", active: "Active #111111 text + 2px #111111 bottom border", use: "Section switching" }
-    toast-default: { type: toast, bg: "#111111", fg: "#ffffff", radius: 6, padding: "12px 16px", font: "14px/500 Inter", use: "Transient confirmation" }
-    dialog-modal: { type: dialog, bg: "#ffffff", fg: "#111111", radius: 6, padding: "24px", use: "Confirm / settings dialogs" }
-    toggle-default: { type: toggle, bg: "#007cff", radius: 9999, use: "Boolean settings, #e5e5e5 off, #ffffff thumb" }
-  components_harvested: true
----
-
-# Design System Inspiration of Studio
-
-## 1. Visual Theme & Atmosphere
-
-Studio is a no-code web design tool built for designers who refuse to compromise on craft. Its marketing site is the product's strongest argument: a near-monochrome, gallery-grade canvas where the work — beautiful portfolios, landing pages, agency sites — is the only color on the page. The atmosphere is that of a white-walled Tokyo design studio: pure white surfaces (`#ffffff`), barely-there off-white panels (`#f7f7f7`), ink-black text (`#000000`, `#111111`), and an electric, surgical blue (`#007cff`) reserved almost exclusively for links and interactive moments. Nothing decorates; everything functions.
-
-The typeface is **Inter** — used at every level of the interface in a tightly controlled weight range. Inter's neutral, screen-optimized geometry is deliberate: Studio's chrome should disappear so the user's design can speak. A display face, **grandam**, makes rare appearances for editorial/branding flourishes, but the working system is Inter through and through. There is no custom brand typeface competing for attention; restraint is the brand.
-
-What defines Studio visually is *absence as a feature*. Borders are hairlines (`#eeeeee`, `#e5e5e5`), shadows are whisper-soft (`rgba(0,0,0,0.08)` and lower), and radii are small and consistent (4–6px). The interface reads as a precision instrument — closer to a code editor's calm than a consumer app's warmth. When color appears, it means something: blue is "you can act here," coral (`#f84f65`) is "something went wrong."
-
-**Key Characteristics:**
-- Monochrome-first palette: white, off-white `#f7f7f7`, and a full neutral grey ramp from `#fafafa` to `#111111`
-- Interactive blue `#007cff` (with a lighter `#4b9cfb` for secondary/hover contexts) as the sole functional accent
-- Coral `#f84f65` reserved for errors and destructive feedback
-- Inter as the universal UI typeface; grandam for rare display/editorial moments
-- Small, consistent radii (4px / 6px standard; 40px for pills)
-- Near-invisible elevation — the canvas, not the chrome, carries visual weight
-- Editorial, gallery-like negative space; the product's output is the page's color
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Studio Blue** (`#007cff`): The functional brand color. Links, primary interactive accents, active selection, focus emphasis. Used sparingly and only where the user can act.
-- **Blue Light** (`#4b9cfb`): Secondary / hover-tinted blue for chips, pill labels, and softer interactive surfaces (`border-radius:40px` accent labels).
-- **Pure White** (`#ffffff`): Primary page and panel background, card surfaces, canvas.
-- **Off-White** (`#f7f7f7`): Secondary surface — section backgrounds, inset panels, hovered rows. The "barely there" neutral that separates regions without a border.
-- **Ink Black** (`#000000` / `#111111`): Primary headings and high-emphasis text, logo mark, primary button fills.
-
-### Semantic
-- **Error Coral** (`#f84f65`): Error messages, invalid field text, destructive states. The most saturated warm tone in the system — it earns attention because nothing else competes.
-- **Error Deep** (`#b50000`): Strong error / critical fill where coral would feel too soft.
-- **Caution Yellow** (`#ffff99` / `#ff9`): Soft highlight, attention swatch (rare, editorial use only).
-- **Info / Action**: handled by Studio Blue `#007cff` — no separate info hue.
-
-### Neutral Scale
-- **Grey 50** (`#fafafa`): Lightest grey, subtle zebra fill.
-- **Grey 100** (`#f5f5f5`): Hover surface, disabled fills.
-- **Grey 150** (`#f2f2f2`): Secondary inset panel.
-- **Grey 200** (`#ededed`): Light divider.
-- **Grey 250** (`#e5e5e5`): Default border / loading-bar track (`--rebranding-loading-bg:#e5e5e5`).
-- **Grey 300** (`#eeeeee`): Hairline border, default divider.
-- **Grey 400** (`#cccccc`): Placeholder text, disabled icon.
-- **Grey 600** (`#616161`): Secondary body text, captions, metadata.
-- **Grey 700** (`#333333`): Strong body text, labels.
-- **Grey 800** (`#222222`): Near-black UI text, loading-bar fill (`--rebranding-loading-bar:#222`).
-- **Grey 900** (`#1a1a1a` / `#111111`): Headings, darkest UI ink.
-
-### Surface & Borders
-- **Border Default**: `#eeeeee`. Standard hairline divider and card edge.
-- **Border Subtle**: `#e5e5e5`. Slightly stronger separation, input borders.
-- **Border Faint**: `rgba(0,0,0,0.08)` (`#00000014`). Whisper border on light panels.
-- **Border Hover**: `rgba(0,0,0,0.11)` (`#0000001c`). Border on interactive hover.
-- **Overlay Scrim**: `rgba(0,0,0,0.5)` for modal backdrops; `rgba(0,0,0,0.04)`–`0.08` for tinted hovers.
-- **Translucent Surface**: `#f5f5f580` — half-opacity off-white for layered floating panels.
-
-## 3. Typography Rules
-
-### Font Family
-- **Primary**: `Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif`
-- **Display / Editorial**: `grandam, Inter, serif` — rare hero/branding moments only.
-- **Monospace**: `Menlo, Monaco, "Courier New", monospace` — code snippets, CSS values shown in the editor UI.
-- **Icons**: `"Material Symbols Outlined"`, `"Material Symbols Rounded"`, `"Material Symbols Sharp"`, `"Material Icons"` — Studio uses Google's Material Symbols icon fonts.
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Display Hero | grandam / Inter | 64px | 600 | 1.05 | -0.03em | Landing hero headline |
-| Display | Inter | 48px | 600 | 1.1 | -0.02em | Major section openers |
-| Heading 1 | Inter | 32px | 600 | 1.2 | -0.02em | Page / panel titles |
-| Heading 2 | Inter | 24px | 600 | 1.25 | -0.015em | Section headings |
-| Heading 3 | Inter | 18px | 600 | 1.35 | -0.01em | Card / group titles |
-| Subtitle | Inter | 16px | 500 | 1.4 | normal | List headers, nav labels |
-| Body Large | Inter | 16px | 400 | 1.6 | normal | Marketing paragraphs |
-| Body | Inter | 14px | 400 | 1.55 | normal | Standard UI text |
-| Body Small | Inter | 13px | 400 | 1.5 | normal | Secondary info |
-| Caption | Inter | 12px | 400 | 1.45 | 0.01em | Metadata, timestamps |
-| Code / Value | Menlo | 12–13px | 400 | 1.5 | normal | CSS values, tokens |
-
-### Principles
-- **Inter, narrow weight band**: The UI lives in 400 (body), 500 (labels), and 600 (headings). 700 is rare and reserved for the heaviest hero moments.
-- **Negative tracking on large type**: Display and heading sizes tighten letter-spacing (-0.01 to -0.03em) for a crisp, editorial set; body text stays at normal tracking.
-- **Black ink, grey support**: Headings in `#111`/`#000`, body in `#333`/`#616161`. Hierarchy is built from grey value, not weight gymnastics.
-- **Monospace for design values**: Anything that represents a literal CSS value (radius, color, spacing) renders in Menlo to signal "this is code."
-
-## 4. Component Stylings
-
-> Tokens below are grounded in Studio's live marketing site CSS (`entry.*.css`, Nuxt build) and product UI conventions. Where the live site exposes exact values (`#007cff` links, `#f84f65` error text, `border-radius:6px`, off-white `#f7f7f7`) those are used verbatim; geometry for product-chrome components follows Studio's observed small-radius, hairline-border system.
-
-### Buttons
-
-**Primary (Fill / Black)**
-- Background: `#111111`
-- Text: `#ffffff`
-- Border: none
-- Radius: 6px
-- Padding: 0 18px
-- Font: 14px / 600 / Inter
-- Height: 40px
-- Hover: background `#000000`
-- Use: Primary CTA ("Start for free", "Publish")
-
-**Primary (Fill / Blue)**
-- Background: `#007cff`
-- Text: `#ffffff`
-- Border: none
-- Radius: 6px
-- Padding: 0 18px
-- Font: 14px / 600 / Inter
-- Height: 40px
-- Hover: background darkens ~8%
-- Use: Action emphasis inside the editor (apply, confirm interaction)
-
-**Secondary (Outline)**
-- Background: `#ffffff`
-- Text: `#111111`
-- Border: 1px solid `#e5e5e5`
-- Radius: 6px
-- Padding: 0 18px
-- Font: 14px / 500 / Inter
-- Height: 40px
-- Hover: border `rgba(0,0,0,0.11)`, background `#fafafa`
-- Use: Secondary action paired with a fill button
-
-**Ghost / Text**
-- Background: transparent
-- Text: `#616161`
-- Border: none
-- Radius: 6px
-- Padding: 0 10px
-- Font: 14px / 500 / Inter
-- Hover: text `#111`, background `rgba(0,0,0,0.04)`
-- Use: Tertiary / toolbar actions
-
-**Pill (Accent Label)**
-- Background: `rgba(75,156,251,0.12)`
-- Text: `#4b9cfb`
-- Border: none
-- Radius: 40px
-- Padding: 4px 12px
-- Font: 12px / 600 / Inter
-- Use: "New", "Beta", category chips
-
-**Disabled (any)**
-- Background: `#f5f5f5`
-- Text: `#cccccc`
-- Cursor: not-allowed
-- Use: Inactive action
-
-### Inputs
-
-**Text Field (default)**
-- Background: `#ffffff`
-- Text: `#111111`
-- Border: 1px solid `#e5e5e5`
-- Radius: 6px
-- Padding: 9px 12px
-- Font: 14px / 400 / Inter
-- Placeholder: `#cccccc`
-- Focus: border `#007cff`, no heavy ring (1px hairline shift only)
-- Use: Standard form / property input
-
-**Inset Field (editor panel)**
-- Background: `#f7f7f7`
-- Text: `#111111`
-- Border: 1px solid transparent
-- Radius: 4px
-- Padding: 6px 8px
-- Font: 13px / 400 / Inter (value text in Menlo)
-- Focus: background `#ffffff`, border `#e5e5e5`
-- Use: Property/inspector value fields in the design canvas
-
-**Error**
-- Border: 1px solid `#f84f65`
-- Message: `#f84f65` 12px / 400 / Inter below field
-- Use: Invalid input; coral is the system's only error color
-
-### Cards
-
-**Standard**
-- Background: `#ffffff`
-- Border: 1px solid `#eeeeee`
-- Radius: 6px
-- Padding: 20px
-- Shadow: none (border carries separation)
-- Use: Template tiles, dashboard project cards
-
-**Floating / Elevated**
-- Background: `#ffffff`
-- Border: 1px solid `rgba(0,0,0,0.08)`
-- Radius: 6px
-- Padding: 16px
-- Shadow: `0 4px 16px rgba(0,0,0,0.08)`
-- Use: Popovers, the inspector panel, floating menus
-
-**Showcase Tile**
-- Background: `#f7f7f7`
-- Border: none
-- Radius: 6px
-- Padding: 0 (image-filled)
-- Hover: scale 1.01 + shadow `0 8px 24px rgba(0,0,0,0.10)`
-- Use: Gallery of user-made sites — the marketing site's hero content
-
-### Badges / Chips
-
-**Neutral**
-- Background: `#f5f5f5`
-- Text: `#616161`
-- Radius: 4px
-- Padding: 2px 8px
-- Font: 12px / 500 / Inter
-- Use: Tag, status metadata
-
-**Accent (Blue)**
-- Background: `rgba(0,124,255,0.10)`
-- Text: `#007cff`
-- Radius: 40px
-- Padding: 3px 10px
-- Font: 12px / 600 / Inter
-- Use: "New", highlighted category
-
-**Error**
-- Background: `rgba(248,79,101,0.12)`
-- Text: `#f84f65`
-- Radius: 4px
-- Padding: 2px 8px
-- Font: 12px / 600 / Inter
-- Use: Failed / blocked state
-
-### Tabs
-
-**Underline Tabs**
-- Container border-bottom: 1px solid `#eeeeee`
-- Inactive: text `#616161`, 14px / 500
-- Active: text `#111111`, 2px bottom border `#111111` (or `#007cff` for in-editor context)
-- Padding: 0 4px 12px
-- Use: Section switching in dashboard and settings
-
-### Toasts / Snackbars
-
-**Default**
-- Background: `#111111`
-- Text: `#ffffff`
-- Radius: 6px
-- Padding: 12px 16px
-- Shadow: `0 4px 16px rgba(0,0,0,0.16)`
-- Font: 14px / 500 / Inter
-- Use: Transient confirmation ("Copied", "Published")
-
-**Error (snackbar.error)**
-- Message text: `#f84f65`
-- Background: `#111111`
-- Use: Failure feedback — coral message on the dark snackbar
-
-### Dialogs
-
-**Centered Modal**
-- Background: `#ffffff`
-- Text: `#111111`
-- Border: none
-- Radius: 6px (large modals 8px)
-- Padding: 24px
-- Shadow: `0 8px 32px rgba(0,0,0,0.16)`
-- Backdrop: `rgba(0,0,0,0.5)`
-- Use: Confirm / settings dialogs
-
-### Toggles
-
-**Default**
-- Track: `#007cff` (on) / `#e5e5e5` (off)
-- Radius: 9999px
-- Thumb: `#ffffff` circle, `0 1px 2px rgba(0,0,0,0.2)` shadow
-- Use: Boolean settings, publish toggles
-
-### Loading Bar
-
-- Track: `#e5e5e5` (`--rebranding-loading-bg`)
-- Fill: `#222222` (`--rebranding-loading-bar`)
-- Height: 2–3px, top-of-viewport
-- Use: Route / publish progress
-
----
-
-**Verified:** 2026-06-06
-**Tier 1 sources:** studio.design live site CSS (`/_nuxt/entry.*.css`, Nuxt build) — confirmed `#007cff` link color, `#4b9cfb` accent pill, `#f84f65` error message, off-white `#f7f7f7`, neutral ramp `#fafafa`→`#111`, `border-radius:6px/4px/40px`, Inter typeface, `--rebranding-loading-bg:#e5e5e5` / `--rebranding-loading-bar:#222`, Material Symbols icon fonts. JS bundle (`/_nuxt/*.js`) — Inter referenced 200+ times; grandam display face. · https://studio.design (live production site)
-**Conflicts unresolved:** none.
-
-## 5. Layout Principles
-
-### Spacing System
-- Base unit: 4px
-- Common values: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 96px
-- Editor panels favor tight 4–8px rhythm; marketing sections breathe at 48–96px.
-
-### Grid & Container
-- Marketing content: centered, max-width ~1200px, generous side gutters.
-- Dashboard: responsive grid of template/project cards, ~24px gaps.
-- Editor: 3-zone layout — left layers panel, center canvas, right inspector — each a hairline-separated region on `#f7f7f7` / `#ffffff`.
-
-### Whitespace Philosophy
-- **The output is the color.** The chrome is monochrome so user-made designs in the gallery carry all the visual energy. Negative space is the frame around the art.
-- **Editorial breathing in marketing.** Hero and section spacing is luxurious (64–96px) — the site behaves like a design portfolio, not a SaaS landing page.
-- **Dense, calm tooling.** Inside the editor, density rises but stays calm via hairline dividers instead of boxes and shadows.
-
-### Border Radius Scale
-- Tight (2px): inline tags, tiny controls
-- Compact (4px): inset fields, small chips
-- Standard (6px): buttons, cards, inputs, modals
-- Pill (40px / 9999px): accent labels, toggles
-
-## 6. Depth & Elevation
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (0) | No shadow; 1px `#eeeeee` border | Page, cards, panels |
-| Subtle (1) | `0 1px 2px rgba(0,0,0,0.06)` | Hovered rows, small lifts |
-| Floating (2) | `0 4px 16px rgba(0,0,0,0.08)` | Popovers, inspector, menus |
-| Modal (3) | `0 8px 32px rgba(0,0,0,0.16)` | Dialogs, command palette |
-| Showcase (hover) | `0 8px 24px rgba(0,0,0,0.10)` + scale 1.01 | Gallery tile hover |
-
-**Shadow Philosophy**: Studio treats elevation like a designer's tool, not a default. Most separation is achieved with hairline borders (`#eeeeee`, `rgba(0,0,0,0.08)`) rather than shadow. When a shadow appears it is soft, pure-black, low-opacity, and single-layer — never colored, never dramatic. Depth is a whisper so the user's canvas stays the loudest thing on screen.
-
-### Blur Effects
-- Floating panels and the sticky nav use a light `backdrop-filter: blur(12px)` over a translucent `#f5f5f580` surface for a frosted, modern feel.
-
-## 7. Do's and Don'ts
-
-### Do
-- Keep the interface monochrome — white, off-white `#f7f7f7`, and the grey ramp do the structural work.
-- Use `#007cff` only for links and interactive accents; let it stay rare and meaningful.
-- Reserve coral `#f84f65` strictly for errors and destructive feedback.
-- Use Inter at 400/500/600; build hierarchy from grey value and size, not heavy weights.
-- Prefer 1px hairline borders (`#eeeeee`) over shadows for separation.
-- Keep radii small and consistent: 6px for most things, 4px for inset fields, pill for labels/toggles.
-- Tighten letter-spacing on display/heading type; leave body at normal.
-
-### Don't
-- Don't introduce decorative color — the user's design is the only color that matters.
-- Don't use blue for non-interactive decoration; it must always mean "you can act here."
-- Don't reach for heavy shadows or multi-layer elevation; whisper-soft single-layer only.
-- Don't use 700+ weight for body or labels — reserved for the largest hero moments.
-- Don't round corners past 8px (except pills/toggles).
-- Don't fill the canvas chrome with borders-and-boxes; hairlines and whitespace separate regions.
-- Don't mix warm accents (orange/coral) into primary actions — black or blue only.
-
-## 8. Responsive Behavior
-
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <768px | Single-column marketing; editor shows a "design on desktop" prompt |
-| Tablet | 768–1024px | 2-column galleries, collapsible side panels |
-| Desktop | 1024–1440px | Full 3-zone editor, multi-column dashboard |
-| Wide | >1440px | Centered max-width ~1200–1320px content, expanded gutters |
-
-### Touch Targets
-- Buttons: 40px height standard; 32px compact toolbar controls.
-- List rows: minimum 44px tappable height on touch.
-- Editor is desktop-first; mobile primarily serves marketing and viewing.
-
-### Collapsing Strategy
-- Marketing multi-column sections stack to single column under 768px.
-- Editor side panels (layers, inspector) collapse to icons / drawers on narrow widths.
-- Sticky frosted nav condenses to a hamburger on mobile.
-
-### Image Behavior
-- Gallery tiles maintain aspect ratio, fill-cover within `#f7f7f7` frames.
-- Hero/showcase imagery is full-bleed and high-resolution — the product's proof.
-- Icons render via Material Symbols at 18–24px.
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Primary CTA: Ink Black (`#111111`) bg, white text
-- Interactive / Link: Studio Blue (`#007cff`)
-- Accent (soft): Blue Light (`#4b9cfb`)
-- Background: Pure White (`#ffffff`)
-- Background Surface: Off-White (`#f7f7f7`)
-- Heading text: Ink (`#111111` / `#000000`)
-- Body text: Grey (`#333333`)
-- Secondary text: Grey (`#616161`)
-- Placeholder: Light Grey (`#cccccc`)
-- Border: Hairline (`#eeeeee` / `#e5e5e5`)
-- Error: Coral (`#f84f65`)
-
-### Example Component Prompts
-- "Create a Studio template card: white bg, 1px #eeeeee border, 6px radius, no shadow. Title 16px weight 600 #111, meta 13px weight 400 #616161. Hover: lift with 0 8px 24px rgba(0,0,0,0.10) and scale 1.01."
-- "Build a primary button: #111111 bg, white text, 14px weight 600 Inter, 40px height, 6px radius, 0 18px padding. Hover #000000. Disabled #f5f5f5 bg / #cccccc text."
-- "Design an inspector field: #f7f7f7 bg, 4px radius, 6px 8px padding, label 12px #616161, value in Menlo 13px #111. Focus: white bg + 1px #e5e5e5 border."
-- "Create an accent pill: rgba(0,124,255,0.10) bg, #007cff text, 12px weight 600, 40px radius, 3px 10px padding. Use for 'New' labels."
-- "Design an error state: input border 1px #f84f65, message below 12px #f84f65 Inter. Snackbar: #111 bg, message text #f84f65."
-
-### Iteration Guide
-1. Default to monochrome; add `#007cff` only on interactive elements.
-2. Inter everywhere, weights 400/500/600; build hierarchy with grey value + size.
-3. Radius is 6px (buttons/cards/inputs), 4px (inset fields), pill (labels/toggles).
-4. Separate regions with 1px hairlines (`#eeeeee`), not shadows.
-5. Shadows are soft, pure-black, single-layer; reserve for floating/modal.
-6. Coral `#f84f65` is errors only — never decorative.
-7. Let whitespace and the user's content be the visual interest.
-
----
-
-## 10. Voice & Tone
-
-Studio speaks like a confident creative director: clear, unhurried, and quietly proud of craft. The promise is freedom without compromise — "No code. All creative freedom." Copy is short, declarative, and benefit-led, never jargon-heavy or hype-driven. It assumes the reader is a designer who values taste. English is the primary marketing voice (Studio is a global product with Japanese roots); the tone is international-minimalist rather than localized.
-
-| Context | Tone |
-|---|---|
-| Taglines | Short, bold, freedom-themed. "The easiest and quickest way to build your beautiful portfolio website, landing page or anything." |
-| CTAs | Direct imperatives — "Start for free", "Publish", "Try Studio". No exclamation spam. |
-| Feature copy | Benefit-first, plain language. "Design and publish, all in one place." |
-| Success feedback | Brief past-tense confirmation — "Published", "Copied". |
-| Error messages | Specific and blameless, in coral. State what happened and the fix. |
-| Empty states | One calm line explaining what goes here, plus one action. |
-| Onboarding | Encouraging, one idea per step, designer-to-designer. |
-
-**Forbidden phrases.** Avoid "Oops", "Whoops", generic "Something went wrong" with no next step, and growth-hacky urgency ("Don't miss out!"). No emoji in product chrome. Keep punctuation minimal — buttons have no terminal periods.
-
-## 11. Brand Narrative
-
-Studio is a no-code web design tool that lets designers build and publish real, production-quality websites without writing code — portfolios, landing pages, agency sites, "or anything." Its founding conviction is that the gap between *design* and *live website* should not require handing your work to a developer, and that no-code should not mean low-craft. The product's whole thesis is **creative freedom with professional output**: a true visual canvas with real responsive layout, interactions, and CMS, that publishes to a fast hosted site.
-
-That thesis is encoded in the brand surface. The marketing site is deliberately monochrome because the gallery of user-made sites supplies all the color — the most persuasive demo is the work itself. The single functional blue (`#007cff`), the hairline borders, the small consistent radii, and the relentless use of Inter all say the same thing: *this tool gets out of your way.* Where consumer apps decorate to feel friendly, Studio strips down to feel like an instrument. The brand respects the designer's eye by refusing to compete with it.
-
-Studio (a Japanese product with a global audience) sits in the design-tools category alongside Webflow, Framer, and Figma Sites, but stakes out a distinctly editorial, restraint-driven aesthetic — closer to a Tokyo gallery than a Silicon Valley dashboard. Its evident in-progress rebranding (the `--rebranding-*` tokens in the live CSS) signals a brand that treats its own surface as a living design project.
-
-What Studio refuses: visual noise, decorative color, heavy chrome, and the assumption that "no-code" must look like a toy. Its narrow middle — powerful enough for professionals, calm enough to disappear — is the entire promise.
-
-## 12. Principles
-
-1. **The output is the color.** Keep the chrome monochrome so user-made designs carry every bit of visual energy. The interface is a frame, not a painting.
-2. **Color means action.** `#007cff` appears only where the user can interact. It never decorates. If it's blue, it's tappable.
-3. **Hairlines over shadows.** Separate regions with 1px borders and whitespace. Reserve soft, single-layer shadows for genuinely floating surfaces.
-4. **One typeface, narrow weights.** Inter at 400/500/600 builds the whole system. Hierarchy comes from grey value and size, not weight theatrics.
-5. **Small, consistent radii.** 6px is the system's voice; 4px for inset fields; pills for labels and toggles. Nothing rounder.
-6. **Restraint is craft.** Every removed element is a design decision. The calm is engineered, not accidental.
-7. **Editorial in marketing, dense in tooling.** The landing page breathes like a portfolio; the editor packs density without losing calm.
-8. **No-code is not low-craft.** Defaults must produce professional-grade results — the brand's credibility depends on it.
-
-## 13. Personas
-
-*Personas below are fictional archetypes informed by Studio's stated audience (designers building portfolios, landing pages, and client sites), not individual people.*
-
-**Aoi, 29, Tokyo.** Freelance brand designer. Uses Studio to ship client landing pages without looping in a developer. Cares about pixel-precise layout and fast publishing. Expects the editor to feel like a design tool, not a website builder — if a control behaves "templatey," she's annoyed. Reads English and Japanese; the international-minimalist voice suits her.
-
-**Marco, 34, Milan.** Runs a two-person studio. Builds his own portfolio and small agency sites on Studio. Values that the marketing gallery shows real, beautiful sites — it's why he trusted the tool. Wants the chrome to disappear so client demos look like *his* work, not the tool's. Will abandon any builder that stamps its brand on the output.
-
-**Priya, 24, remote.** Junior product designer building her first portfolio. No-code is essential — she doesn't write CSS yet. Loves that Studio's defaults already look professional, so she can't make it ugly by accident. Learns by exploring; needs calm, low-noise UI and one clear action per step.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (first use)** | One calm line of `#616161` body text explaining what belongs here, plus a single primary action (black `#111` button). No illustration clutter. |
-| **Empty (filtered)** | One `#616161` caption ("No results"). No button — the user adjusts the filter. |
-| **Loading (route/publish)** | 2–3px top loading bar: `#e5e5e5` track, `#222` fill. Non-blocking; content stays visible. |
-| **Loading (content)** | Skeleton blocks at `#f5f5f5` matching final layout, subtle 1.2s shimmer. Rounded at component radius. |
-| **Error (inline field)** | 1px `#f84f65` border on the input; message below in `#f84f65` 12px Inter. One actionable sentence. |
-| **Error (snackbar)** | `#111` background, message text in `#f84f65`, ~3s auto-dismiss, bottom of screen. |
-| **Success (toast)** | `#111` background, white 14px / 500 text ("Published"). Brief, no icon noise. |
-| **Hover (card/tile)** | Lift with `0 8px 24px rgba(0,0,0,0.10)` + scale 1.01; border may shift to `rgba(0,0,0,0.11)`. |
-| **Focus (input)** | Border shifts to `#007cff`; no heavy ring — a single hairline change. |
-| **Disabled** | `#f5f5f5` fill, `#cccccc` text, `not-allowed` cursor. Geometry unchanged. |
-| **Selected (canvas object)** | `#007cff` 1px selection outline + corner handles; blue is the editor's selection language. |
-
-## 15. Motion & Easing
-
-**Durations:**
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | State flips, checkbox toggles |
-| `motion-fast` | 120ms | Hover, focus, small reveals, button feedback |
-| `motion-standard` | 220ms | Default — popovers, panel expands, tab switches |
-| `motion-slow` | 360ms | Emphasized — modal open, onboarding step advance |
-| `motion-page` | 300ms | Route transitions, publish flow |
-
-**Easings:**
-
-| Token | Curve | Use |
-|---|---|---|
-| `ease-enter` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Appearing — popovers, toasts, panels |
-| `ease-exit` | `cubic-bezier(0.4, 0.0, 1, 1)` | Leaving — dismissals |
-| `ease-standard` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Two-way — collapsibles, tabs, hovers |
-| `ease-soft` | `cubic-bezier(0.33, 1, 0.68, 1)` | Showcase tile hover lift, gentle scale |
-
-**Signature motions.**
-
-1. **Gallery tile lift.** On hover, showcase tiles scale to 1.01 and gain a soft `0 8px 24px rgba(0,0,0,0.10)` shadow over `motion-fast / ease-soft` — a quiet, tactile "this is real work" cue.
-2. **Frosted panel reveal.** Floating panels fade/translate in 6px with `motion-standard / ease-enter`, backed by `backdrop-filter: blur(12px)` over `#f5f5f580` for a modern frosted feel.
-3. **Top loading bar.** The `#222` fill animates across the `#e5e5e5` track during route/publish actions — non-blocking progress at the viewport edge.
-4. **Reduce motion.** Under `prefers-reduced-motion: reduce`, all `motion-*` tokens collapse to `motion-instant`; lifts and slides become opacity-only. The tool stays usable, just less kinetic.
-
-<!--
-OmD v0.1 Sources — Studio (studio.design)
-
-Token verification via live site (WebFetch + curl, 2026-06-06):
-- https://studio.design — og:description / meta description:
-  "The easiest and quickest way to build your beautiful portfolio website,
-   landing page or anything. No code. All creative freedom." (used in §10/§11).
-- /_nuxt/entry.*.css (Nuxt build) — confirmed real tokens:
-  link color #007cff; accent pill color #4b9cfb (border-radius:40px);
-  error message color #f84f65; deep error #b50000; off-white #f7f7f7;
-  neutral ramp #fafafa/#f5f5f5/#f2f2f2/#ededed/#e5e5e5/#eee/#ccc/#616161/
-  #333/#222/#1a1a1a/#111; border-radius 6px/4px/40px/2px;
-  font-family Inter; display face grandam; Material Symbols icon fonts;
-  --rebranding-loading-bg:#e5e5e5; --rebranding-loading-bar:#222.
-- /_nuxt/*.js — Inter referenced 200+ times (confirms universal UI typeface).
-
-primary_color #007cff is Studio's functional interactive/link blue — the one
-chromatic accent in an otherwise monochrome system. Black (#111) is the
-primary CTA fill; blue is the interaction signal.
-
-Component geometry for product-chrome elements (buttons, inputs, cards,
-dialogs) follows Studio's observed small-radius (6px/4px), hairline-border,
-soft-single-layer-shadow system; exact link/error/accent colors and radii are
-verbatim from the live CSS.
-
-Personas (§13) are fictional archetypes informed by Studio's stated audience
-(designers building portfolios, landing pages, client sites). Country JP per
-catalog metadata. Interpretive claims (e.g., "the output is the color") are
-editorial readings of the monochrome design, not documented Studio statements.
--->