Studio DESIGN.md

Design System Inspiration of Studio

Overview

Visual Theme & Atmosphere

Studio is a Japanese no-code website design and publishing platform. Its company profile dates its establishment to April 2016. The current homepage presents a visual editor, collaborative CMS, hosting, forms, SEO, Lottie and Figma import as parts of the website-making workflow. Its promise combines creative freedom with getting an idea onto the web without code. Company profile, homepage

The distinctive expression has a documented foundation. Studio's 2024 brand book describes a reduction from bright brand colours to monochrome so creators and their work occupy the foreground. The dimensional logo is a vessel with negative space that the creator completes; the slash extends into a 45° visual motif. On the measured homepage, near-black type and actions sit beside a large collage of colourful websites. The contrast between restrained framing and expressive work is an application of that published direction. Brand book

The rebrand was announced on 1 October 2024 with Nuevo.Tokyo. The company changed its styling from STUDIO to Studio, using Studio.Design globally and Studio in Japan. The release also described an expansion beyond professional web designers toward entrepreneurs, marketers and other people with something to create. The accompanying interview connects the work to ma (emptiness), tatami (modularity) and iki (refinement). These are documented sources for the restraint and modularity, rather than principles inferred from CSS variable names. Official announcement, rebrand interview

The measured homepage is the English edition at studio.design/ (lang="en"), captured from South Korea with locale ja-JP; no regional redirect occurred. All measured component values below belong to this public marketing surface.

Primary tasks evidenced by the homepage are starting a site, learning the editor/CMS/publishing workflow, finding a template and reading creators' stories. Editing a logged-in project was outside the capture.

Brand Narrative

The current brand is the result of a completed 2024 update. Studio's official release connects the vessel concept to a broader audience and a global expansion, while retaining the 45° line from the earlier identity. The name changed from all-caps STUDIO to Studio, with Studio.Design used globally. Official announcement

The rebrand interview supplies a more precise explanation for the restrained surface: creators' work completes the identity. Its account of ma, tatami and iki connects emptiness, modular fit and refinement to the toolkit. It also describes the logo taking on featured work's tones. This is the source for allowing expressive work inside a restrained frame; it does not require all interactive controls to be blue. Rebrand interview

The corporate mission page states that removing obstacles to expression should increase the joy of creating. That mission provides context for the no-code workflow without turning visual observations into invented product principles. Mission and values

Principles

The published brand principles can be paraphrased as three implementation goals: put creators first and provide a vessel for their work; reduce process friction so they can focus on creating; combine bold design with a welcoming character. Brand book

For this measured homepage, those goals translate into monochrome framing, prominent examples of created sites, differentiated typography and small but specific control feedback. This last sentence is an implementation reading of the observed surface, not an additional company-authored principle.

Personas

The official 2024 release identifies professional web designers, enterprise teams, sole proprietors, startup founders and company marketers as intended audiences. It describes expressive efficiency for professionals, broader organisational use cases for enterprise, and fast quality site creation for individuals or small teams. No invented named persona, age, location or behavioural prediction is retained. Official announcement

Colors

Use the observed monochrome contrast as the foundation. The census counted 802 elements; these are element counts, not proportions of visible pixels.

Additional declarations survive in the page's shared renderer styles: rich-text links use #007cff; a table-of-contents block declares #f5f5f5 fill with #616161 ink; rich-text table borders are #f2f2f2 with #1a1a1a text; preformatted blocks declare #eeeeee; rules written as #ccc correspond to #cccccc horizontal-rule borders. The page also contains a #111111 text utility and #fafafa hover-label declarations. These are declared CSS facts, not a measured semantic palette for editor controls. They are retained here without extending their roles. Homepage inline CSS

No error, success, warning or disabled colour role was verified on an active control.

Typography

The evidence classes are separate:

