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

# BUTT STUDIO · Design System

> Quiet editorial structure, bold moving-image work.

**Theme:** dark · **Industry:** portfolio · **Source:** https://butt-studio.com/ · **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._

A restrained white portfolio homepage pairs oversized serif studio lettering with a long, carefully indexed stream of creative work. Black typography and fine rules keep attention on colorful campaign imagery, video frames, and concise project credits.

## North star

Keep the interface quiet, white, and sharply editorial so the artwork supplies the color and motion.

## Overview

The visual strategy is an editorial portfolio built on a bright white page, not a dark interface: black type, fine black rules, and generous white intervals establish a quiet structure around vivid project media. The enormous Caslon wordmark dominates the opening viewport, with a small olive-toned studio label appearing as part of the hero artwork rather than a dependable interface color. Helvetica carries the practical content, from the compact studio and client details to project descriptions and credits; Caslon returns in selected project titles. The long page alternates broad media rows with aligned project information, allowing thumbnails and video stills to provide most of the color and visual energy. Light-gray video placeholders and pill-shaped Download controls are the clearest recurring interface treatments. Keep the underlying UI flat and typographic, and treat colors sampled from campaign imagery as project-specific content rather than brand tokens.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Editorial Ink | `#000000` | `--color-editorial-ink` | neutral | Primary text, headings, link text, and fine horizontal separators on the white page. |
| Media Black | `#131313` | `--color-media-black` | surface | Dark image or media card backgrounds, notably the black-framed Timedance project displays. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main canvas and the broad project-information areas between media rows. |
| Placeholder Gray | `#e0e0e0` | `--color-placeholder-gray` | neutral | Video placeholder panels and light Download button surfaces. |

### Semantic aliases

`--color-canvas` → `#131313` (Media Black) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#e0e0e0` (Placeholder Gray) · `--color-text` → `#000000` (Editorial Ink) · `--color-border` → `#000000` (Editorial Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#131313` | 1.13:1 | fail |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#e0e0e0` | 15.91:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| helvetica | `--font-body` | system | 400 | Studio details, project headings, body descriptions, links, and controls. | Inter |
| Caslon | `--font-display` | webfont | 400 | Oversized opening wordmark and selected project-title styling. | Libre Caslon Display |

- **helvetica:** Regular weight; compact, unembellished editorial text. Measured headings and body use tight negative tracking.
- **Caslon:** Regular-weight display serif; use sparingly for contrast against Helvetica.

### Type scale — Major Third (ratio ≈ 1.281, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 42px | 400 | 1 | -0.02em | — | Caslon | Oversized serif studio wordmark in the opening hero. |
| h2 | 40px | 400 | 1 | -0.03em | — | helvetica | Prominent project names and editorial section titles. |
| h3 | 37.5px | 400 | 1 | -0.03em | — | helvetica | Secondary project titles and client or project labels. |
| body | 20px | 400 | 1.2 | -0.02em | — | helvetica | Studio details, project summaries, and production credits. |
| link | 20px | 400 | 1.2 | -0.02em | — | helvetica | Inline credits, social links, contact links, and Download actions. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 5, 10, 20, 30, 70 px.
- Section rhythm 70px · element gap — · card padding 20px · max content width 1380px.

The page uses a wide, single-column editorial canvas with a measured maximum width of 1380px. The opening wordmark spans the upper area; a thin rule separates it from a three-part studio, client, and feature information row. Below, media sits in repeated side-by-side rows, followed by project titles and descriptions aligned in columns. Later projects sometimes use full-bleed media. A measured 70px section gap and 20px card padding support a comfortable rhythm without making the work feel disconnected.

## Shape & elevation

- Radius: button `9999px` · xs `10px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease` on interactive elements.

The interface is predominantly flat, with no measured shadow system. Fine black horizontal rules divide the intro and project information, while media images and placeholders provide the main visual blocks. Use restrained corner rounding on media and fully pill-shaped Download controls; let spacing and artwork, not elevation, establish hierarchy.

## Imagery

Project media is the primary source of color: campaign stills, motion-work frames, CGI, graphic compositions, and video panels. The hero layers delicate, organic-looking imagery across oversized lettering. Project frames are cleanly cropped and often arranged as pairs; some later portfolio items place a smaller image within a dark field. Preserve source-art colors rather than applying a shared tint.

## Components

### Opening wordmark

Oversized Caslon studio lettering fills the opening white area; layered imagery crosses the type, with a small Studio label embedded in the artwork.

### Studio information row

