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

# basement.studio · Design System

> Monochrome studio minimalism meets immersive work.

**Theme:** dark · **Industry:** agency · **Source:** https://basement.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._

A near-black canvas and tightly set typography frame an immersive studio introduction, client grid, and project portfolio. Restrained interface styling lets vivid project imagery and oversized editorial statements carry the visual impact.

## North star

Keep the interface nearly monochrome and let oversized type and vivid, carefully framed project work provide the contrast.

## Overview

The page is built on a continuous #000000 canvas, with no contrasting section bands; the dark environment gives the work imagery room to shift from warm studio photography to bright campaign graphics. Text alternates between #e6e6e6 for emphatic headings and key links, and softer #c4c4c4 or #757575 for supporting copy and labels. Geist is used throughout, with heavy weights, compressed line heights, and tight negative tracking in large display statements. A small, discreet navigation sits above an immersive full-bleed opening image; below it, editorial text, a dense client-logo matrix, and project rows create changing rhythms without changing the canvas. Thin #454545 rules define logo cells and media edges rather than enclosing elevated cards. Spacious gaps separate major content areas, while the capability columns and footer become compact and information-rich. Project artwork supplies the page’s strongest color, treated as content rather than brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Basement Black | `#000000` | `--color-basement-black` | brand | Continuous page canvas and navigation ground; section backgrounds stay black rather than alternating. |
| Soft Concrete | `#c4c4c4` | `--color-soft-concrete` | neutral | Muted navigation, supporting copy, and secondary headings across the page. |
| Studio White | `#e6e6e6` | `--color-studio-white` | neutral | Primary headings, prominent links, logo marks, and key footer text. |
| Graphite Rule | `#454545` | `--color-graphite-rule` | semantic | Fine separators around client-logo cells and project media. |
| Quiet Ash | `#757575` | `--color-quiet-ash` | neutral | Low-emphasis footer, navigation, and supporting text. |
| Input Charcoal | `#1a1a1a` | `--color-input-charcoal` | surface | Newsletter email field fill and border against the black footer. |
| Badge Slate | `#2e2e2e` | `--color-badge-slate` | surface | Small service-label badge backgrounds; a restrained UI detail, not a section surface. |

### Semantic aliases

