---
version: alpha
name: Studio Freight / Darkroom
description: Absolute black canvas, signal-red accent and elite proprietary typography — condensed display faces paired with monospace UI text, zero border-radius, and a signature ease-out motion system that makes every interaction feel like a shutter click.

colors:
  # Canvas + ink
  background: "#000000"
  surface: "#0a0a0a"        # near-black card/section surface
  surface-elevated: "#141414"  # slightly lighter raised surface

  # Text
  ink: "#ffffff"
  ink-secondary: "#e5e5e5"   # --color-light-grey from CSS vars
  ink-muted: "#808080"        # mid-grey for captions and metadata

  # Brand accent
  primary: "#e30613"          # signal red — CTAs, links, hover states
  primary-deep: "#390205"     # deep crimson — CTA backgrounds, borders
  primary-hover: "#ba0510"    # live hover state on CTA (from interactive delta)
  on-primary: "#e30613"       # red text on deep-crimson surface
  on-primary-light: "#370105" # dark text on red surface /* estimated */

  # Interactive states
  link: "#e30613"             # link color matches primary
  link-hover: "#370105"       # text darkens on hover against lightened bg
  focus-ring: "#e30613"       # focus ring matches brand red

  # Borders
  border: "#390205"           # deep crimson border (1px top on cards + headings)
  border-subtle: "#1a1a1a"    # very dark neutral dividers /* estimated */

  # Neutral greys (from CSS variables)
  dark-grey: "#262626"        # --color-dark-grey
  light-grey: "#e5e5e5"       # --color-light-grey
  white: "#ffffff"            # --color-white

  # Shadows
  shadow-soft: "#000000"      # pure black — shadows on black canvas are form, not depth

typography:
  # Proprietary fonts:
  #   "sauce" = AS Module 2 VF (self-hosted, variable)
  #   "therma" = AS Therma Bold Condensed (self-hosted)
  #   "mono" = Replica Mono LL Web (self-hosted)
  # Closest Google Font equivalents:
  #   sauce → Space Grotesk (variable weight, geometric)
  #   therma → Barlow Condensed Bold
  #   mono → Space Mono

  display-hero:
    fontFamily: "sauce, 'Space Grotesk', ui-sans-serif, system-ui, sans-serif"
    fontSize: 335px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px

  display:
    fontFamily: "therma, 'Barlow Condensed', ui-sans-serif, system-ui, sans-serif"
    fontSize: 267px
    fontWeight: 400
    lineHeight: 0.80
    letterSpacing: -13px

  heading-section:
    fontFamily: "therma, 'Barlow Condensed', ui-sans-serif, system-ui, sans-serif"
    fontSize: 160px
    fontWeight: 700
    lineHeight: 0.80
    letterSpacing: -8px
    fontFeature: "\"ss04\""

  heading-sub:
    fontFamily: "mono, 'Space Mono', ui-monospace, SFMono-Regular, Consolas, monospace"
    fontSize: 19px
    fontWeight: 200
    lineHeight: 1.20
    letterSpacing: -0.19px

  body:
    fontFamily: "mono, 'Space Mono', ui-monospace, SFMono-Regular, Consolas, monospace"
    fontSize: 19px
    fontWeight: 200
    lineHeight: 1.20
    letterSpacing: -0.19px

  body-small:
    fontFamily: "mono, 'Space Mono', ui-monospace, SFMono-Regular, Consolas, monospace"
    fontSize: 13px
    fontWeight: 200
    lineHeight: 1.20
    letterSpacing: -0.13px
    fontFeature: "\"case\""

  nav-link:
    fontFamily: "mono, 'Space Mono', ui-monospace, SFMono-Regular, Consolas, monospace"
    fontSize: 19px
    fontWeight: 200
    lineHeight: 1.00
    letterSpacing: -0.19px
    fontFeature: "\"case\""

  button-ui:
    fontFamily: "mono, 'Space Mono', ui-monospace, SFMono-Regular, Consolas, monospace"
    fontSize: 19px
    fontWeight: 200
    lineHeight: 1.00
    letterSpacing: -0.19px

  caption:
    fontFamily: "mono, 'Space Mono', ui-monospace, SFMono-Regular, Consolas, monospace"
    fontSize: 13px
    fontWeight: 200
    lineHeight: 1.20
    letterSpacing: -0.13px

