---
version: alpha
name: Basement Studio
description: Maximalist dark-mode branding studio — pure-black canvas, Geist at sub-zero tracking, a single electric orange accent, and a secondary label voice in a custom uppercase condensed face.

colors:
  # Canvas + ink
  background: "#000000"
  surface: "#1a1a1a"         # elevated card/panel surface
  surface-deep: "#111111"    # was rgb(26,26,26) — input and inset surfaces

  # Text / ink
  ink: "#ffffff"
  ink-secondary: "#e6e6e6"   # was rgb(230,230,230) — body, secondary text
  ink-tertiary: "#c4c4c4"    # subdued labels, muted metadata
  ink-muted: "#757575"       # was rgb(117,117,117) — captions, disabled
  ink-dark: "#2e2e2e"        # was rgb(46,46,46) — text on light surfaces / project tags

  # Brand accent
  primary: "#ff4d00"         # Electric Orange — CTAs, borders, active states, focus rings
  on-primary: "#000000"      # Black text on orange surface

  # Borders + dividers
  border: "#e6e6e6"          # was rgba(230,230,230,0.30) — flattened over dark canvas
  border-soft: "#2e2e2e"     # was rgba(230,230,230,0.20) — inner dividers

  # Shadow / glow
  shadow-orange: "#ff8c00"   # was rgba(255,140,0,0.15) — orange glow approximation

  # Focus / interactive
  focus-ring: "#ff4d00"      # matches primary — focus = orange in this system

typography:
  display-hero:
    fontFamily: "Geist, 'Geist Fallback', Arial, sans-serif"
    fontSize: 98px
    fontWeight: 600
    lineHeight: 0.90
    letterSpacing: -3.92px
    fontFeature: '"ss01"'
  display:
    fontFamily: "Geist, 'Geist Fallback', Arial, sans-serif"
    fontSize: 76px
    fontWeight: 600
    lineHeight: 0.89
    letterSpacing: -3.04px
    fontFeature: '"ss01"'
  heading-section:
    fontFamily: "Geist, 'Geist Fallback', Arial, sans-serif"
    fontSize: 38px
    fontWeight: 600
    lineHeight: 0.89
    letterSpacing: -1.52px
    fontFeature: '"ss01"'
  heading-sub:
    fontFamily: "Geist, 'Geist Fallback', Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: -0.72px
    fontFeature: '"ss01"'
  heading-small:
    fontFamily: "Geist, 'Geist Fallback', Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: -0.40px
    fontFeature: '"ss01"'
  body:
    fontFamily: "Geist, 'Geist Fallback', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
    fontFeature: '"ss01"'
  body-tight:
    fontFamily: "Geist, 'Geist Fallback', Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.07
    letterSpacing: -0.30px
    fontFeature: '"ss01"'
  nav-link:
    fontFamily: "Geist, 'Geist Fallback', Arial, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.23
    letterSpacing: 0px
    fontFeature: '"ss01"'
  button-ui:
    fontFamily: "Geist, 'Geist Fallback', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
    fontFeature: '"ss01"'
  label-upper:
    fontFamily: "flauta, 'flauta Fallback', 'IBM Plex Mono', monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  label-upper-sm:
    fontFamily: "flauta, 'flauta Fallback', 'IBM Plex Mono', monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  caption:
    fontFamily: "Geist, 'Geist Fallback', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 1.33
    letterSpacing: 0px
    fontFeature: '"ss01"'

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 56px
  3xl: 64px
  4xl: 96px
  5xl: 128px

rounded:
  none: 0px
  pill: 9999px

components:
  # Primary orange CTA — signature Basement button
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: "1px solid {colors.primary}"
    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
  button-primary-hover:
    backgroundColor: "{colors.on-primary}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: "1px solid {colors.primary}"

  # Ghost / outline button
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: "1px solid {colors.border}"
  button-ghost-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: "1px solid {colors.primary}"

  # Dark fill button
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 8px
    border: "0px solid {colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 4px 8px

  # Project / work card
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.border-soft}"
  card-hover:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.primary}"

  # Email / contact input
  input:
    backgroundColor: "{colors.surface-deep}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 4px
    border: "1px solid {colors.surface-deep}"
  input-focus:
    backgroundColor: "{colors.background}"
    border: "1px solid {colors.primary}"
    shadow: "rgba(35,35,35,0.16) 0px 0px 20px 20px inset"

  # Category / service label
  badge:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.label-upper}"
    rounded: "{rounded.none}"
    padding: 4px 8px
    border: "0px solid {colors.border-soft}"

  # Top navigation bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    padding: 10px 16px
    borderBottom: "1px solid {colors.border-soft}"

  # Nav link (default)
  nav-link:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
  nav-link-hover:
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    transition: "color 0.06s linear"
---

