# Basement Studio · Design system migration spec

> Source: https://basement.studio  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of a premium, dark-themed creative agency portfolio with a bold, minimalist aesthetic.

## 1. Identity DNA

Basement Studio operates as a dark, immersive digital workshop—a gallery where high-end creative work is the sole source of color. Its design DNA is a stark monochrome canvas, engineered to let the portfolio's imagery command every ounce of attention.

**One-liner:** A digital studio & branding powerhouse making cool shit.
**Keywords:** digital studio · branding · creative agency · experimental
**Analogy:** A dark, immersive digital workshop or gallery showcasing high-end creative work.

## 2. Color

The system employs a strict high-contrast monochrome palette. Deep blacks and bright whites form the foundational tension, with a minimal gray scale reserved only for secondary text and subtle dividers.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#1a1a1a` | card background |
| `--bg-quiet` | `#2e2e2e` | quiet area |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#e6e6e6` | secondary text |
| `--muted` | `#c4c4c4` | placeholder |
| `--muted-soft` | `#757575` | weak hint |
| `--line` | `rgba(230, 230, 230, 0.3)` | divider |

**Color principle:** High-contrast monochrome with deep blacks and bright whites, accented only by project imagery.

The principle is absolute: the interface provides the neutral stage, and the work provides the performance.

## 3. Typography

Typography is a direct expression of the studio's bold, geometric identity. A clean sans-serif anchors all communication, its weight and scale establishing hierarchy without the need for decorative flourish.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 76px | 0.9 | 600 | -3.04px | Hero headlines and section titles like 'Featured Projects'. |
| h1 | 38px | 1.2 | 600 | -1.52px | Large subheadings and project titles. |
| body | 16px | 1.5 | 400 | 0px | Standard paragraph text and descriptions. |
| caption | 13px | 1.2 | 600 | -0.4px | Navigation links, labels, and small UI text. |

## 4. Spacing

Spatial rhythm is governed by a precise grid, with generous padding and gutters that allow the layout to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Grid-based layout with generous padding and gutters, typically 16px or 24px.

## 5. Surfaces

Surfaces are defined by their absence of ornamentation. Depth is implied solely through the stark contrast between content and the void of the background, with shadows avoided entirely.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Subtle horizontal dividers using rgba(230, 230, 230, 0.3) at 1px width.

## 6. Layout

The layout skeleton is a sequence of full-bleed immersion followed by structured exposition. It opens with a commanding hero section, then transitions into a grid-based showcase where project imagery and bold typography share the stage.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-width hero images followed by grid-based project showcases with large titles and descriptions.

## 7. Motion & Interaction

Motion is a study in restraint, functioning as a subtle signifier of state change rather than spectacle. All transitions are smooth, property-based, and governed by a consistent easing curve to maintain a premium, unhurried feel.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions for color and background-color changes.
  - Transform-based animations for interactive elements.

- **Hover:** Cursor changes to pointer or alias; subtle color or background transitions.
- **Click:** Immediate feedback, often through link navigation.
- **Transition:** Consistent use of 'all' or specific properties with 0.3s cubic-bezier(0.4, 0, 0.2, 1).
- **Keyboard:** Standard focus management for navigation links.

## 8. Voice & Don'ts

The editorial voice is confident and slightly irreverent, matching the directness of the geometric typography. Headlines are large and tight, while calls to action are straightforward commands, avoiding corporate formality.

- **Tone:** Confident, bold, and slightly irreverent.
- **Headline style:** Large, tight-tracked geometric sans-serif with high contrast.
- **CTA style:** Direct and action-oriented, often lowercase or matching the brand voice.
- **Avoid:** Formal corporate language / Cluttered interfaces / Low-contrast text

### Don'ts
- ❌ Don't use serif fonts — screenshot shows geometric sans-serif for all text.
- ❌ Don't add background colors to buttons — screenshot shows text-only navigation links.
- ❌ Don't use heavy drop shadows — screenshot shows completely flat surfaces.
- ❌ Don't use rounded corners on cards or containers — screenshot shows sharp, square edges.
- ❌ Don't use multiple accent colors — screenshot shows a strictly monochrome palette with project imagery providing color.
- ❌ Don't clutter the layout with borders — screenshot shows minimal horizontal dividers.

The system deliberately avoids clutter, decorative elements, and any visual noise that might compete with the work itself.

## System Prompt (paste into AI tool)

```
Basement Studio is a high-end creative agency specializing in digital experiences and branding. The design DNA is defined by a deep black (#000000) background and pure white (#ffffff) ink, creating a stark, high-contrast canvas. Typography utilizes geometric sans-serif (Geist) and monospace (Geist Mono) categories. The layout is spacious and grid-based, prioritizing bold headlines and immersive project imagery. Critical don'ts: never add background colors to buttons, never use rounded corners on containers, and never introduce multiple accent colors into the core interface.
```