# Darkroom Engineering design system

> Darkroom Engineering design system measured from darkroom.engineering: therma font, 6 color hex codes, type scale and spacing. Dark theme with square corners.

Canonical page: https://sitepeel.dev/design-md/darkroom.engineering/

Darkroom Engineering’s website (darkroom.engineering) uses the therma font and #E71419 as its main color on a black background. Measured by Sitepeel on November 4, 2026.

## What font does Darkroom Engineering use?

Darkroom Engineering uses therma (weights 400 and 700), with mono for code on darkroom.engineering. Page titles are 200px at weight 400 (104px on phones). Measured on November 4, 2026.

- therma (weights 400, 700)
- mono (weights 200)

## Darkroom Engineering colors: palette and hex codes

Darkroom Engineering’s main colors are #000000 (near black) for the background, #FFFFFF (white) for text and #E71419 (vivid red) as the main accent, with #BA0E12 (red) as another accent. Measured on November 4, 2026.

- #000000: near black
- #FFFFFF: white
- #390205: deep red
- #E71419: vivid red
- #BA0E12: red

## What is Darkroom Engineering built with?

Darkroom Engineering’s website (darkroom.engineering) is built with Next.js, React, Vercel, GSAP and Lenis. Measured on November 4, 2026.

- JavaScript framework: Next.js 16.4.3, React 19.3.0-experimental-2787
- Animation & 3D: GSAP 3.15.0, Lenis 2.0.0-dev.5
- Analytics: Vercel Web Analytics
- Hosting & CDN: Vercel

## Questions and answers

### What font does Darkroom Engineering use?

Darkroom Engineering’s website uses therma (weights 400 and 700), with mono for code. Page titles are 200px at weight 400 (104px on phones). Measured on November 4, 2026.

### What are the Darkroom Engineering colors and hex codes?

On darkroom.engineering: #000000 (near black) for the background, #FFFFFF (white) for text and #E71419 (vivid red) as the main accent, with #BA0E12 (red) as another accent. The color palette above lists all 6 colors with their hex codes and where each one is used.

### What is the Darkroom Engineering design system?

The design system on this page is darkroom.engineering’s, as measured on November 4, 2026: therma type, #E71419 as the main color, square corners and a 4px spacing grid, written down as a DESIGN.md. It is not Darkroom Engineering’s own documentation.

### What is Darkroom Engineering built with?

Darkroom Engineering’s website (darkroom.engineering) is built with Next.js, React, Vercel, GSAP and Lenis. The full tech stack Sitepeel found: Next.js, React, GSAP, Lenis, Vercel Web Analytics and Vercel. Measured on November 4, 2026.

### What is the Darkroom Engineering DESIGN.md?

A plain-text file with Darkroom Engineering’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Darkroom Engineering’s official design system?

No. Sitepeel measured it from darkroom.engineering’s public page on November 4, 2026. It is an independent analysis, not made or approved by Darkroom Engineering.

### Can I use Darkroom Engineering’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Darkroom Engineering’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/darkroom.engineering/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Darkroom Engineering.

## The DESIGN.md file

```markdown
---
version: alpha
name: Darkroom Engineering
description: "Dark interface measured from darkroom.engineering: therma type, vivid red accents, flat surfaces and square corners."
colors:
  background: "#000000"
  surface: "#000000"
  on-surface: "#FFFFFF"
  on-background: "#FFFFFF"
  outline: "#390205"
  primary: "#E71419"
  on-primary: "#FFFFFF"
  secondary: "#BA0E12"
typography:
  headline-display:
    fontFamily: therma
    fontSize: 200px
    fontWeight: 400
    lineHeight: 0.8
    letterSpacing: -0.05em
  headline-lg:
    fontFamily: therma
    fontSize: 120px
    fontWeight: 700
    lineHeight: 0.8
    letterSpacing: -0.05em
  code:
    fontFamily: mono
    fontSize: 14px
    fontWeight: 200
    lineHeight: 1.2
    letterSpacing: -0.01em
  headline-display-mobile:
    fontFamily: therma
    fontSize: 104px
    fontWeight: 400
    lineHeight: 0.8
    letterSpacing: -0.05em
  headline-lg-mobile:
    fontFamily: therma
    fontSize: 75px
    fontWeight: 700
    lineHeight: 0.8
    letterSpacing: -0.03em
rounded:
  none: 0px
spacing:
  base: 4px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  gutter: 16px
  margin: 16px
components:
  button-ghost:
    typography: "{typography.headline-lg}"
    rounded: "{rounded.none}"
    padding: 0px
  link:
    textColor: "{colors.primary}"
---

# Darkroom Engineering Design System

## Overview

Darkroom Engineering describes itself as: “We're a global design and development studio shipping fast, motion-rich, and scalable digital work. WebGL, headless builds, and open source tools.” The interface is dark, built on **Near Black (#000000)** with **White (#FFFFFF)** text, and **Vivid Red (#E71419)** as the main accent.

Type is set in **therma**, with **mono** for code. Headlines run large with tight negative tracking; body text is compact. The surface language is flat. Corners are square.

Measured from [darkroom.engineering](https://darkroom.engineering/) on November 4, 2026 at 1440×900 and 390×844 from 401 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 6 roles.

- **Near Black (#000000):** Page background, seen 8 times. Token `background`.
- **White (#FFFFFF):** Primary text and headings. Token `on-surface`.
- **Deep Red (#390205):** Borders and dividers, seen 29 times. Token `outline`.
- **Vivid Red (#E71419):** Links and interactive text, seen 206 times. Token `primary`.
- **White (#FFFFFF):** Text and icons on primary. Token `on-primary`.
- **Red (#BA0E12):** Accent in text, fills and borders, seen 3 times. Token `secondary`.

## Typography

**therma** and **mono** (monospace) share the interface. Fallback stack: `therma, thermaExt, therma Fallback`. Other loaded fonts: sauce, monoExt.

- **headline-display:** therma 200px at weight 400, line height 0.8, tracking -0.05em, uppercase (104px on mobile). Page title (h1).
- **headline-lg:** therma 120px at weight 700, line height 0.8, tracking -0.05em, uppercase (75px on mobile). Section headings (h2).
- **code:** mono 14px at weight 200, line height 1.2, tracking -0.01em, uppercase. Code and technical values.

## Layout

Spacing follows a 4px grid: 94% of measured gaps and paddings are multiples of 4px.

- **Scale:** xs 4px, sm 8px, md 16px, lg 24px, xl 40px.
- **Gaps:** 16px is the most common gap in flex and grid layouts.
- **Page margin:** 16px on each side of full-width sections.
- **Breakpoints:** 799.98px, 800px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from color contrast and #390205 borders.

## Shapes

Corners are square. Measured radii, most used first:

- **none (0px):** measured.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **button-ghost (“SATUS”):** transparent fill, 120px/700, padding 0px.
- **link:** transparent fill, #E71419 text, padding 0px.

## Do's and Don'ts

- Do use #000000 for the page.
- Do use #E71419 for links and interactive text.
- Do set headlines in therma with tight tracking (-0.05em).
- Do keep spacing on the 4px grid.
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond therma and mono.
- Don't use #E71419 for large backgrounds or body text.
- Don't make interface transitions slower than 0.35s.

## Motion

Interface transitions are quick: 0.15s, 0.2s, 0.12s, 0.001s.

- **Easing:** `cubic-bezier(0.23, 1, 0.32, 1)`, `ease`.
- **Reduced motion:** the page responds to `prefers-reduced-motion`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/darkroom.engineering/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```