# The Strokes design system

> Captured from https://www.thestrokes.com/ on 2026-10-05 by Brooks New Media (https://design.brooksnewmedia.com/styles/the-strokes/). An independent analysis for reference: The Strokes and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

The Strokes site is a retro desktop: a #0b17b4 blue screen, #cccccc grey window chrome, black and white text, and overlapping windows for tour dates, videos and the store. Every label is a bitmap DOS-style face at 12 to 17px, mostly uppercase, and corners stay at 3px. It is a gimmick done with total commitment.

- Theme: light
- Mood: retro, desktop, pixel, blue, playful
- Category: Band

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#cccccc` | The page ground |
| Surface | `#000000` | Raised panels, bands and cards |
| Text | `#000000` | Primary ink, 13.1:1 on the background |
| Accent | `#0b17b4` | Primary actions |
| Border | `#ffffff` | Hairlines and dividers |

Full palette, most used first: `#ffffff`, `#0b17b4`, `#000000`, `#cccccc`, `#011e75`.

## Typography

- **webdos24**: body, 58.8% of the text. Use VT323. webdos24, a bitmap PC-style face, looks like a custom or licensed face and we could not confirm its license, so treat it as paid. VT323 is a free stand-in, not a match.
- **webdos16**: display and body, 21% of the text. Use VT323. webdos16, a bitmap PC-style face, looks like a custom or licensed face and we could not confirm its license, so treat it as paid. VT323 is a free stand-in, not a match.
- **screenstar**: display and body, 16.1% of the text. Use Silkscreen. screenstar looks like a custom or licensed face and we could not confirm its license, so treat it as paid. Silkscreen is a free stand-in, not a match.
- **times**: display and body, 3.6% of the text. Use Tinos. Times ships with most systems. Tinos is a free stand-in that matches its metrics.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | screenstar | 17px | 400 | normal | 0 |
| Heading | screenstar | 17px | 400 | normal | 0 |
| Body | webdos24 | 14px | 400 | normal | 0.036em |
| Small | webdos24 | 12px | 400 | normal | 0.042em |

Sizes in use, largest first: 17px, 16px, 15px, 14px, 13px, 12px, 10px, 9px.

## Spacing

No single base unit: the values below are what the page repeats.
Values in use: 3px, 10px, 14px, 20px.

## Shape

Corner radii, smallest first: 3px, pill (9999px).

Shadows, most used first:

- `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px`

## Components

No repeated button or card treatment was found above the fold.

## Do

- Commit to one interface metaphor and build every section inside it.
- Use a bitmap face at small sizes for every label.
- Keep corners at a few pixels, like old window chrome.

## Don't

- Mix in a modern sans: it breaks the illusion.
- Use soft, large shadows.
- Use the blue for small text on black.

## CSS variables

```css
:root {
  --color-background: #cccccc;
  --color-surface: #000000;
  --color-text: #000000;
  --color-accent: #0b17b4;
  --color-border: #ffffff;
  --font-display: "screenstar", system-ui, sans-serif;
  --text-display: 17px;
  --weight-display: 400;
  --font-heading: "screenstar", system-ui, sans-serif;
  --text-heading: 17px;
  --weight-heading: 400;
  --font-body: "webdos24", system-ui, sans-serif;
  --text-body: 14px;
  --weight-body: 400;
  --font-small: "webdos24", system-ui, sans-serif;
  --text-small: 12px;
  --weight-small: 400;
  --space-1: 3px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 20px;
  --radius-1: 3px;
  --radius-2: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-05.