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

# Stink Studios · Design System

> A stark canvas for expressive, image-led work.

**Theme:** dark · **Industry:** agency · **Source:** https://www.stinkstudios.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 black, editorial portfolio homepage pairs expressive campaign imagery with restrained typography and generous negative space. A contrasting white footer closes the experience with a compact newsletter and utility links.

## North star

Keep the interface quiet and monochrome so expressive campaign media carries the visual energy.

## Overview

The page relies on a near-monochrome framework: #000000 covers the main canvas and navigation, while #ffffff carries most text and defines the closing footer. The measured #573332 is a limited surface colour, not a dominant site-wide accent. The bright yellows, blues, greens and purples in the opening artwork and campaign thumbnails belong to project imagery; keep them inside media rather than promoting them to interface colours. Typography shifts between refined Times New Roman display lettering, light Helvetica headings and compact, uppercase Courier New labels. A full-bleed opening video establishes the visual tone; below it, work cards and news rows vary in width and alignment instead of forming a rigid catalogue. Large black intervals give the media room to breathe. Fine rules separate editorial updates, while the white footer offers a decisive tonal reset.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#000000` | `--color-studio-black` | brand | Main page canvas, navigation and footer contrast; also the measured text-muted and border colour. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary text and links on black, plus the broad footer surface and its dark copy. |
| Oxide Brown | `#573332` | `--color-oxide-brown` | surface | Measured secondary surface colour; use sparingly where a subtle dark section band is needed. |

### Semantic aliases

`--color-canvas` → `#000000` (Studio Black) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#573332` (Oxide Brown) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#000000` (Studio Black) · `--color-border` → `#000000` (Studio Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#573332` | 10.91:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#573332` | 1.92:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica | `--font-display` | system | 300, 700 | Light display and section headings, navigation, and larger project links. | Inter |
| Courier New | `--font-mono` | system | 400 | Compact body labels, metadata, category markers, buttons and links. | IBM Plex Mono |
| Times New Roman | `--font-times-new-roman` | system | 400 | Editorial display statement in the introductory copy. | Lora |

- **Helvetica:** Headings are light and tightly tracked; navigation is restrained. The measured font set also includes bold section headings.
- **Courier New:** Use regular weight, uppercase styling and widely spaced characters for small functional copy.
- **Times New Roman:** Use regular serif lettering with tight negative tracking and a compact line height.

### Type scale — Augmented Fourth (ratio ≈ 1.439, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 400 | 1 | -0.05em | — | Times New Roman | Editorial serif statement introducing the studio. |
| h1 | 52px | 300 | 1.15 | -0.04em | — | Helvetica | Primary large, light sans-serif heading. |
| h2 | 32px | 700 | 1 | 0 | — | Helvetica | Bold sans-serif section or content heading. |
| h3 | 23px | 300 | 1.3 | -0.03em | — | Helvetica | Light sans-serif project and secondary heading. |
| body | 14px | 400 | 1.43 | 0.1em | uppercase | Courier New | Uppercase monospaced labels and compact supporting copy. |
| button | 14px | 400 | 1.43 | 0.1em | uppercase | Courier New | Uppercase monospaced submit and action labels. |
| link | 14px | 400 | 1.43 | 0.1em | uppercase | Courier New | Uppercase monospaced utility links; larger Helvetica links for navigation and work. |
| eyebrow | 14px | 400 | 1.43 | 0.1em | uppercase | Courier New | Uppercase monospaced project categories and metadata. |
| code | 14px | 400 | 1.43 | 0.1em | uppercase | Courier New | Monospaced utility text where code-like treatment is needed. |

## Spacing & layout

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

The measured content max width is 1400px, with comfortable density and a 60px section gap. The page alternates full-bleed media with a single-column black editorial canvas, then uses unevenly aligned project cards and thinly divided news rows. Keep edges visually clean and let each image establish its own width rather than forcing every item into an identical grid. The footer becomes a full-width white band, with links grouped to the left and the newsletter form set apart.

## Shape & elevation

- Radius: input `10px` · xs `10px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s linear` on interactive elements.