• Official product use: the opened company and brand pages do not name a product typeface. No claim about the logged-in editor's font follows from this capture.
• Live-loaded: the census reports Inter at 400/500/600/700, Inter Tight at 500/700, and Noto Sans JP at 400/500/600/700, all normal. These three text families populate the typography family tokens. Inter Tight is computed on the header Pricing link; Inter is computed on the surveyed footer Design Editor link. The headline's computed stack is Inter, "Noto Sans JP". Noto Sans JP is an observed site-loaded face, not a substitute selected for this reference.
• Serving evidence: the document links a Google Fonts stylesheet requesting those families and weights, plus Inter Tight italics. That stylesheet was unreadable to the CSSOM walker; its requested families and the loaded-face census are different evidence. Font Awesome 6 Brands 400 is also loaded, from a production-os-assets WOFF2 URL, for social icons; it is excluded from the text-family tokens.
• Official distributed assets: no downloadable brand font package or product-font specification was verified on the opened brand-book pages. No font files were downloaded.
• Declared-only: Material Icons 400 and Font Awesome 6 Free 900 have @font-face declarations using storage.googleapis.com/production-os-assets/ URLs but are absent from the loaded list. Menlo remains named in the shared rich-text pre rule, without a loaded face. They receive no specimen or text-family token.
• Unresolved: the prior grandam display use, Material Symbols variants and universal editor use of Inter were not confirmed. Substitute: none chosen.

This supports a specific pairing of Inter with Inter Tight, and actual 700-weight secondary action labels. It does not support the prior universal 400/500/600-only hierarchy or an eleven-role type scale.

Layout

At 1440 × 1000 the hero pairs a large headline with a diagonal collage of website work and a lower-right text/CTA group. The survey records the fixed header at 1385 × 62px, with the logo beginning at x=30 and the primary CTA at x=1054, y=934. These coordinates identify this capture, rather than a responsive positioning recipe.

Keep the measured control spacing: 12px vertical action padding, 28px horizontal padding on the hero action, and 24px on the secondary action. The declared header navigation gap is 30px (--gap-h:30px; --gap-v:0px). This does not establish a 4px global spacing grid.

Observed corner treatments are 0px on Pricing, 4px on hero/signup links, 8px on the white secondary link and Catarina story image. The survey also records 6px on the Uday story image link. Use the value belonging to the component; there is no evidence for a universal 6px rule.

The brand book's negative-space and modular-vessel ideas offer a documented rationale for keeping surrounding structure restrained. Dashboard grids and editor panel dimensions were not measured. Brand book

Responsive Behavior

Only desktop was rendered for measurement. The opened HTML includes style blocks at max-width:1280px, 768px, 480px and 360px. The hero rule declares 80px at the desktop base, 60px at max-width 768px and 40px at max-width 480px; the mobile rule suppresses the hero arrow's hover translation. These are stylesheet declarations, not mobile interaction measurements. Editor drawers, touch target minima and a desktop-only editor prompt were not verified. Homepage CSS

Elevation & Depth

The hero action, Pricing link and story image have no measured shadow. The secondary white action has one soft black shadow at rest and removes it on hover. That reversal is the verified elevation behaviour; it should not be replaced with a generic hover lift.

The header's inline rule declares backdrop-filter: blur(50px) and a transparent white background, alongside a 4px radius. This is declaration evidence, not a computed blur measurement. No modal/popover elevation scale was verified. Homepage CSS

Values kept in prose

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

• shadow.secondary-rest: rgba(0, 0, 0, 0.1) 0px 2px 15px 0px

Motion & Easing

Computed transition strings support component-specific timing: the hero link has 0.3s cubic-bezier(0.2, 1, 1, 1) 0s; the white secondary has 0.4s cubic-bezier(0, 0.5, 0.22, 1) 0s; Pricing, the story image and header signup have 0.3s cubic-bezier(0.4, 0.4, 0, 1) 0s. Each transition applies to the computed all, --g-angle, --g-color-0, --g-position-0, … --g-position-11 list, reproduced in full in the verification Proof block.