`--color-canvas` → `#000000` (Basement Black) · `--color-text` → `#e6e6e6` (Studio White) · `--color-text-muted` → `#c4c4c4` (Soft Concrete) · `--color-text-subtle` → `#757575` (Quiet Ash) · `--color-border` → `#454545` (Graphite Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#e6e6e6` | `#000000` | 16.83:1 | AAA |
| `#c4c4c4` | `#000000` | 12.04:1 | AAA |
| `#757575` | `#000000` | 4.56:1 | AA |

### Gradients

- `linear-gradient(rgb(0, 0, 0) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgb(0, 0, 0) 1px, rgba(0, 0, 0, 0.7) 1px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 600, 500 | Site-wide navigation, display headings, body copy, labels, and links. | Inter |

- **Geist:** Mostly weight 600; large headings use tight negative tracking and compressed line height. Small nav and captions stay compact.

### Type scale — Augmented Fourth (ratio ≈ 1.444, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 87px | 600 | 0.9 | -0.04em | — | Geist | Oversized editorial statements, including the capabilities introduction. |
| h1 | 76px | 600 | 0.89 | -0.04em | — | Geist | Primary headline introducing the digital studio. |
| h2 | 38px | 600 | 0.89 | -0.04em | — | Geist | Major section headings such as Featured Projects. |
| h3 | 24px | 600 | 1 | -0.03em | — | Geist | Service and capability column headings. |
| body | 20px | 600 | 1 | -0.02em | — | Geist | Project descriptions, introductory copy, and contact statements. |
| caption | 13px | 600 | 1.23 | 0 | — | Geist | Small service tags and supporting labels. |
| nav | 12px | 600 | 1.33 | 0 | — | Geist | Compact primary and footer navigation links. |
| code | 13px | 600 | 1.23 | 0 | uppercase | Geist Mono | Uppercase compact metadata or technical labels. |

OpenType features in use: `"ss01"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 4, 5, 6, 8, 12, 16, 20, 24 px.
- Section rhythm 128px · element gap 4px · card padding — · max content width 1408px.

The measured page max width is 1408px, with a spacious section rhythm and a single continuous dark canvas. The hero opens with full-bleed media; subsequent blocks use left-aligned editorial headings, a six-column client-logo grid, then project rows that alternate between media and copy arrangements. Capability content forms four compact columns, while contact and footer content shift back to broad, open compositions. Overall density moves from immersive and spacious to tightly packed in the logo grid and footer.

## Shape & elevation

- Radius: nav `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.06s linear` on interactive elements.

The interface is predominantly flat: black canvas, text, and media do the work without measured shadows. Thin graphite rules separate logo tiles and media edges. Small dark badge fills and the newsletter field provide limited surface contrast; keep them visually flush with surrounding content rather than turning them into raised cards.

## Imagery

The opening viewport is dominated by a dark, cinematic studio interior, framed edge to edge beneath the navigation. Project media varies deliberately: abstract monochrome visuals sit alongside bright, branded campaign artwork. Keep imagery large and rectangular, with thin borders where measured, and avoid adding decorative overlays or unrelated illustration. The vivid colors belong to client work, not the core brand palette.

## Components

### Top navigation

Compact horizontal navigation over the opening scene; small Geist labels use light text, with the brand mark aligned at the left.

### Hero media

Full-bleed cinematic studio image beneath the navigation, with a small centered Human/Machine selector near the bottom.

### Client logo grid

Six-column matrix of client marks in individual dark cells, separated by fine #454545 rules.

### Project rows

Large rectangular case-study media paired with concise descriptions, category labels, and prominent client names.

### Capability columns

Four compact service columns with bold headings, short descriptions, and small muted service tags.

### Contact statement

Oversized invitation and email link on the black canvas, with minimal surrounding interface.

### Newsletter footer

Email input in #1a1a1a, compact signup action, and a concentrated stack of navigation links.

### Measured component styles

- **Primary button** (“Contact Us”): transparent background · text #e6e6e6 · radius 0px · padding 0px · 600 12px Geist
- **Link** (“Vercel Ship”): transparent background · text #e6e6e6 · radius 0px · padding 0px 2px 0px 0px · 600 38px Geist
- **Input**: background #1a1a1a · text #ffffff · border 1px solid #1a1a1a · radius 0px · padding 0px 4px · 600 20px Geist
- **Badge** (“Product Strategy”): background #2e2e2e · text #e6e6e6 · radius 0px · padding 0px 4px · 600 13px Geist
- **Navigation item** (“Home”): transparent background · text #e6e6e6 · radius 0px · padding 0px · 600 12px Geist

## Do

- Use #000000 as the continuous page canvas.
- Reserve #e6e6e6 for high-priority text and links.
- Use #c4c4c4 and #757575 to establish copy hierarchy.
- Let client imagery provide the strongest color.
- Separate media and logo cells with fine #454545 rules.
- Use bold Geist with tight tracking for large statements.

## Don't

- Do not add bright brand accent colors to the interface.
- Do not alternate contrasting section background bands.
- Do not turn every content group into a raised card.
- Do not crowd the hero with explanatory interface elements.
- Do not make muted copy as bright as primary headlines.
- Do not mistake colorful project artwork for the site palette.

## Agent prompt

Build a new page in the basement.studio visual language: use Basement Black (#000000) as a continuous canvas, Studio White (#e6e6e6) for primary statements, and Soft Concrete (#c4c4c4) for secondary copy. Use Geist or a close sans-serif substitute, favoring bold weights, tight tracking, and compact line heights in large editorial headings. Keep navigation small and discreet. Organize content into broad sections with generous separation, then introduce denser grids or columns where useful. Frame client and project media with fine Graphite Rule (#454545) lines rather than elevated cards. Use Input Charcoal (#1a1a1a) only for a practical input surface and Badge Slate (#2e2e2e) for small labels. Let imagery carry its own color; do not add a competing accent palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed dark studio scene beneath a narrow top navigation. | immersive media, mode toggle | overlaid navigation, centered bottom selector |
| 2 | other | Single-column, left-aligned headline followed by short supporting copy. | studio positioning | large bold heading, muted paragraph |
| 3 | logo-cloud | Six-column matrix of client logos on the black canvas. | client credibility | fine cell dividers, muted section label |
| 4 | product-showcase | Featured project media paired with descriptive copy and client link. | case-study entry, project navigation | large media frame, category labels |
| 5 | feature-split | Two-column case-study row with media and text content. | case-study entry | project image, compact copy, client name |
| 6 | feature-split | Two-column project row pairing branded media with descriptive copy. | case-study entry | rectangular media, compact copy, client name |
| 7 | feature-split | Two-column project row with campaign artwork and supporting text. | case-study entry | bright project media, client link, category label |
| 8 | cta | Open single-column statement separated from the project list. | brand positioning | large editorial copy, small section label |
| 9 | feature-grid | Four columns of capability headings, concise copy, and small tags. | service discovery | compact columns, service badges |
| 10 | contact | Left-aligned contact statement and email link in an open single column. | direct email contact | oversized heading, prominent email |
| 11 | other | Wide standalone graphic centered within a tall black section. | brand interlude | oversized wordmark graphic |
| 12 | footer | Newsletter content, stacked navigation, and small legal details share a compact footer. | newsletter signup, site navigation | dark email field, compact link stack |

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