Studio DESIGN.md

Design System Inspiration of Studio

Overview

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

Primary tasks

• Build and publish a production-quality website without writing code
• Edit a page layout across layers, canvas, and inspector
• Start from a template tile or reopen a saved project
• Browse a gallery of real sites made with the tool

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.

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.

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.

Colors

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.

Typography

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

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."

Layout

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

Responsive Behavior

Breakpoints

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.

Elevation & Depth

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.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.subtle: 0 1px 2px rgba(0,0,0,0.06)
• shadow.floating: 0 4px 16px rgba(0,0,0,0.08)
• shadow.modal: 0 8px 32px rgba(0,0,0,0.16)
• shadow.showcase: 0 8px 24px rgba(0,0,0,0.10)

Motion & Easing

Durations:

Easings:

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.

Components

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: https://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.

States

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.

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.

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.

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.

---

Governance

Known Gaps

• Contrast, button-blue. Text #ffffff on #007cff measures 3.94:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.