---
title: "Studio.Design design system"
variant: extended
source: https://studio.design/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/studio-design)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Studio.Design · Design System

> A quiet canvas for bold creative work

**Theme:** light · **Industry:** design · **Source:** https://studio.design/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Studio.Design pairs a restrained grayscale interface with a vivid, portfolio-first showcase of websites made with its tool. Oversized typography, open space, and crisp dark controls keep the product story clear while the example work supplies the color.

## North star

Keep the interface nearly monochrome and spacious so the portfolio imagery—not decorative UI color—carries the visual energy.

## Overview

The page uses a pale gray canvas as a quiet frame for its content, reserving near-black and charcoal for headings, navigation, buttons, and the closing footer. White feature cards break up the long gray stretches without introducing decorative color; the vivid hues mostly belong to customer site previews and should remain image content, not interface accents. Inter drives the typography, with large, tightly tracked display headlines contrasting against compact explanatory copy and understated navigation. The hero is deliberately asymmetrical: a bold statement shares space with a cascading collage of portfolio work, while supporting copy and a dark CTA sit off to the side. Farther down, product features move into a dark band with bright cards, followed by image-led galleries and testimonials on the pale ground. Wide section pauses and simple card geometry keep this long page calm and scannable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Gray | `#eeeeee` | `--color-gallery-gray` | brand | Main page canvas and recurring section background; also appears in muted text contexts. |
| Studio Ink | `#222222` | `--color-studio-ink` | neutral | Primary text, navigation, dark CTA surfaces, and the footer background. |
| Deep Frame | `#000000` | `--color-deep-frame` | surface | Dark showcase band and gradient endpoint; keep it distinct from interface accent colors. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Feature cards and occasional contrasting content sections. |
| Soft Chalk | `#f7f7f7` | `--color-soft-chalk` | neutral | Light text on dark navigation, footer, and button contexts. |
| Graphite | `#333333` | `--color-graphite` | neutral | Measured secondary link and button text; use as subdued charcoal rather than a separate bright accent. |
| Quiet Slate | `#555555` | `--color-quiet-slate` | neutral | Low-frequency footer text, not a defining page color. |

### Semantic aliases

`--color-canvas` → `#eeeeee` (Gallery Gray) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#333333` (Graphite) · `--color-surface-3` → `#000000` (Deep Frame) · `--color-surface-4` → `#222222` (Studio Ink) · `--color-text` → `#222222` (Studio Ink) · `--color-text-muted` → `#f7f7f7` (Soft Chalk) · `--color-text-subtle` → `#eeeeee` (Gallery Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#222222` | `#eeeeee` | 13.71:1 | AAA |
| `#222222` | `#ffffff` | 15.91:1 | AAA |
| `#222222` | `#333333` | 1.26:1 | fail |
| `#222222` | `#000000` | 1.32:1 | fail |
| `#f7f7f7` | `#eeeeee` | 1.08:1 | fail |
| `#f7f7f7` | `#ffffff` | 1.07:1 | fail |
| `#f7f7f7` | `#333333` | 11.79:1 | AAA |
| `#f7f7f7` | `#000000` | 19.6:1 | AAA |
| `#eeeeee` | `#ffffff` | 1.16:1 | fail |
| `#eeeeee` | `#333333` | 10.89:1 | AAA |

### Gradients