spacing:
  xs: 5px       # base ~5.33px from 8px/1.5 scale — rounded
  sm: 8px
  md: 11px      # ~10.67px from scale — rounded
  lg: 21px      # ~21.33px from scale — rounded
  xl: 32px
  2xl: 43px     # ~42.67px from scale — rounded
  3xl: 53px     # ~53.33px from scale — rounded
  4xl: 160px    # section-scale vertical padding

rounded:
  none: 0px     # dominant — the entire system is essentially square
  pill: 9999px  # reserved for tags/badges only if needed

components:
  button-primary:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 11px

  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary-light}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 11px
    transition: "background-color 0.3s cubic-bezier(0.19, 1, 0.22, 1), color 0.3s cubic-bezier(0.19, 1, 0.22, 1)"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 11px
    borderColor: "{colors.border}"

  button-ghost-hover:
    backgroundColor: "{colors.primary-deep}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 11px

  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.none}"
    padding: 21px
    borderTop: "1px solid {colors.border}"

  card-elevated:
    backgroundColor: "{colors.surface-elevated}"
    rounded: "{rounded.none}"
    padding: 32px
    borderTop: "1px solid {colors.border}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 11px 21px
    borderBottom: "1px solid {colors.border}"

  nav-link-default:
    textColor: "{colors.primary}"
    typography: "{typography.nav-link}"

  nav-link-hover:
    textColor: "{colors.on-primary-light}"
    backgroundColor: "{colors.primary-hover}"
    typography: "{typography.nav-link}"
    transition: "background-color 0.5s cubic-bezier(0.19, 1, 0.22, 1), color 0.5s cubic-bezier(0.19, 1, 0.22, 1)"

  section-divider:
    borderTop: "1px solid {colors.border}"
    marginTop: "{spacing.4xl}"
    marginBottom: "{spacing.4xl}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 11px 16px
    borderColor: "{colors.border}"

  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"
    outlineColor: "{colors.focus-ring}"

  caption-label:
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
---

# Darkroom Design System

## Overview

Darkroom (the studio arm of Studio Freight) operates at the technical extreme of web craft — and its website reads like an artifact from that philosophy. The canvas is absolute black (`{colors.background}`), not dark-grey or charcoal, but zero-value pure black that refuses to apologize for itself. Against it, signal red (`{colors.primary}`) lands with the force of a warning light: crisp, industrial, unambiguous. This is not a branding palette assembled from a mood board — it is the visual language of a studio that knows the difference between craft and decoration, and has chosen craft.

The typographic system is built on three proprietary faces: AS Module 2 VF (mapped as "sauce" in CSS), a variable geometric that inflates to 335px at hero scale; AS Therma Bold Condensed (mapped as "therma"), a grotesque so compressed it reads almost as pure form at 267px with -13px tracking; and Replica Mono LL (mapped as "mono"), a monospaced face used at 19px for all UI text, navigation, and body copy. The decision to run monospace at body size is the defining typographic move — it signals precision and terminal culture, collapsing the distance between the studio's product (code-driven web) and its self-presentation.

Interaction is where the system shows its engineering heritage most clearly. Every transition uses `cubic-bezier(0.19, 1, 0.22, 1)` — an aggressive ease-out that launches fast and decelerates into place like a high-end camera shutter. Duration runs from 0.3s (micro UI) to 0.6s (hero entrances) to 1s (full-page reveals), always with the same easing. The result is a site that never feels jerky or mechanical — it glides with intention.