A thin black rule separates the hero from three aligned text groups for the artist and contact details, selected clients, and features.

### Project media pair

Project imagery commonly appears in two neighboring media panels, mixing video placeholders and colorful stills.

### Project information

A fine rule and aligned columns introduce the project title, optional Download control, description, and detailed credits.

### Download pill

Light-gray, pill-shaped control with black 20px Helvetica text and no shadow.

### Dark media frame

A #131313 rectangular media field surrounds centered project artwork in selected full-bleed presentation blocks.

### Measured component styles

- **Primary button** (“Download”): background #e2e2e2 · text #000000 · radius 50px · padding 5px 20px · 400 20px helvetica
- **Link** (“Daisy Chain Studio”): transparent background · text #000000 · radius 0px · padding 0px · 400 20px helvetica
- **Card**: background #131313 · text #000000 · radius 0px · padding 20px · 400 20px helvetica

## Do

- Use white as the main page canvas.
- Set primary text and rules in #000000.
- Reserve Caslon-style serif for the wordmark and selected titles.
- Let project artwork supply most of the color.
- Separate project information from media with fine rules.
- Keep video placeholders light gray and Download controls pill-shaped.

## Don't

- Do not turn the whole page into a dark interface.
- Do not apply one color filter across project imagery.
- Do not add gradients or decorative shadows to the UI.
- Do not replace the editorial rhythm with dense dashboard cards.
- Do not use the campaign imagery palette as global brand colors.
- Do not make every heading serif or oversized.

## Agent prompt

Build a new portfolio page in the BUTT STUDIO visual style: use a white #ffffff canvas, #000000 Helvetica-like text and hairline separators, and generous editorial spacing. Open with a large Caslon-like serif identity or page title; keep any decorative hero imagery distinct from interface colors. Arrange portfolio entries in a broad media-first grid, then align project titles, descriptions, credits, and optional controls in clean information columns. Use #e0e0e0 for video placeholders and restrained Download pills, and reserve #131313 for intentional dark media frames. Let each project’s own photography, CGI, or motion stills provide color. Keep elevation minimal, use no decorative shadows, and preserve a calm reading rhythm through consistent rules and whitespace.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide, single-column opening wordmark on a white canvas. | brand recognition | oversized serif lettering, layered hero artwork |
| 2 | logo-cloud | Three aligned text groups below a thin horizontal rule. | contact discovery, client credibility | plain text lists, fine divider |
| 3 | gallery | Two neighboring media panels beneath the studio introduction. | view project media | video placeholder, colorful still |
| 4 | feature-split | Project titles and summary aligned in separate columns. | read project summary, download | project heading, pill control |
| 5 | gallery | Two media panels in a horizontal row. | watch project | gray video panel, colorful still |
| 6 | feature-split | Title block at left, project description and credits at right. | read project details, follow credits link | two-line title, inline text link |
| 7 | gallery | Side-by-side media blocks. | watch project | video placeholder, campaign still |
| 8 | feature-split | Two project titles aligned with a compact description. | read project summary | uppercase client name, editorial heading |
| 9 | product-showcase | Media and project title share a broad, single-column block. | view campaign | campaign imagery, project title |
| 10 | video | Broad light-gray video placeholder spanning the content area. | watch video | large media placeholder |
| 11 | feature-split | Project title on the left, detailed production credits on the right. | read production credits | fine rule, compact credit text |
| 12 | gallery | Two adjacent project media panels. | watch campaign | video placeholder, bright campaign still |
| 13 | feature-split | Project title and optional Download at left; extensive credits at right. | download project, read full credits | pill control, dense credit list |
| 14 | gallery | Two media panels arranged side by side. | watch project | gray video panel, orange-toned still |
| 15 | feature-split | Project title and Download control opposite description and credits. | download project, read credits | pill control, aligned text columns |
| 16 | gallery | Two neighboring media panels. | watch campaign | video placeholder, campaign still |
| 17 | feature-split | Project title and Download action at left, summary and credits at right. | download project, read campaign details | fine divider, pill control |
| 18 | gallery | Media-led project block with title and short credit line. | view project | paired media, compact project title |
| 19 | product-showcase | Wide dark media frame with centered square artwork and a compact caption. | browse artwork | dark frame, centered image, carousel indicators |
| 20 | product-showcase | Wide dark media frame paired with a project-information row. | browse record covers, download | centered artwork, pill control, fine divider |
| 21 | product-showcase | Media-rich identity project followed by aligned title and description. | explore identity work, download | full-width artwork, editorial project details |

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