- `linear-gradient(rgb(0, 0, 0) 0%, rgb(238, 238, 238) 100%)`
- `linear-gradient(90deg, rgba(0, 0, 0, 0.8) 1%, rgba(0, 0, 0, 0.3))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 500, 700, 400, 600 | Primary typeface for display, headings, body copy, navigation, and captions. | Inter |
| Inter Tight | `--font-inter-tight` | webfont | 700, 500 | Limited bold display treatment, secondary to the dominant Inter system. | Roboto Condensed |

- **Inter:** Use measured weights from 400 to 700; large headings are tightly tracked and mostly sentence case.
- **Inter Tight:** Use selectively at bold weight; keep the narrow character distinct from the main text voice.

### Type scale — Perfect Fourth (ratio ≈ 1.333, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 600 | 1 | -0.04em | — | Inter | Largest hero and campaign-style display headlines. |
| h1 | 72px | 600 | 1 | -0.04em | — | Inter | Primary page headline, especially the opening statement. |
| h2 | 64px | 600 | 1.66 | -0.04em | — | Inter | Major section headings introducing feature and showcase areas. |
| h3 | 48px | 700 | 1.1 | -0.04em | — | Inter | Feature card titles and testimonial names. |
| h4 | 36px | 700 | 1.2 | -0.04em | — | Inter | Smaller feature and content subsection headings. |
| body | 19px | 500 | 1.4 | 0 | — | Inter | Introductory copy and feature descriptions. |
| caption | 16px | 400 | 1.66 | 0 | — | Inter | Supporting notes, labels, and secondary information. |
| nav | 16px | 400 | 1.66 | 0 | — | Inter | Header links and compact navigation labels. |

OpenType features in use: `"palt"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 4, 8, 10, 12, 16, 20, 24, 28, 30, 32, 48, 60, 100 px.
- Section rhythm 140px · element gap 16px · card padding — · max content width 1051px.

The page alternates between a constrained editorial content area and broad, image-led sections; the measured page max width is 1051px. The hero is left-aligned and intentionally asymmetric, with the headline and overlapping work collage balanced by copy and CTA at the right. Feature content uses a lead split card followed by paired cards. Later galleries and testimonials use multi-column arrangements with generous breathing room. The 4px-based spacing system includes measured section pauses up to 140px, producing a spacious, low-density rhythm.

## Shape & elevation