**Key Characteristics:**
- Absolute black canvas (`{colors.background}`) with no softening to off-black or charcoal
- Signal red (`{colors.primary}`) as the sole accent — links, CTAs, focus states all share one color
- Deep crimson (`{colors.primary-deep}`) as the CTA surface, creating a controlled red-on-red system
- AS Module 2 VF at 335px for hero wordmarks — display text treated as pure graphic form
- AS Therma Bold Condensed at 267px with -13px letter-spacing and 0.80 line-height — maximum compression
- Replica Mono LL for ALL UI text (nav, body, labels, captions) — monospace as the default voice, not an accent
- OpenType `"ss04"` on condensed headings; `"case"` on mono nav and small labels
- Zero border-radius throughout — no softening, no pill shapes, no rounded corners
- Top-border-only card treatment using `{colors.border}` (1px deep crimson) — cards separated by a thin red seam
- Signature easing: `cubic-bezier(0.19, 1, 0.22, 1)` for every transition
- Repeating gradient texture using `{colors.primary-deep}` stripes — a subtle scan-line motif
- No shadows — depth comes from border contrast alone on a black field

## Colors

### Canvas & Ink
- **Absolute Black** (`{colors.background}`): Page canvas. Not `#111`, not `#0d0d0d` — exactly `#000000`. The uncompromising foundation of the entire system.
- **Near-Black Surface** (`{colors.surface}`): Card and section backgrounds. One step off absolute black for subtle layering.
- **Raised Surface** (`{colors.surface-elevated}`): The highest surface level before reaching interactive red zones.
- **White** (`{colors.ink}`): Primary text and active UI elements. Maximum contrast on black.
- **Light Grey** (`{colors.ink-secondary}`): Secondary text, subtitles, supporting copy. Pulled directly from `--color-light-grey`.
- **Mid Grey** (`{colors.ink-muted}`): Captions, metadata, timestamps.

### Brand Accent
- **Signal Red** (`{colors.primary}`): The single accent — link text, active nav, hover text, focus rings. All interactivity resolves to this color.
- **Deep Crimson** (`{colors.primary-deep}`): CTA button background, card top-borders. The deeper register of the red system. Also used in the scan-line gradient motif.
- **Hover Crimson** (`{colors.primary-hover}`): Live CTA background on hover — lightened slightly from deep crimson.
- **On-Primary** (`{colors.on-primary}`): Signal red text rendered on deep-crimson surfaces.

### Interactive
- **Link** (`{colors.link}`): All anchor text defaults to signal red.
- **Link Hover** (`{colors.link-hover}`): Text inverts to near-black when hover background lightens to crimson.
- **Focus Ring** (`{colors.focus-ring}`): Keyboard focus ring matches the accent — no separate focus color.

### Borders
- **Border** (`{colors.border}`): The deep-crimson seam between elements. Used as top-border on cards and bottom-border on headings.
- **Border Subtle** (`{colors.border-subtle}`): Near-invisible dark dividers on black. Structural only.

### Dark Grey Scale
- **Dark Grey** (`{colors.dark-grey}`): From CSS variable `--color-dark-grey` (`#262626`). Mid-level surfaces.
- **Light Grey** (`{colors.light-grey}`): From CSS variable `--color-light-grey` (`#e5e5e5`). Theme color per manifest.

## Typography

### Font Family
- **Display (sauce)**: AS Module 2 VF — variable geometric, used at extreme sizes (335px, 115px). Closest Google Font: `Space Grotesk`.
- **Condensed (therma)**: AS Therma Bold Condensed — compressed grotesque with `"ss04"` feature. Closest Google Font: `Barlow Condensed`. Used at 267px and 160px with tight negative tracking.
- **Mono (mono)**: Replica Mono LL — used for ALL UI text, navigation, body copy, and labels. Not an accent — it IS the default voice. Closest Google Font: `Space Mono`.

### Hierarchy

The complete type scale is in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 335px sauce — full-viewport wordmarks, studio name as graphic form |
| `display` | 267px therma, uppercase, -13px tracking — section identity words |
| `heading-section` | 160px therma bold, `"ss04"`, -8px — primary section headers |
| `heading-sub` | 19px mono weight 200, uppercase — sub-section labels |
| `body` | 19px mono weight 200 — all reading copy |
| `body-small` | 13px mono weight 200, `"case"` — dense captions, metadata blocks |
| `nav-link` | 19px mono weight 200, uppercase, `"case"` — navigation items |
| `button-ui` | 19px mono weight 200 — CTA and interactive element labels |
| `caption` | 13px mono weight 200 — secondary metadata |

