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

# BASEMENT FOUNDRY · Design System

> A stark black canvas for expressive type.

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

BASEMENT FOUNDRY presents its type catalog as a dense, monochrome showcase punctuated by vivid orange signals. Oversized specimen lettering, compact mono labels, and fine outlined cards make the typefaces themselves the primary visual experience.

## North star

Keep the interface restrained and let oversized, distinctive type specimens carry the visual drama.

## Overview

The visual system is built on a near-total black canvas, with #efefef lettering and thin #3a3a3a outlines establishing a stark, print-like contrast. #ff4d00 is a deliberately scarce signal: it marks selected navigation details, purchase actions, and the oversized halftone hero artwork rather than becoming a general background colour. The opening composition pairs a narrow, persistent left navigation rail with a broad media stage; below it, a single-column catalog lets each typeface claim a large specimen card. Cards remain flat and dark, so their lettering—not interface chrome—provides variety. Display faces change from specimen to specimen, while JetBrains Mono supplies uppercase utility text, metadata, navigation, and controls. The page is compact in its labels but generous around the large wordmarks, creating a rhythm of dense information and dramatic typographic pauses. Fine borders, minimal radii, and the absence of shadows keep the storefront closer to a graphic specimen sheet than a conventional retail grid.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Foundry Black | `#000000` | `--color-foundry-black` | brand | Dominant page canvas and the uninterrupted backdrop behind navigation, specimens, and footer. |
| Signal Orange | `#ff4d00` | `--color-signal-orange` | accent | Selective emphasis for purchase labels, navigation details, and the orange halftone hero artwork. |
| Muted Graphite | `#747474` | `--color-muted-graphite` | neutral | Secondary copy and subdued control states, including less prominent specimen metadata. |
| Paper White | `#efefef` | `--color-paper-white` | neutral | Primary specimen lettering, navigation, labels, links, and high-contrast interface text. |
| Rule Charcoal | `#3a3a3a` | `--color-rule-charcoal` | semantic | Fine card outlines and separators that structure the catalog without bright framing. |
| Deep Surface | `#121212` | `--color-deep-surface` | surface | Subtle dark surface tone used in secondary interface areas; keep it close to the black canvas. |

### Semantic aliases

`--color-canvas` → `#000000` (Foundry Black) · `--color-surface` → `#121212` (Deep Surface) · `--color-text` → `#efefef` (Paper White) · `--color-text-muted` → `#747474` (Muted Graphite) · `--color-border` → `#3a3a3a` (Rule Charcoal) · `--color-accent` → `#ff4d00` (Signal Orange)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#efefef` | `#000000` | 18.26:1 | AAA |
| `#efefef` | `#121212` | 16.29:1 | AAA |
| `#747474` | `#000000` | 4.49:1 | AA-large |
| `#747474` | `#121212` | 4.01:1 | AA-large |
| `#ff4d00` | `#000000` | 6.31:1 | AA |
| `#ff4d00` | `#121212` | 5.63:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| JetBrains Mono | `--font-mono` | webfont | 400, 700 | Navigation, body copy, captions, links, badges, buttons, and specimen metadata. | Space Mono |
| Inter | `--font-inter` | webfont | 400 | Occasional interface and card text, including compact specimen-card details. | Inter |

- **JetBrains Mono:** Use uppercase mono utility text with measured tracking distinctions; regular weight dominates, with bold available for emphasis.
- **Inter:** Keep usage secondary to the custom display faces and mono system; measured usage is regular weight.

### Type scale — Custom (ratio ≈ 1.699, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 198px | 400 | 1.1 | 0.01em | uppercase | Trovador Regular | Hero-scale uppercase wordmark and prominent expressive specimen typography. |
| h1 | 169px | 400 | 1.1 | 0.01em | uppercase | Carpenter Regular | Primary featured font specimen headline. |
| h2 | 164px | 400 | 1.1 | 0.01em | uppercase | Adhesion Regular | Secondary large specimen titles or section headlines. |
| h3 | 120px | 400 | 0.95 | 0.01em | uppercase | Basement Grotesque Black Expanded | Bold expanded uppercase display headings and specimen names. |
| h4 | 90px | 400 | 1.1 | 0.01em | uppercase | FFFLAUTA 400 | Distinctive display face for smaller feature or specimen headings. |
| body | 14px | 400 | 1.3 | 0.01em | uppercase | JetBrains Mono | Compact uppercase catalog descriptions and supporting copy. |
| caption | 12px | 400 | 1.5 | 0.06em | uppercase | JetBrains Mono | Tightly set uppercase metadata and small helper labels. |
| button | 14px | 400 | 1.14 | 0.04em | uppercase | JetBrains Mono | Uppercase mono text on explore and purchase controls. |
| nav | 14px | 400 | 1.29 | 0.06em | uppercase | JetBrains Mono | Uppercase mono labels in the persistent navigation rail. |
| link | 12px | 400 | 1.5 | 0.06em | uppercase | JetBrains Mono | Small uppercase mono links for social, legal, and catalog navigation. |
| eyebrow | 14px | 400 | 1.14 | 0.04em | uppercase | JetBrains Mono | Short uppercase category labels and section identifiers. |
| code | 14px | 400 | 1.3 | 0.01em | uppercase | JetBrains Mono | Mono-styled technical details and font specimen metadata. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 1, 2, 4, 6, 8, 10, 12, 15, 20, 23, 24, 30, 90 px.
- Section rhythm 38px · element gap 8px · card padding — · max content width 1392px.