The arrow's measured transform belongs to its child image. The timing above is the enclosing link's computed transition; the capture did not record the child's own transition string. Do not treat the link timing as a measured arrow-animation duration.

The stylesheet contains scoped reduced-motion rules for scrolling, dialogs and toggles. It does not establish the prior claim that all animation tokens collapse to an instant global state, and no reduced-motion browser pass was made. A reusable route/modal/gallery motion scale remains unverified. Homepage CSS

---

Verified 2026-11-03. First-party narrative: company profile, mission, legal notice, brand book, rebrand interview, official 2024 announcement. Live values: homepage survey and five-control states capture, documented in verification.md. The nonsense-path control returned HTTP 404.

Components

All five samples are links. Pointer states were sampled with the intended element actually hovered; pressed snapshots matched :active. Keyboard focus came from real Tab traversal. Border is none for each measured link.

The first three have measured authored pointer changes and enter tokens.components. The last two have unchanged pointer states and only browser focus indication; their identities remain useful prose. No input, badge, tab, toast, dialog, toggle or disabled control was verified as a current product component.

States

The actual browser outline string is rgb(0, 95, 204) auto 1px off 1px; its colour is not a Studio token. The comparison covers each link and its pseudo-elements, descendants with pseudo-elements, and three ancestor levels. There are two descendants for the hero action, three for the secondary, zero for Pricing, and one each for the story image and header signup; the story descendant is empty and was included. It compares computed colours, borders, outlines, shadows, opacity, transforms, filters, sizes, decorations, backgrounds, masks, image sources and SVG attributes. It cannot establish absence of changes inside video/canvas content, closed shadow roots, cross-origin frames or siblings.

No empty, loading, error, success, selected-editor-object or disabled state was observed. The original recipes for these states are unconfirmed rather than current specifications.

Do's and Don'ts

Practical guidance derived from the measured homepage and the published brand book:

• Frame colourful creator work with the observed monochrome surfaces and ink.
• Give the hero action its 4px radius and moving arrow; give the white feature action its separate 8px radius and shadow-removal response.
• Use Inter Tight for the measured header navigation treatment and preserve the distinction between enclosing links and visible child labels.
• Preserve negative space and the 45° motif when following the documented brand direction. Brand book
• Keep the browser focus outline available; no authored focus-ring colour was established.

Do not import an unverified blue editor action, coral error scheme, uniform 6px radius, card lift, disabled recipe or shadow scale into this measured marketing reference. These prior claims remain individually traceable in the accompanying report.

Voice & Tone

The English homepage uses short invitations: the hero greets a new site, and actions invite the visitor to start free or learn more. Product descriptions connect layout design, content collaboration and publication to the visitor's work. This is observed copy, not a comprehensive editorial policy. Homepage

The brand book explicitly combines boldness with friendliness and asks the system to simplify the creative process. Use that published direction as the tone anchor. Error-message rules, forbidden phrases, punctuation restrictions, emoji prohibitions and onboarding dialogue were not verified. Brand book

Agent Prompt Guide

Use this prompt for the measured surface: “Create an English Studio-style marketing composition with near-black #222222 paragraph ink, pale neutral framing and creator website imagery as the main source of colour. Use Inter with Inter Tight where evidenced. Make the hero action a 42.4px-high link with a 4px radius, 12px 28px padding, white 16px/600 label and an arrow that translates 2px right and 2px up on hover and press. Keep its fill unchanged.”

For the paired secondary treatment: “Use a 46.4px-high white link with an 8px radius, 12px 24px padding and a near-black 16px/700 label. Start with rgba(0, 0, 0, 0.1) 0px 2px 15px 0px, and remove that shadow while the feature panel is hovered.”

For navigation: “Use a transparent, square-cornered Pricing link, 15px/500 Inter Tight with 21px line height; fade opacity to 0.6 on hover and press.” These recipes describe the sampled components and do not prescribe logged-in editor chrome.