### Principles
- **Monospace as default, not accent**: Replica Mono LL runs everything smaller than display size. This inverts the usual hierarchy where mono is reserved for code.
- **Three registers, massive scale contrast**: 335px (wordmark) → 267px (identity) → 160px (section) → 19px (everything else). No mid-range sizes between 13px and 160px.
- **Condensed with extreme compression**: Therma at -13px tracking and 0.80 line-height pushes physical density to its visual limit.
- **OpenType case-sensitivity**: The `"case"` feature on small mono text optimizes uppercase letterforms for cap-height composition.
- **Weight 200 throughout UI**: Every mono usage at UI sizes runs weight 200 (extra-light) — a deliberate choice that keeps functional text subordinate to the display giants above it.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit is approximately 5.33px (an 8px scale divided by 1.5 for a 16px root). All values are rounded to whole pixels.

The spacing personality is sparse and functional. At the display scale the type dwarfs every spacing value — `{spacing.4xl}` (160px) is used for major section padding, but even that feels contained against 267px letterforms.

### Grid & Container
- Max content width: approximately 1280px with auto margins
- Primary layout: full-bleed single-column hero, 2-column work grid below
- Cards in project grids use minimal gap — the crimson top-border creates separation without whitespace
- Navigation: full-width bar, items left-aligned with studio identity right

### Whitespace Philosophy
- **Black field, not white void**: Whitespace here is not white — it is more black. The canvas color IS the negative space, so breathing room reads as shadow rather than light.
- **Type as space**: At 335px a single wordmark fills a viewport. The "whitespace" between sections is often just the black canvas between two massive typographic blocks.
- **Minimalism of reduction, not addition**: Padding exists to separate elements mechanically, not to suggest premium luxury. Tightness is the aesthetic.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No treatment | Page background, body text blocks |
| Seam (Level 1) | `1px solid {colors.border}` top-border only | Cards, project tiles, section entries |
| Ruled (Level 1b) | `1px solid {colors.border}` bottom-border | Headings underlined by deep crimson |
| Scan Line (Decorative) | Repeating gradient of `{colors.primary-deep}` 2px stripes | Atmospheric texture on select backgrounds |
| Focus Ring | `2px solid {colors.focus-ring}` outline | Keyboard accessibility on all interactive elements |

**Shadow Philosophy**: There are no shadows. On a black canvas, box-shadows would require extreme opacity to be perceptible — and Darkroom refuses the softness. Depth is created purely by border contrast: a 1px deep-crimson line (`{colors.border}`) at the top of a card is the only elevation signal in the system. Everything else is positional — things below are deeper, things above are the stage.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — the entire system is square |
| `pill` | 9999px | Reserved for hypothetical future tag/badge components only |

Darkroom uses exactly one border-radius value: zero. Every container, button, card, input, and interactive element is a hard rectangle. The slight `10.24px` radius detected on `<span>` elements is a browser-default artifact on inline highlight spans — not an intentional design choice. This is among the strictest shape systems in the corpus: binary between absolute zero and a theoretical pill that doesn't appear on the site.

## Components

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

### Button Variants
- **`button-primary`** — Deep crimson (`{colors.primary-deep}`) background with signal-red (`{colors.on-primary}`) text, zero radius. The CTA is a controlled red-on-red collision where the background is the darker red and the label is the brighter one.
- **`button-primary-hover`** — Background lightens to `{colors.primary-hover}`, text inverts to near-dark. Transition at 0.3s with the signature ease-out curve.
- **`button-ghost`** — Black background with red label and deep-crimson top-border. A secondary action that participates in the red system without committing to it.

