# Foundry Basement Studio · Design system migration spec

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

> Worth including as a prime example of brutalist, typography-first design where the product (typefaces) dictates the entire visual language.

## 1. Identity DNA

Foundry Basement Studio operates as an underground workshop for heavy-duty typefaces, its entire system built like an industrial catalog. The design language is brutally direct, treating typography not as a decorative layer but as the primary structural material.

**One-liner:** An expressive, brutalist type foundry catalog for designers
**Keywords:** type foundry · specimen · industrial · bold
**Analogy:** An underground workshop for crafting heavy-duty typefaces

## 2. Color

The palette is a study in maximum contrast, built on a pitch-black canvas with stark white text. A single, blazing orange accent provides the only chromatic heat, used sparingly for critical interactive moments.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#121212` | card background |
| `--ink` | `#EFEFEF` | body text |
| `--muted` | `#747474` | placeholder |
| `--accent` | `#FF4D00` | single accent |
| `--line` | `rgba(226, 232, 240, 1.0)` | divider |

**Color principle:** Maximum contrast: pitch black canvas, white text, and a single blazing orange accent

The system's principle is absolute: color exists solely to serve hierarchy and function, never for decoration.

## 3. Typography

Typography is the core identity, categorized into two distinct voices. Exaggerated, wide grotesques command attention as display specimens, while a strict monospace font governs all interface text, creating a deliberate, mechanical rhythm.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 198px | 1.0 | 700 | 0px | Type specimen display |
| heading | 120px | 1.0 | 700 | 0px | Type specimen headings |
| body | 16px | 1.5 | 400 | 0.84px | General text and UI labels |
| caption | 14px | 1.71 | 400 | 0.56px | Small text and navigation |
| micro | 12px | 1.33 | 400 | 0.72px | Metadata and tags |

**Type rules:**
- All text is uppercase
- UI text uses monospace font
- Exaggerated wide display fonts for specimens

## 4. Spacing

The rhythm is defined by strict vertical spacing, creating wide, deliberate gaps in the layout that contrast with the tight, functional padding within UI elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 90 px
- **Rhythm:** Strict vertical spacing with tight padding in UI elements and wide gaps in layout

## 5. Surfaces

Surfaces are flat and structural, with depth conveyed through 1px solid borders rather than shadows. Panels are dark, often defined by muted gray or white borders against the deep black background.

- **Radius:** sm 2.8px · md 6px · lg 8px · pill 999px
- **Borders:** 1px solid borders, often using muted grays or white

## 6. Layout

The layout skeleton is rigid and grid-based, anchored by a persistent left sidebar on desktop viewports. On mobile, navigation shifts to a compact top bar, maintaining a clear, functional hierarchy.

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

**Skeleton:** Persistent left sidebar on desktop, top navigation on mobile

## 7. Motion & Interaction

Motion is deliberately restrained, focusing on utility rather than spectacle. Transitions are fast and subtle, limited to background-color and border-color changes that provide clear feedback for interactive states.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle background-color and border-color transitions
  - Opacity fades for state changes

- **Hover:** Background-color and border-color changes with 150ms ease-in-out
- **Click:** Active state with reduced opacity
- **Transition:** Smooth color transitions on interactive elements
- **Keyboard:** Standard focus outlines with custom cursor styles

## 8. Voice & Don'ts

The editorial voice is confident, bold, and slightly irreverent, matching the system's physical weight. All text is rendered in uppercase, from expressive, grotesque headlines to direct, command-style calls to action.

- **Tone:** Confident, bold, and slightly irreverent
- **Headline style:** All-caps, highly expressive grotesque fonts
- **CTA style:** Direct, uppercase commands like 'BUY NOW' or 'EXPLORE'
- **Avoid:** Subtle gradients / Sans-serif body text / Light themes

### Don'ts
- ❌ Don't use lowercase text — screenshot shows everything is uppercase
- ❌ Don't use soft, pastel colors — screenshot shows high-contrast black, white, and orange
- ❌ Don't use sans-serif for UI text — screenshot uses monospace exclusively for navigation and labels
- ❌ Don't use thin, delicate fonts — screenshot features heavy, expanded grotesque fonts
- ❌ Don't use complex shadows — screenshot relies on flat borders for depth
- ❌ Don't use a light background — screenshot uses a deep black or dark gray background

The system deliberately excludes soft gradients, sans-serif body text, and any light theme, committing fully to its industrial, specimen-first identity.

## System Prompt (paste into AI tool)

```
Basement Foundry is an expressive, brutalist type foundry catalog featuring a deep black background and a single blazing orange (#FF4D00) accent. Typography is the core of the identity, utilizing heavy grotesque fonts for display and monospace for UI elements, all presented in uppercase. Key colors are black (#000000), dark gray (#121212), white (#EFEFEF), and orange (#FF4D00). Critical design rules include: never use lowercase text, avoid light themes or pastel colors, and never use sans-serif for the UI layer. The layout features a persistent sidebar on desktop and focuses on large, expressive type specimens. Motion is subtle, focusing on 150ms color transitions for interactive elements.
```