# Basement Studio Design System

## Overview

Basement Studio doesn't hedge. The entire site unfolds on a total black (`{colors.background}`) that refuses compromise — not near-black, not charcoal, but absolute void. Against that canvas, headlines arrive at 98px in Geist weight 600, compressed to sub-zero tracking (-3.92px at the largest size), creating letter-forms that feel welded together rather than typeset. The effect reads less like a website header and more like a brand manifesto etched in steel. This is a studio that builds things for the world's most ambitious startups, and the design communicates that ambition without restraint.

The accent strategy is singular and brutal: one color, `{colors.primary}` — an electric orange-red at exactly #ff4d00 — handles every high-stakes interaction. Orange borders on form inputs, orange dashes on contact fields, orange hover states on navigation, orange CTAs. It doesn't compete with secondary accent hues because there are none. The rest of the palette is grayscale, which forces that orange to punch every time it appears. A secondary typographic voice arrives through "flauta," a custom condensed face used exclusively for uppercase category labels and micro-annotations, providing a layer of editorial texture that Geist's geometric precision alone cannot supply.

The layout philosophy is grid-rigid and division-obsessed. Sections are separated by thin horizontal rules (`{colors.border-soft}`), project grids snap to tight column counts, and the "trusted by world-class brands" ticker reel reinforces credibility through density rather than featured hero treatment. There are no shadows, no gradients used decoratively, and no rounded corners — the system is binary: `{rounded.none}` for everything structural, `{rounded.pill}` only if it ever surfaces. Basement Studio treats design as craft and the website as proof of work.

**Key Characteristics:**
- Absolute-black `{colors.background}` — no dark-gray softening, true #000000
- Geist at 600 weight with extreme negative tracking (-3.92px display, -3.04px section) — compression as brand identity
- Single electric-orange accent `{colors.primary}` — all interactivity routes through one color
- "flauta" custom condensed uppercase face for category labels and micro-annotations
- Zero border-radius on all structural elements — `{rounded.none}` is the default; no softness
- Input fields styled with orange dashed bottom borders — form as UI poetry
- Navigation hover transitions at 60ms linear — snap-speed, no easing
- Client trust signals delivered via dense multi-column grid, not hero testimonials
- Orange focus ring matching `{colors.primary}` — accessibility and brand merge at the same hue
- Seven Tailwind breakpoints from 400px to 1920px — thoroughly tested across viewport widths
- Motion at two speeds: 60ms linear for micro-interactions, 300ms cubic-bezier for structural transitions
- Self-hosted fonts (Geist, flauta) — zero Google Fonts dependency, full control

## Colors

### Primary Canvas
- **Void Black** (`{colors.background}`): The entire page background. No dark mode toggle needed — the site IS dark mode, permanently.
- **Elevation Surface** (`{colors.surface}`): Card, panel, and raised element backgrounds above the void.
- **Input Surface** (`{colors.surface-deep}`): Form field background — a shade darker than surface to recede.

### Text / Ink Scale
- **White** (`{colors.ink}`): All primary headings, high-emphasis text.
- **Near-White** (`{colors.ink-secondary}`): Body copy, navigation links at rest, secondary headings.
- **Light Gray** (`{colors.ink-tertiary}`): Subdued labels, secondary metadata.
- **Mid Gray** (`{colors.ink-muted}`): Captions, disabled states, placeholder text.
- **Near-Black** (`{colors.ink-dark}`): Text appearing on any light surface or reversed component.

### Brand Accent
- **Electric Orange** (`{colors.primary}`): The only chromatic value in the system. Used for CTAs, active borders, link hover states, dashed input underlines, and focus rings. Its scarcity is its power.
- **Black on Orange** (`{colors.on-primary}`): Text placed on any `{colors.primary}` surface.

