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

# TWOMUCH.STUDIO · Design System

> A quiet canvas with a playful mark

**Theme:** light · **Industry:** design · **Source:** https://www.twomuch.studio/ · **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._

TWOMUCH.STUDIO opens with an unusually restrained canvas, letting a soft, oversized hand-drawn wordmark carry the visual identity. A tiny centered navigation cluster pairs the studio name with a vivid lime menu control, creating a playful point of focus.

## North star

Keep the canvas expansive and let one small, playful focal point contrast with a very faint oversized mark.

## Overview

The page is built around a near-white canvas (#f7f7f7) and a deliberately sparse composition. Black (#000000) supplies the compact navigation text and the strongest typographic contrast, while white (#ffffff) and light gray (#e6e6e6) appear as restrained surface tones rather than competing brand colours. The screenshot’s fluorescent lime menu and oversized pale hand-drawn wordmark are visual details within the page imagery; they are not present in the measured palette, so treat them as artwork rather than a broader colour system. ABCMonumentGrotesk is used at a consistent medium weight, with tight negative tracking that keeps small labels crisp. The first viewport has no conventional hero copy or visible content grid: a small navigation group sits around the center of a large field of empty space, layered over the faint wordmark. The overall effect is playful but quiet, with scale contrast and whitespace doing most of the work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Navigation and text colour; provides the crisp contrast for the compact centered wordmark label and menu text. |
| Soft Canvas | `#f7f7f7` | `--color-soft-canvas` | surface | Dominant page canvas; holds the open composition and makes the pale background artwork barely perceptible. |
| Quiet Gray | `#e6e6e6` | `--color-quiet-gray` | surface | Measured card surface tone; use sparingly for secondary panels, not as a prominent section band in the shown viewport. |
| Paper White | `#ffffff` | `--color-paper-white` | surface | Minor surface and text tone; a supporting light value rather than the main page background. |

### Semantic aliases

`--color-canvas` → `#f7f7f7` (Soft Canvas) · `--color-surface` → `#000000` (Studio Ink) · `--color-surface-2` → `#e6e6e6` (Quiet Gray) · `--color-surface-3` → `#ffffff` (Paper White) · `--color-text` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#f7f7f7` | 19.6:1 | AAA |
| `#000000` | `#e6e6e6` | 16.83:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABCMonumentGrotesk | `--font-body` | webfont | 500 | Navigation, links, body copy, captions, and button labels | DM Sans |

- **ABCMonumentGrotesk:** Medium weight throughout; measured roles use tight negative tracking. Keep labels in their natural case.

### Type scale — Major Third (ratio ≈ 1.25, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 18px | 500 | 1 | -0.027em | — | ABCMonumentGrotesk | Studio description and general page copy. |
| caption | 14px | 500 | 1 | -0.034em | — | ABCMonumentGrotesk | Small navigation labels and secondary metadata. |
| button | 14px | 500 | 1 | -0.03em | — | ABCMonumentGrotesk | Compact menu and action labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8 px.
- Section rhythm — · element gap 6px · card padding — · max content width —.

The first viewport is a single sparse field rather than a visible multi-column grid. Keep the navigation cluster centered in the expansive canvas, with the studio-name link beside a compact menu control. The oversized wordmark sits behind it as a low-contrast graphic. No maximum content width or section gap is measured, so preserve the open proportions qualitatively instead of imposing a rigid spacing system. Content density is intentionally very low.

## Shape & elevation

- Radius: card `4px` · xs `4px`
- No box shadows measured: the page is flat.

The interface is predominantly flat, with no measured shadows or visible border system. The navigation feels layered over the faint wordmark through contrast and placement, not card elevation. Keep surfaces simple and avoid adding outlines or depth effects; measured cards use subtle flat fills and a small radius where applicable.

## Imagery

The defining visual is an oversized, pale, hand-drawn studio wordmark centered behind the navigation. It reads as graphic artwork, not photography or a conventional illustration panel. Keep it soft and low contrast against the canvas, with irregular lettering and a playful silhouette. The screenshot provides no evidence of photography, 3D scenes, or video; do not introduce those as defining elements.

## Components

### Centered studio navigation

A compact cluster pairing the black studio-name link with a bright menu control; keep it visually small against the wide canvas.

### Wordmark artwork

An oversized, faint hand-drawn lettering mark sits behind the navigation as a graphic backdrop, not as readable content.

### Menu control

A short, high-contrast label and overflow icon sit within a vivid lime block in the screenshot; the lime is artwork detail, not a measured palette token.

### Studio-name link

Use black ABCMonumentGrotesk medium text as a restrained navigation anchor, with the measured link role at 18px.

### Measured component styles

- **Primary button** (“More info”): transparent background · text #000000 · radius 0px · padding 8px · 500 14px ABCMonumentGrotesk
- **Link** (“hello@twomuch.studio Email”): transparent background · text #000000 · radius 0px · padding 0px 8px · 500 14px ABCMonumentGrotesk
- **Card** (“A design studio that is focused on playi”): background #e6e6e6 · text #000000 · radius 0px · padding 0px · 500 14px ABCMonumentGrotesk

## Do

- Preserve a broad #f7f7f7 canvas.
- Keep navigation compact and visually centered.
- Use #000000 for crisp text and links.
- Treat the faint wordmark as artwork, not a text heading.
- Use generous empty space as a core compositional feature.
- Keep interface surfaces flat and understated.

## Don't

- Do not fill the canvas with extra sections or copy.
- Do not make the background wordmark high contrast.
- Do not introduce unmeasured palette colours as brand tokens.
- Do not add shadows, gradients, or heavy borders.
- Do not enlarge navigation until it competes with the artwork.
- Do not impose a conventional hero headline on this sparse opening.

## Agent prompt

Build a new page in the TWOMUCH.STUDIO visual style. Use Soft Canvas (#f7f7f7) as the dominant background and Studio Ink (#000000) for compact links and interface text; reserve Quiet Gray (#e6e6e6) and Paper White (#ffffff) for understated surfaces. Set text in ABCMonumentGrotesk or a close DM Sans substitute, medium weight, with tight tracking. Favor a sparse, spacious composition and a small centered navigation group, with an oversized pale hand-drawn wordmark treated as background artwork. The screenshot includes a vivid lime menu block, but that colour is not in the measured palette: if recreating that detail, keep it isolated to the control. Avoid heavy panels, shadows, gradients, dense copy, and decorative borders.

## Source CSS custom properties (selected)

```css
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
```

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