The measured interface is flat, with no shadows or gradients. Separate news items with fine rules and use changes in background tone, especially the white footer, to establish hierarchy. Keep media visually distinct through its own edges and imagery rather than raised cards, heavy outlines or layered panels.

## Imagery

Use prominent campaign photography and video as the page’s most colourful elements. The first viewport is a full-bleed, illustrated sneaker campaign; the scaled page also shows cinematic portrait footage and varied client work. Preserve the media’s original colour, texture and aspect; avoid decorative UI overlays that compete with the artwork.

## Components

### Navigation bar

A black horizontal strip beneath the opening media, with a white studio wordmark at left and compact Work, About, News and Contact links at right.

### Opening media

Full-bleed campaign video or artwork provides the first viewport’s visual impact, with little interface chrome.

### Intro statement

Editorial serif studio statement on black, followed by uppercase Courier New category links.

### Project cards

Client work uses varied image widths and alignment, with concise project titles, descriptions and small uppercase category labels.

### News feed

Editorial updates are arranged in rows separated by thin rules, pairing small metadata with larger white headlines.

### Footer newsletter

A white closing section combines the outlined studio wordmark, an editorial link, grouped utility links and a compact newsletter input with submit action.

### Measured component styles

- **Primary button** (“SUBMIT”): transparent background · text #000000 · radius 0px · padding 0px · 400 14px Courier New · uppercase
- **Link** (“Work”): transparent background · text #ffffff · radius 0px · padding 0px · 300 23px Helvetica
- **Input**: transparent background · text #000000 · radius 10px · padding 10px 10px 10px 16px · 300 23px Helvetica
- **Navigation item** (“STINK STUDIOS Work About News Contact”): transparent background · text #000000 · radius 0px · padding 20px 0px 0px 0px · 300 16px Helvetica

## Do

- Use #000000 as the dominant work-page canvas.
- Set primary text and links in #ffffff against black.
- Let project photography provide the strongest colour.
- Mix image widths and alignments for an editorial portfolio rhythm.
- Use Courier New for uppercase metadata and functional labels.
- Separate news entries with thin, understated rules.

## Don't

- Do not turn campaign-image colours into interface accents.
- Do not add gradients or decorative shadows.
- Do not force every project into identical card proportions.
- Do not crowd the black canvas with persistent UI.
- Do not use oversized buttons or filled CTA blocks.
- Do not let footer utilities compete with the projects.

## Agent prompt

Build a new creative-studio page using a restrained editorial system. Use Studio Black (#000000) for the primary canvas and Gallery White (#ffffff) for type, links and the contrasting footer; reserve Oxide Brown (#573332) for a restrained secondary surface if needed. Keep campaign imagery full-bleed or in irregularly sized project placements, and preserve its original colours rather than echoing them in UI. Use light, tightly tracked Helvetica-style headings, a Times-like serif for a short editorial statement, and uppercase monospaced metadata. Leave generous black space around work, align project cards asymmetrically, and divide news rows with thin rules. Finish with a white footer containing grouped links and a compact newsletter form. Avoid shadows, gradients and ornamental interface chrome.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Single-column black canvas with introductory statement and category links, followed by unevenly aligned project imagery. | Browse featured work, Open project details, Navigate categories | Black background, Serif intro copy, Asymmetric media, Monospaced category labels |
| 2 | other | A broad white band appears as a visual transition before the closing content. | Visual reset, Continue to footer | White surface, Minimal interface |
| 3 | footer | White footer with editorial link, utility links grouped on the left and a newsletter input set apart. | Open studio resources, Subscribe to newsletter, Follow social channels | Dark text on white, Outlined wordmark, Compact form, Grouped links |

## Source CSS custom properties (selected)

```css
--primary: #000;
--primary-rgb: 0,0,0;
--secondary: #fff;
--secondary-rgb: 255,255,255;
--spacing-1: 10px;
--spacing-2: 20px;
--spacing-3: 30px;
--spacing-4: 60px;
--spacing-5: 120px;
--spacing-5-5: 180px;
--spacing-6: 240px;
```

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