### Borders & Dividers
- **Section Border** (`{colors.border}`): Horizontal rules and grid dividers between major sections.
- **Soft Border** (`{colors.border-soft}`): Subtle inner borders, card outlines, navigation underlines.

### Shadow & Glow
- **Orange Glow** (`{colors.shadow-orange}`): Warm diffused glow applied to elements carrying `{colors.primary}` — adds a brief luminous halo on email form focus.

## Typography

### Font Family
- **Primary**: `Geist`, with fallbacks: `'Geist Fallback', Arial, sans-serif`
- **Secondary Label Voice**: `flauta` (custom condensed, self-hosted), with fallbacks: `'flauta Fallback', 'IBM Plex Mono', monospace`
- **OpenType Features**: `"ss01"` enabled on all Geist instances — stylistic set 1 for alternate numeral forms

### Hierarchy

The complete type scale is in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 98px homepage hero — primary billboard statement |
| `display` | 76px section openers, project-count displays |
| `heading-section` | 38px feature sub-headers, capability titles |
| `heading-sub` | 24px card titles, client names, service headings |
| `heading-small` | 20px tertiary headings, feature labels |
| `body` | 16px/400 long-form copy, descriptions |
| `body-tight` | 15px/600 concise callouts, condensed prose |
| `nav-link` | 13px/600 navigation, tab labels |
| `button-ui` | 16px/400 CTA and interactive labels |
| `label-upper` | 14px flauta uppercase — category tags, annotation labels |
| `label-upper-sm` | 12px flauta uppercase — micro-annotations, counters |
| `caption` | 12px/600 Geist — timestamps, metadata, screen-reader labels |

### Principles
- **Tracking as compression**: Display sizes push tracking to -3.92px — letter-forms nearly collide, creating a monolithic headline mass rather than individual glyphs.
- **Two-font system with clear jurisdiction**: Geist owns all structural UI text; flauta owns all categorical labels and uppercase micro-type. They never swap roles.
- **Weight restraint**: Weight 600 is the headline workhorse; 400 is body/interactive. No 300, no 700, no 800.
- **Tight leading at large sizes**: `lineHeight: 0.89` at 76px means lines overlap their natural spacing — deliberate density for maximum impact in limited viewport space.
- **OpenType `"ss01"` on Geist**: Stylistic alternate for improved legibility across numeric contexts.

## Layout

### Spacing System
The complete scale is in the `spacing:` token block above. Base unit is 8px. The scale extends to `{spacing.5xl}` (128px) for major section separators on desktop — this system uses whitespace actively to pace a dense portfolio.

The rhythm alternates: tightly packed content rows separated by generous inter-section gaps. Within sections, `{spacing.md}` (16px) handles internal padding; between sections, `{spacing.3xl}`–`{spacing.5xl}` creates breathing room.

### Grid & Container
- Max content width: approximately 1920px (designs at full HD)
- Seven defined breakpoints: 400px, 640px, 768px, 1024px, 1280px, 1536px, 1920px
- Project grid: multi-column CSS grid, projects displayed as equal-width cards
- Trust ticker: full-width horizontal scroll revealing client logos with auto-wrap at mobile

### Whitespace Philosophy
- **Void amplifies signal**: When the canvas is black, whitespace is negative black — the absence of elements reads as intentional silence, not empty.
- **Section density**: Each section packs maximum information horizontally; vertical transitions are the relief valve.
- **No decorative space**: Every gap serves navigation rhythm, not decoration.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Body content, text blocks, nav |
| Divider (Level 1) | `border-bottom: 1px solid {colors.border-soft}` | Section separators, nav underline |
| Card (Level 2) | `border: 1px solid {colors.border-soft}` | Project cards, content panels |
| Card Active | `border: 1px solid {colors.primary}` | Card hover / active state |
| Input (Level 2) | `border-bottom: 1px dashed {colors.primary}` | Contact form fields at rest |
| Input Focus | `box-shadow: rgba(35,35,35,0.16) 0 0 20px 20px inset` + orange border | Email field focused |
| Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard accessibility |