### Cards
- **`card`** — Near-black surface, zero radius, 21px padding. The only decoration is the 1px deep-crimson top seam — cards announce themselves by a thin red line, nothing more.
- **`card-elevated`** — Slightly lighter surface (`{colors.surface-elevated}`) for raised contexts. Same top-border treatment.

### Navigation
- **`nav-bar`** — Full-width black bar, 19px Replica Mono links in signal red, deep-crimson bottom-border. When hovered, links shift background and text in a simultaneous color exchange.
- **`nav-link-hover`** — The hover executes a clean color swap: background becomes `{colors.primary-hover}`, text becomes `{colors.link-hover}` (dark). Runs at 0.5s ease-out.

### Inputs
- **`input`** — Black surface, no radius, body mono text. Deep-crimson border. Focus state brings a red outline that matches `{colors.focus-ring}`.

### Section Dividers
- **`section-divider`** — A 1px deep-crimson horizontal rule with symmetric vertical margin at `{spacing.4xl}`. The structural seam between all major sections.

## Do's and Don'ts

### Do
- Use `{colors.background}` as a true zero-black (`#000000`) — substituting `#111` or `#0a0a0a` breaks the absolute contrast intent
- Run Replica Mono for all UI text including body copy — mono is the default voice, not a special-purpose accent
- Apply the `cubic-bezier(0.19, 1, 0.22, 1)` easing curve on every CSS transition — uniformity is what makes the motion feel crafted
- Use the duration hierarchy: 0.3s for micro interactions, 0.5s for nav/links, 0.6s–1s for hero entrances
- Let `{colors.primary}` and `{colors.primary-deep}` do all the interactive work — no third accent color
- Maintain zero border-radius on all containers and interactive elements
- Use the top-border-only card treatment — a red seam at the top, nothing on sides or bottom
- Use `{colors.border}` (`{colors.primary-deep}`) for ALL structural lines — borders and the accent exist in the same color family
- Set heading letterSpacing to deeply negative values on therma — compression is the design

### Don't
- Don't add border-radius to buttons, cards, or inputs — even 2px breaks the hard-geometry contract
- Don't introduce a second accent color — the system is mono-accent by design; adding blue or green for semantics breaks the signal-red lock
- Don't use Replica Mono at weights above 200 for UI text — the extra-light weight is deliberate subordination
- Don't use white `{colors.ink}` for CTA labels on red surfaces — use `{colors.on-primary}` (signal red) or `{colors.on-primary-light}` (dark) depending on contrast
- Don't add box-shadows — the system has no shadow layer; depth is border contrast only
- Don't soften the canvas to off-black — `{colors.background}` must be exactly `#000000`
- Don't mix display sizes arbitrarily — the scale jumps from 13px directly to 160px. Mid-range headings (32px, 48px, 72px) are not in the system
- Don't use ease-in or linear transitions — only ease-out via the signature bezier curve
- Don't use decorative imagery or photography in the chrome — all visual work stays in project case studies, not UI containers

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile | <800px | Single column, display type scales down proportionally |
| Desktop | ≥800px | Full layout with multi-column project grids |

Note: dembrandt detected only a single meaningful breakpoint at 800px (plus a 98px artifact). The layout is intentionally binary — desktop or mobile, no tablet middle ground.

### Touch Targets
- Navigation links at 19px with generous horizontal padding
- CTA buttons use full-width treatment on mobile with adequate tap height
- Red hover states become active/tap states on touch devices — no hover-only affordances

### Collapsing Strategy
- Display typography scales proportionally on mobile — 335px hero type likely scales to viewport width (vw-based or clamp)
- Navigation collapses to a minimal mobile menu — likely a hamburger or slide-in
- Project grids: 2-column → single column
- Section padding reduces from `{spacing.4xl}` to `{spacing.xl}` or `{spacing.2xl}`
- Top-border card treatment persists at all breakpoints — it's too minimal to lose