- Radius: button `8px` · card `8px` · media `6px` · nav `4px` · link `8px` · xs `4px` · sm `6px` · md `8px` · lg `12px`
- Shadow `md` (button, link): `rgba(0, 0, 0, 0.1) 0px 2px 15px 0px`
- Shadow `md-2` (card): `rgba(0, 0, 0, 0.1) 0px 2px 20px 0px`
- Shadow `hairline` (media): `rgba(0, 0, 0, 0.2) 0px 0px 0px 0px`
- Shadow `lg` (link): `rgba(0, 0, 0, 0.05) 0px 3px 30px 0px`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0.4, 0, 1)` on interactive elements.

Most sections and cards are flat, separated by generous whitespace and tonal contrast rather than borders. Measured cards use white surfaces with 8px or 12px corners; media uses 6px corners. Dark buttons and select links receive restrained soft shadows, while hairlines are not a defining visual device.

## Imagery

Portfolio screenshots are the main source of color: vivid website designs appear in staggered hero layers, feature previews, and broad template galleries. Testimonial portraits are mostly monochrome or muted, keeping them subordinate to the work. Treat previews as framed rectangular media with restrained rounding; do not recolor them or turn their internal palette into UI accents.

## Components

### Top navigation

A compact header over the pale canvas: Studio.Design wordmark at left, feature links across the right, and a dark Login ／ Sign Up control.

### Hero collage

Large left-aligned headline paired with overlapping portfolio previews; supporting copy and a dark Start For Free CTA sit toward the lower right.

### Feature cards

A lead white split card introduces Design Editor; smaller white cards pair concise feature copy with product-preview imagery and Learn more links.

### Portfolio gallery

Multiple rows of rectangular website previews form a color-rich showcase against the light-gray page canvas.

### Testimonial cards

Two-column creator stories pair understated portraits with compact role labels, names, quotes, and Read Story links.

### Footer

A charcoal closing area combines a centered creation prompt with compact multi-column navigation and subdued copyright details.

### Measured component styles

- **Primary button** (“Learn more”): background #222222 · text #333333 · radius 8px · padding 12px 24px · 400 16px sans-serif · shadow rgba(0, 0, 0, 0.1) 0px 2px 15px 0px
- **Secondary button** (“Find your template”): background #f7f7f7 · text #333333 · radius 8px · padding 12px 24px · 400 16px sans-serif · shadow rgba(0, 0, 0, 0.1) 0px 2px 15px 0px
- **Link** (“Read Story”): transparent background · text #333333 · radius 0px · padding 8px 0px · 400 16px sans-serif
- **Card** (“CMS without mess. Collaborate on content”): background #ffffff · text #000000 · radius 8px · padding 0px · 400 16px sans-serif
- **Navigation item** (“Templates”): transparent background · text #333333 · radius 0px · padding 0px · 400 16px sans-serif

## Do

- Keep the page canvas in Gallery Gray (#eeeeee).
- Use Studio Ink (#222222) for primary copy and dark controls.
- Let portfolio imagery provide the strong colors.
- Make the hero asymmetric and collage-led.
- Alternate open gray areas with crisp white cards.
- Reserve Deep Frame (#000000) for dark showcase moments.
- Use generous section pauses and tightly tracked large headings.

## Don't

- Do not introduce bright interface accent colors.
- Do not make the hero a centered, uniform text stack.
- Do not add heavy borders around every card.
- Do not compress the page into a dense dashboard.
- Do not apply the preview imagery's colors to buttons.
- Do not use decorative shadows as the main section separator.

## Agent prompt

Build a new page in Studio.Design’s visual style: use Gallery Gray (#eeeeee) as the broad canvas, Studio Ink (#222222) for text and key controls, Paper White (#ffffff) for feature cards, and Deep Frame (#000000) only for deliberate dark bands. Set headings in Inter with tight tracking and strong scale contrast; keep navigation and body copy understated. Create an asymmetric hero with a bold left headline, a layered portfolio collage, and supporting copy with a dark CTA off to the side. Alternate spacious gray sections with white product cards, image galleries, and compact creator testimonials. Treat portfolio previews as the main color source. Keep surfaces mostly flat, with measured restrained rounding and occasional soft shadows. Favor generous section spacing, clean alignment, and an editorial rather than dashboard-like rhythm.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Asymmetric pale-canvas hero with a left headline, overlapping portfolio previews, and right-side copy and CTA. | Primary free-start CTA | Oversized headline, Layered image collage, Dark rectangular button |
| 2 | other | Large uninterrupted dark-gray band following the hero. | Visual pause | Full-width tonal field |
| 3 | feature-grid | Dark showcase area with a lead two-column feature card and supporting cards below. | Learn more links, Feature discovery | Black-to-gray background treatment, White rounded cards, Product screenshots |
| 4 | gallery | Full-width rows of portfolio thumbnails on the pale-gray canvas. | Browse visual examples | Multi-image gallery, Image-led layout |
| 5 | gallery | Another image-led row group with multiple linked website previews. | Explore templates | Rectangular preview grid, Linked thumbnails |
| 6 | gallery | Single centered creation mark within an open gray field. | Brand recognition | Centered badge, Generous whitespace |
| 7 | gallery | Rows of additional portfolio previews spanning the content area. | Browse more examples | Image grid, Varied preview styles |
| 8 | gallery | A second set of linked examples arranged as a broad gallery. | Discover creator work | Multi-column thumbnail row, Unframed canvas |
| 9 | testimonials | Two-column testimonial cards on gray with portrait images, role labels, names, and quotes. | Read Story links, Social proof | Portrait-led cards, Compact text blocks |
| 10 | cta | Full-width black section containing a single vertical list of image-led links. | Explore templates | Dark background, Linked media thumbnails |
| 11 | footer | Charcoal footer with centered closing headline, action buttons, and grouped navigation links. | Explore site links, Closing CTA | Dark surface, Multi-column link groups, Light text |
| 12 | footer | Shallow continuation of the charcoal footer with small legal and language links. | Language selection | Muted footer text, Compact baseline links |

## Source CSS custom properties (selected)

```css
--fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free';
--fa-style-family-brands: 'Font Awesome 6 Brands';
--fa-font-brands: normal 400 1em/1 'Font Awesome 6 Brands';
--s-font-e3931b38: 'Inter Tight';
--s-font-68aa87c4: Inter,'Noto Sans JP';
--s-font-7bb7f657: Inter;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/studio-design