**Shadow Philosophy**: Basement Studio has no box-shadows for elevation — shadows here are flat, the depth system is entirely border-driven. The closest thing to a glow is the orange inset shadow on focused inputs (`{colors.shadow-orange}`), which adds warmth not lift. Hierarchy is spatial, not atmospheric.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every structural element — buttons, cards, inputs, tags, images |
| `pill` | 9999px | Reserved for any future pill-style badge (not currently in active use) |

The radius philosophy is absolute: Basement Studio does not round corners. The design aesthetic is angular, industrial, and precise — soft corners would undercut the visual language. Every CTA, every card, every input field maintains sharp 90-degree corners. This is non-negotiable.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`, etc.).

### Button Variants

- **`button-primary`** — Electric-orange fill, black text, sharp corners. The only button in the system with chromatic fill. On hover: inverts to black fill, orange text, orange border. The inversion makes the orange border visible as a lingering frame.
- **`button-ghost`** — Transparent fill, white text, subdued border. On hover: border switches to `{colors.primary}`, text follows — the ghost becomes branded on interaction.
- **`button-secondary`** — Minimal padding, black background, no visible border. Functions as an inline text link elevated to click target.

### Cards

Project cards sit on `{colors.surface}` with a `{colors.border-soft}` outline. On hover, the border transitions to `{colors.primary}` — the orange frame signals selection before click. No radius, no shadow. Grid layout uses CSS grid multi-column.

### Inputs

Email/text inputs use `{colors.surface-deep}` fill with a 1px dashed orange bottom border — a form aesthetic borrowed from editorial design rather than SaaS conventions. On focus, an inset box-shadow creates depth within the field without changing its footprint. Placeholder text uses `{colors.ink-muted}`.

### Badges / Labels

Category tags and service labels use the `flauta` face in uppercase at 14px. They carry no background fill and no border — the uppercase condensed letterforms are the badge. Semantic context comes from placement and transform, not chrome.

### Navigation

Top bar: fixed, black fill, subtle bottom border in `{colors.border-soft}`. Links at 13px/600 Geist transition from `{colors.ink-secondary}` to `{colors.primary}` at 60ms linear — the fastest transition in the system, creating an immediate orange snap on hover. CTA in the nav ("Contact Us") inherits the primary button treatment.

## Do's and Don'ts

### Do
- Set the page background to absolute `{colors.background}` (#000000) — no dark-gray substitutions
- Route all interactivity through `{colors.primary}` — hover, focus, active, borders, all orange
- Use Geist at weight 600 for all headings with the negative tracking values from the token block
- Use flauta exclusively for uppercase category labels and micro-annotations — never for body copy or headings
- Apply `{rounded.none}` to every structural element — buttons, cards, inputs, images, all sharp
- Use dashed orange bottom borders on form inputs to maintain the editorial input aesthetic
- Keep the focus ring as `{colors.primary}` — accessibility and brand converge at the same orange
- Use the 60ms linear transition for hover micro-interactions; 300ms cubic-bezier for structural moves
- Apply `{typography.label-upper}` (flauta uppercase 14px) for all service/capability category labels
- Trust the two-font system — Geist + flauta cover every scenario without reaching for a third face

### Don't
- Don't add border-radius to structural elements — not even 2px. The system is hard-edged.
- Don't introduce secondary accent colors — `{colors.primary}` is the only chromatic token; adding teal, purple, or blue dilutes the scarcity effect
- Don't use flauta at lowercase — the face is designed for uppercase-only application in this system
- Don't use box-shadows for elevation — depth is border-driven, not shadow-driven
- Don't set body copy to pure `{colors.ink}` (#ffffff) — use `{colors.ink-secondary}` (#e6e6e6) for extended reading passages
- Don't add decorative gradients — the two existing gradients (section fades) are structural masking, not decoration
- Don't apply transition speeds between 60ms and 300ms — the system has two speeds, not a continuum
- Don't use `font-weight: 700` or higher — the heaviest weight in the system is 600

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single-column layout, hero text scales down to ~56px, nav collapses |
| Mobile | 400–640px | Single column, touch targets expanded, typography reduced |
| Tablet | 640–1024px | Two-column project grid, reduced hero font-size |
| Desktop | 1024–1280px | Full multi-column grid, standard type scale |
| Large Desktop | 1280–1920px | Maximum content density, full-width ticker, hero at 98px |

### Touch Targets
- All interactive elements maintain minimum 44px touch targets at mobile breakpoints
- Navigation collapses to a hamburger or condensed list at sub-768px
- CTA buttons expand to full-width at mobile for accessibility

### Collapsing Strategy
- Hero headline reduces from 98px → 56px at mobile; letter-spacing moderates proportionally
- Project grid collapses from multi-column to single-column at 640px
- Trust ticker switches from auto-scroll to manual swipe at touch breakpoints
- Section spacing reduces from `{spacing.5xl}` to `{spacing.2xl}` at mobile

### Image Behavior
- Project thumbnails maintain aspect ratio with `object-fit: cover`
- Logo ticker images invert to white on dark background via CSS filter or SVG fill
- OG image (GIF) and Twitter card image are defined at meta level, not responsive

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Brand accent: `{colors.primary}`
- Border: `{colors.border-soft}`
- CTA: `{colors.primary}`

### Example Component Prompts

- "Build a hero section for Basement Studio: absolute-black background (`{colors.background}`), 98px Geist weight-600 headline with -3.92px letter-spacing and 0.90 line-height, white text (`{colors.ink}`), 16px body copy at 400 weight in `{colors.ink-secondary}`, a primary CTA button with `{colors.primary}` fill and black text (`{colors.on-primary}`), sharp 0px corners everywhere. No shadows, no gradients."
- "Create a project card grid: cards on `{colors.surface}` (#1a1a1a) with a 1px `{colors.border-soft}` outline and `{rounded.none}` — sharp corners. On hover, border switches to `{colors.primary}` (#ff4d00). Card title in `{typography.heading-sub}` (24px/600 Geist, -0.72px tracking), category label in `{typography.label-upper}` (flauta 14px uppercase). Padding 24px on all sides."
- "Build a contact form: email input on `{colors.surface-deep}` background, no visible side/top borders, 1px dashed orange bottom border (`{colors.primary}`), white text (`{colors.ink}`). On focus: add `box-shadow: rgba(35,35,35,0.16) 0px 0px 20px 20px inset` and switch bottom border to solid `{colors.primary}`. CTA button below: orange fill (`{colors.primary}`), black text (`{colors.on-primary}`), sharp corners, full-width on mobile."
- "Design a top navigation bar: fixed position, `{colors.background}` fill, `{colors.border-soft}` bottom border. Logo wordmark left-aligned, nav links right-aligned in 13px/600 Geist (`{typography.nav-link}`). Link color `{colors.ink-secondary}` transitions to `{colors.primary}` in 0.06s linear on hover. 'Contact Us' CTA inherits `{components.button-primary}` treatment. No radius, no shadow."
- "Create a client logo trust strip: full-width row on `{colors.background}`, logos in white (SVG fill or CSS filter invert) arranged in a horizontal grid with subtle `{colors.border-soft}` column dividers at desktop. Category header above in `{typography.label-upper}` (flauta uppercase 14px) in `{colors.ink-muted}`. At mobile, the grid collapses to 3 columns."

### Iteration Guide

1. Start with `{colors.background}` (#000000) and nothing else — the void is the design foundation. Don't lighten it.
2. Every interactive state routes through `{colors.primary}` (#ff4d00) — hover borders, focus rings, CTA fills. One color, total consistency.
3. Headline tracking: apply the exact negative values from the token block (`-3.92px` display, `-3.04px` section). Approximations break the compressed aesthetic.
4. Depth is border-driven — use `{colors.border-soft}` for neutral borders, `{colors.primary}` for active/focused borders. No box-shadow elevation.
5. Respect the two-font rule: Geist at all weights for structural UI; flauta uppercase only for categorical labels. No cross-contamination.
6. `{rounded.none}` everywhere. If you feel the urge to round a corner, resist. Sharpness is the brand.
7. Motion has two gears: 60ms linear for hover micro-interactions, 300ms `cubic-bezier(0.4, 0, 0.2, 1)` for structural transitions. Nothing in between.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Basement Studio. Brand names and trademarks belong to their respective owners.