### Image Behavior
- Project case study images are full-bleed — zero margins, edge-to-edge
- No border treatment on images — the canvas IS the frame
- Screenshots and stills maintain aspect ratio; mobile scrolls vertically

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Absolute Black `{colors.background}`
- Text: White `{colors.ink}`
- Secondary text: Light Grey `{colors.ink-secondary}`
- Brand accent: Signal Red `{colors.primary}`
- CTA surface: Deep Crimson `{colors.primary-deep}`
- Borders / seams: `{colors.border}` (same as primary-deep)
- Focus: `{colors.focus-ring}`

### Example Component Prompts

- "Create a hero section: `{colors.background}` canvas, full-viewport height. Main wordmark in 'sauce' (AS Module 2 VF / Space Grotesk fallback) at 335px, weight 400, line-height 1.0, color `{colors.ink}`. Sub-label in 'mono' (Replica Mono / Space Mono fallback) at 19px weight 200 uppercase, color `{colors.primary}`. No border-radius anywhere. All transitions use `cubic-bezier(0.19, 1, 0.22, 1)` at 0.6s."

- "Design a project card: `{colors.surface}` background (`#0a0a0a`), zero border-radius, `{spacing.lg}` padding (21px). Top border only: `1px solid {colors.border}`. Title in 'therma' (Barlow Condensed Bold fallback) at 160px weight 700, line-height 0.80, letter-spacing -8px, `font-feature-settings: 'ss04'`. Project category label in 'mono' 13px weight 200 uppercase, color `{colors.ink-muted}`. No box-shadow."

- "Build a CTA button: `{colors.primary-deep}` background (`#390205`), `{colors.on-primary}` text (`#e30613`), 19px mono weight 200, zero border-radius, padding `0px 11px`. On hover: background transitions to `{colors.primary-hover}`, text to `{colors.on-primary-light}`. Transition: `background-color 0.3s cubic-bezier(0.19, 1, 0.22, 1), color 0.3s cubic-bezier(0.19, 1, 0.22, 1)`."

- "Create a navigation bar: `{colors.background}` background, full width. Links in 19px Replica Mono weight 200, `font-feature-settings: 'case'`, uppercase, color `{colors.primary}`. Bottom border `1px solid {colors.border}`. On hover: link background shifts to `{colors.primary-hover}`, link text to `{colors.link-hover}`, transition at 0.5s with `cubic-bezier(0.19, 1, 0.22, 1)`."

- "Design a section heading: 'therma' (Barlow Condensed Bold) at 267px, weight 400, uppercase, letter-spacing -13px, line-height 0.80, color `{colors.ink}`. Underline treatment via `border-bottom: 1px solid {colors.border}` on the containing element. No padding-bottom needed — the tight line-height creates natural compression against the seam."

- "Build a footer with monospace metadata: all text in 'mono' (Space Mono fallback), 13px weight 200 uppercase, `font-feature-settings: 'case'`. Primary text `{colors.ink-secondary}`, muted text `{colors.ink-muted}`. Top border `1px solid {colors.border}`. Padding `{spacing.lg}` (`21px`) top/bottom."

### Iteration Guide

1. **Start with the canvas**: `{colors.background}` (#000000) — absolute zero. Every other decision is contrast against this.
2. **Place display type first**: At 267px–335px, therma and sauce dominate the composition before any layout grid is set. Let them define proportions.
3. **Apply red only to interactive and identity elements**: `{colors.primary}` for links/CTAs, `{colors.primary-deep}` for CTA surfaces and borders. No decorative red.
4. **Wire the motion system before any hover state**: Set `transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1)` as a base, then tune durations per context (0.3s micro, 0.5s links, 0.6s–1s hero).
5. **Default every radius to 0**: Remove browser defaults on inputs, buttons, and focus outlines. The geometry IS the brand.
6. **Border as the only structural signal**: Every separation between blocks uses `1px solid {colors.border}` on the top edge only — no background-color changes for card depth.
7. **Keep mono text at weight 200**: Every Replica Mono UI element runs extra-light. If something feels wrong, the weight is probably too heavy.

---

## 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 Studio Freight / Darkroom. Brand names and trademarks belong to their respective owners.