# Design Reference - basement.studio
> Void print shop at 3am — massive compressed type bleeding off a pitch-black canvas, one ember of orange light on the nav, everything else white or ghost-gray.

## Source
- Original site: https://basement.studio
- Captured: 2026-04-11T22:15:28.353Z

## Tags
- void-dark
- monochromatic
- display-type-dominant
- zero-radius
- single-accent
- grid-dense
- typographic-identity
- brutalist-minimal
- monofont
- high-contrast

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Ember Signal | `#ff4d00` | accent | Active nav state only — appears on a single interactive element as a hot indicator, never used for buttons or CTAs; its rarity is the feature |
| Void | `#000000` | neutral | Page background, button fill, SVG fills — absolute black, not near-black |
| Chalk | `#ffffff` | neutral | Primary text, nav labels, button text, body copy |
| Fog | `#e5e7eb` | neutral | Border color across nav, cards, buttons, logo grid dividers — the structural skeleton visible against black |
| Ash | `#c4c4c4` | neutral | Secondary text, subheadings, de-emphasized body copy, SVG fills |
| Graphite | `#757575` | neutral | Tertiary text, muted labels, icon fills |
| Carbon | `#454545` | neutral | Card/tile border color — used on logo grid cells to define structure without brightness |
| Obsidian | `#2e2e2` | neutral | Subtle element backgrounds, hover states, SVG fills |
| Cinder | `#1a1a1a` | neutral | Input backgrounds, input borders — the only surface that differs from absolute black |
| Smudge | `#666666` | neutral | SVG illustration fills, decorative icon tones |

## Typography
- role: Single font family across all type — nav, body, display, headings, labels. The 87px weight-600 headline at 0.89 line-height is the system's signature: text taller than its own cap-height spacing, letters colliding at scale. -0.04em letter-spacing at display sizes crushes the tracking until characters nearly touch. 'ss01' feature flag activates alternate glyph forms distinct to Geist. Using one face for everything from 12px captions to 87px display creates a monolithic typographic voice — zero genre-mixing.; sizes: 12px, 13px, 15px, 16px, 20px, 24px, 38px, 76px, 87px; family: Geist; weight: 400, 500, 600; lineHeight: 0.89–1.50 (tightest at largest sizes: 0.89 at 87px, 0.90 at 76px); substitute: Inter, Helvetica Neue; letterSpacing: -0.04em at 76-87px, -0.03em at 38px, -0.02em at 20-24px; fontFeatureSettings: "ss01" on

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "cards": "0px",
      "badges": "0px",
      "global": "0px — zero radius everywhere, no exceptions",
      "inputs": "0px",
      "buttons": "0px"
    },
    "elementGap": "8px",
    "sectionGap": "128px",
    "cardPadding": "16px",
    "pageMaxWidth": "1280px"
  },
  "radius": {
    "cards": "0px",
    "badges": "0px",
    "global": "0px — zero radius everywhere, no exceptions",
    "inputs": "0px",
    "buttons": "0px"
  }
}
```

## Component Patterns
- name: Client Logo Grid
- name: Display Headline with Body Copy
- name: Nav Bar Strip
- name: Ghost Navigation Link; role: Primary nav items
- name: Contact Us Button; role: Primary CTA in nav
- name: Scroll to Explore Label; role: Scroll prompt / ambient CTA
- name: Client Logo Tile; role: Social proof grid cell
- name: Section Label; role: Small contextual headers (e.g. 'Trusted by Visionaries')
- name: Display Headline; role: Hero primary heading
- name: Body Paragraph; role: Descriptive sub-headline body copy
- name: Text Input; role: Form input fields
- name: Nav Badge / Count; role: Numeric label on nav items (e.g. showcase item count)
- name: Wordmark; role: Brand logo in nav

## Do
- Use #000000 as the only page background — never substitute near-blacks like #0a0a0a or #111111; the absolute void is intentional.
- Apply 0px border-radius to every element — buttons, cards, inputs, badges, all components. Any rounded corner breaks the system.
- Reserve #ff4d00 exclusively for the active nav state. Never use it on buttons, CTAs, icons, or decorative elements.
- Set display type (38px+) with font-feature-settings: 'ss01' and letter-spacing at minimum -0.02em, scaling to -0.04em at 76-87px.
- Use 1px solid #454545 borders on grid tiles and 1px solid #e5e7eb on interactive elements (buttons, nav items) — these two border shades create a two-tier hierarchy.
- Maintain Geist as the single typeface across all sizes from 12px caption to 87px display — no secondary or decorative fonts.
- Use #c4c4c4 for body copy under headlines rather than full white, creating luminosity hierarchy through brightness rather than size alone.

## Don't
- Never add box-shadows, drop-shadows, or glows — the design has zero elevation; depth is created by type scale and color, not shadow.
- Never use rounded corners — not 2px, not 4px. The 0px radius is non-negotiable across every component.
- Never introduce a secondary typeface — not for decorative headlines, not for code blocks, not for quotes.
- Never place #ff4d00 on backgrounds, fills, or decorative shapes — it exists only as a 1-element text color signal.
- Never use white (#ffffff) for body-level descriptive text — use #c4c4c4 or #757575 to preserve the display headline as the luminance peak.
- Never add gradients to backgrounds or text — the system is flat, matte, and binary in its color application.
- Never apply padding greater than 16px to inline or small components — the spacing system is compact (4px base unit) and dense grid arrangements should not breathe excessively.