Use a measured page max width of 1392px and a compact, asymmetric composition. On desktop, keep navigation in a narrow left rail while the main column carries the hero and a vertical run of wide specimen cards. Align utility text and card headers consistently; let the oversized specimen words occupy most of each card. Use the measured 4px base spacing system and compact element rhythm, with clear pauses between major sections. The long catalog ends in FAQ content and a large graphic footer.

## Shape & elevation

- Radius: button `50%` · card `8px` · badge `3px` · nav `3px` · xs `3px` · sm `4px` · md `8px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease-in-out` on interactive elements.

The interface is predominantly flat: no measured shadows or gradients. Separate specimen cards with fine #3a3a3a outlines and restrained rounded corners, using contrast and spacing instead of elevation. Keep layering concentrated in the hero collage and outlined footer lettering.

## Imagery

The hero uses a dense orange-and-black typographic collage with a halftone texture, functioning as a graphic specimen rather than product photography. The catalog cards are primarily large rendered font samples on black, each showcasing a distinct face. Lower-page artwork includes outlined, dimensional letterforms; keep this as a monochrome graphic accent, not a competing full-colour illustration.

## Components

### Persistent side navigation

A compact black rail with an orange brand wordmark, uppercase mono links, outlined font-name chips, and grouped legal, social, and support links.

### Hero artwork

A broad, high-contrast typographic collage in orange and black, framed by small uppercase ticker-like copy and supporting catalog text.

### Font specimen card

A wide, dark card with a 1px #3a3a3a border and 8px radius; place a compact metadata header above oversized sample lettering.

### Explore and buy labels

Small uppercase JetBrains Mono controls, usually outlined; use #efefef for Explore and #ff4d00 for Buy Now emphasis.

### FAQ block

A compact two-column section with a stacked question list, fine dividers, and a short answer panel in small mono text.

### Outline footer wordmark

A large wireframe-style typographic graphic above a dense, small-text footer navigation.

### Measured component styles

- **Primary button**: background #efefef · text #efefef · border 1px solid #efefef · radius 50% · padding 0px · 400 16px Inter
- **Secondary button**: transparent background · text #efefef · border 1px solid #ff4d00 · radius 50% · padding 0px · 400 16px Inter
- **Link** (“BASEMENT.STUDIO”): transparent background · text #efefef · radius 0px · padding 0px · 400 14px JetBrains Mono · uppercase
- **Card** (“BASEMENT GROTESQUE BLACK EXPANDED 10 STY”): transparent background · text #efefef · border 1px solid #3a3a3a · radius 8px · padding 0px · 400 16px Inter
- **Badge** (“EXPLORE”): transparent background · text #efefef · border 1px solid #efefef · radius 2.8px · padding 0px 4.2px · 400 14px JetBrains Mono · uppercase
- **Navigation item** (“BASEMENT GROTESQUE 10”): transparent background · text #efefef · radius 0px · padding 0.6px 0px 0px 0px · 400 14px JetBrains Mono · uppercase

## Do

- Use pure black as the dominant canvas.
- Reserve orange for selected actions and focal artwork.
- Make type specimens the largest elements in the content area.
- Set utility text in uppercase monospace.
- Use thin charcoal borders to define specimen cards.
- Keep navigation compact and aligned to the left rail.

## Don't

- Do not add gradients or drop shadows.
- Do not use bright orange as a broad page background.
- Do not standardize every specimen into one display typeface.
- Do not turn the catalog into a dense multi-column tile grid.
- Do not introduce decorative imagery that competes with the lettering.
- Do not soften the interface with large, pill-shaped controls.

## Agent prompt

Build a new page in the BASEMENT FOUNDRY visual style. Use Foundry Black (#000000) as the near-total canvas, Paper White (#efefef) for primary text, and Rule Charcoal (#3a3a3a) for thin card outlines. Apply Signal Orange (#ff4d00) sparingly to key actions and selected visual accents; use Muted Graphite (#747474) for secondary text. Create a compact left navigation rail beside a broad main content column. Set utility labels and navigation in uppercase JetBrains Mono, and give the main content expressive, oversized specimen typography with varied display faces. Keep cards flat, dark, and outlined, with small metadata headers and ample room for samples. Favor clear vertical sequencing, tight information labels, and dramatic typographic contrast. Avoid shadows, gradients, ornamental UI, and generic product photography.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Persistent left navigation beside a wide, vertically flowing main column of specimens, FAQ, and footer content. | fixed catalog navigation, font browsing, FAQ accordion-style questions | orange halftone hero, outlined specimen cards, uppercase mono labels, wireframe wordmark |

## Source CSS custom properties (selected)

```css
--inspect-color: red;
--color-black: #000;
--color-white: #efefef;
--color-lighter-gray: #afafaf;
--color-gray: #747474;
--color-dark-gray: #3a3a3a;
--color-darker-gray: #232323;
--color-darkest-gray: #121212;
--color-orange: #ff4d00;
--color-orange-rgb: 255 77 0;
--color-red: red;
--toastify-color-light: #ff4d00;
--toastify-color-dark: #ff4d00;
--text-shadow: hsla(0,0%,94%,.3);
--bg-black: hsla(0,0%,7%,.97);
--font-system: -apple-system,blinkmacsystemfont,segoe ui,roboto,oxygen,ubuntu,cantarell,fira sans,droid sans,helvetica neue,sans-serif;
--font-jb-mono: "JetBrains Mono",monospace;
--bg: #fff;
```

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