---
version: alpha
name: 10x Designers
description: Bold editorial dark — near-black canvas with a single electric red accent (#ff1841), oversized Neutral Face display headlines paired with clean Helvetica body, hard-edged cards and pill CTAs. A designer-built resource hub that reads like a poster.

colors:
  # Canvas + ink
  background: "#080808"
  surface: "#0f0f0f"
  surface-soft: "#171717"
  ink: "#ffffff"
  ink-secondary: "#8f8f8f"
  ink-muted: "#757575"

  # Signature accent — electric red
  primary: "#ff1841"
  primary-hover: "#df3131"
  accent-deep: "#7b0016"
  accent-shadow: "#550816"

  # Light inversion (cards / sections on white)
  surface-light: "#ffffff"
  ink-on-light: "#080808"
  border-light: "#eeeeee"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#080808"

  # Neutral scale
  gray-700: "#545454"
  gray-600: "#5f6360"
  gray-500: "#757575"
  gray-400: "#8f8f8f"
  gray-100: "#eeeeee"

typography:
  display-hero:
    fontFamily: "Neutral Face, Oswald, Helvetica, Arial, sans-serif"
    fontSize: 88px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -2px
  display:
    fontFamily: "Neutral Face, Oswald, Helvetica, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Neutral Face, Oswald, Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -1px
  card-title:
    fontFamily: "Neutral Face, Oswald, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 700
    lineHeight: 1.20
    letterSpacing: -0.5px
  body-large:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.2px
  eyebrow:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 1.5px
  caption:
    fontFamily: "Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 140px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  pill: 9999px

components:
  # Primary red CTA
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  # Secondary — outlined on dark
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.ink}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  # Eyebrow label
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.xs}"
    padding: 4px 10px

  # Dark resource card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.surface-soft}"

  # Inverted light card
  card-light:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-on-light}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.border-light}"

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.gray-700}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 12px 16px
    borderColor: "{colors.primary}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 32px
    borderColor: "{colors.surface-soft}"
---

# 10x Designers Design System

## Overview

10x Designers (the 10X Hub by designer Fons Mans) is a resource site that wears its craft on its sleeve — built by designers, for designers, and styled like a piece of editorial graphic design rather than a SaaS dashboard. The canvas is near-black (`{colors.background}`), the text is pure white (`{colors.ink}`), and a single electric red (`{colors.primary}`) does all the heavy lifting. There is no gradient soup and no pastel decoration: the whole identity rests on the tension between deep black, clean white, and one loud red.

The typographic move is the centerpiece. Oversized condensed display headlines (the brand's Neutral Face face, with Oswald as the closest Google substitute) are set tight and large — poster-scale type that compresses line-height below 1.0 and crops headlines to fill the frame. Underneath, body copy switches to clean, neutral Helvetica at comfortable reading sizes. The pairing is deliberately high-contrast: expressive, almost brutalist headers over quiet, workmanlike paragraphs.

Chrome is kept hard and honest. Cards are flat dark surfaces (`{colors.surface}`) separated by hairline value shifts rather than heavy borders or drop shadows. CTAs are pill-shaped and filled with the signature red, or outlined in white for secondary actions. The red is rationed — used for buttons, eyebrow labels, links, and the occasional underline — so that it never loses its punch. The result reads bold, dark, and editorial.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with pure-white ink (`{colors.ink}`)
- One signature accent: electric red (`{colors.primary}`), rationed for CTAs, labels, and links
- Oversized condensed display headlines (Neutral Face / Oswald), tight tracking and sub-1.0 line-height
- Clean Helvetica body for quiet, readable paragraphs
- Flat dark cards separated by value, not shadow
- Pill CTAs — red fill (primary) or white outline (secondary)
- Inverted white sections used for contrast breaks
- Editorial, poster-like composition over dashboard chrome

## Colors

### Canvas & Ink
- **Black Canvas** (`{colors.background}`): Page background. Near-black, not pure #000 — a hair of warmth.
- **Surface** (`{colors.surface}`): Dark card and panel fill, one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Hairline separators, hover wells.
- **White Ink** (`{colors.ink}`): Headlines and primary text.
- **Secondary Ink** (`{colors.ink-secondary}`): Muted descriptions, metadata.
- **Muted Ink** (`{colors.ink-muted}`): Tertiary captions, disabled labels.

### Accent — Electric Red
- **Signature Red** (`{colors.primary}`): CTAs, links, eyebrow labels, underlines. The whole brand voice.
- **Red Hover** (`{colors.primary-hover}`): Pressed/hover state on red CTAs.
- **Accent Deep** (`{colors.accent-deep}`): Deep red for dense fills and accents.
- **Accent Shadow** (`{colors.accent-shadow}`): Darkest red, for depth under the accent.

### Light Inversion
- **Light Surface** (`{colors.surface-light}`): White sections used as contrast breaks.
- **Ink on Light** (`{colors.ink-on-light}`): Near-black text on light sections.
- **Light Border** (`{colors.border-light}`): Hairline dividers on white.

### Neutral Scale
- **Gray 700** (`{colors.gray-700}`): Input borders, faint outlines on dark.
- **Gray 600** (`{colors.gray-600}`): Muted UI text.
- **Gray 500** (`{colors.gray-500}`): Tertiary text.
- **Gray 400** (`{colors.gray-400}`): Placeholder, secondary captions.
- **Gray 100** (`{colors.gray-100}`): Light dividers.

## Typography

### Font Family
- **Display**: `Neutral Face` (brand face) — fallback `Oswald, Helvetica, Arial, sans-serif`. A tight, condensed, high-impact display face.
- **Body / UI**: `Helvetica, Arial, sans-serif` — neutral, clean, workmanlike.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 88px poster headline — billboard impact |
| `display` | 64px large display |
| `section-heading` | Section titles |
| `card-title` | Resource / card headings |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Dense UI text, metadata |
| `button-ui` | Buttons, nav links (bold) |
| `eyebrow` | Uppercase tracked labels above headings |
| `caption` | Fine print, captions |

### Principles
- **Headline as poster**: Display type is set large and condensed with tight tracking and sub-1.0 line-height — meant to crop and fill the frame.
- **Loud over quiet**: Expressive condensed headers sit over neutral Helvetica body. The contrast is the identity.
- **Bold for action**: UI labels, nav, and eyebrows use weight 700; body stays 400.
- **Eyebrows lead sections**: Uppercase, tracked, often in red, introducing each block.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large editorial jumps at `{spacing.3xl}`–`{spacing.4xl}` for section rhythm.

### Grid & Container
- Max content width around 1200px, generous gutters
- Hero: oversized single-column headline, left- or center-aligned
- Resource grids: 2–3 column card layouts
- White sections interrupt the dark canvas as deliberate contrast breaks

### Whitespace Philosophy
- **Editorial breathing room**: Large vertical padding (`{spacing.3xl}`+) between sections lets oversized type land.
- **Black as the frame**: The dark canvas is the negative space; red and white are the figures.
- **Rationed accent**: Red appears sparingly so each instance carries weight.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Canvas, text blocks |
| Value Step (Level 1) | `{colors.surface}` on `{colors.background}` | Cards and panels separated by value |
| Hairline (Level 1b) | 1px `{colors.surface-soft}` | Dividers, card outlines on dark |
| Inversion (Level 2) | Light section on dark canvas | High-contrast contrast breaks |

**Shadow Philosophy**: Depth comes from value contrast and inversion, not drop shadows. Cards are flat fills one step lighter than the canvas; the most dramatic "elevation" is a full white section breaking the black field.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Hard editorial edges |
| `xs` | 4px | Eyebrow tags, small chips |
| `sm` | 8px | Inputs, small controls |
| `md` | 12px | Cards, panels |
| `lg` | 20px | Large feature containers |
| `pill` | 9999px | CTAs, buttons |

## Components

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

### Buttons
- **`button-primary`** — Red fill (`{colors.primary}`), white text, pill. The default CTA.
- **`button-secondary`** — Transparent on dark with white outline; inverts to white fill on hover.

### Pills & Badges
- **`badge`** — Red eyebrow tag, white uppercase tracked text, small radius.

### Cards
- **`card`** — Flat dark surface (`{colors.surface}`), hairline `{colors.surface-soft}` outline, 12px radius.
- **`card-light`** — Inverted white card for contrast-break sections.

### Inputs
- **`input`** — Dark fill, gray outline; focus shifts the border to the signature red.

### Navigation
- **`nav-bar`** — Black sticky header, white bold links, red CTA right-aligned.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`) with pure-white text
- Ration the red (`{colors.primary}`) — CTAs, links, eyebrows, underlines only
- Set display headlines large and condensed with tight tracking
- Pair expressive headers with neutral Helvetica body
- Use white inversion sections as contrast breaks
- Use pill shapes for CTAs

### Don't
- Don't dilute the red with secondary accent colors
- Don't add drop shadows — depth comes from value and inversion
- Don't loosen display tracking or raise line-height above 1.1 on headlines
- Don't set body copy in the condensed display face — Helvetica only
- Don't use the red as a large background fill behind body text
- Don't soften the editorial edges into rounded, friendly chrome

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, headline scales down hard |
| Tablet | 600–1024px | 2-column resource grids |
| Desktop | 1024–1200px | Full multi-column layout |
| Large Desktop | >1200px | Centered, generous gutters |

### Touch Targets
- Pill CTAs use 14px vertical padding for comfortable taps
- Nav links bold at 15px with generous spacing

### Collapsing Strategy
- Hero: 88px headline → scales down while keeping tight tracking
- Navigation: horizontal links → hamburger menu
- Resource cards: 3-column → 2-column → single column
- White inversion sections maintain edge-to-edge fill at all sizes
- Section spacing: 96px+ → ~48px on mobile

### Image Behavior
- Resource thumbnails fill card width, maintain aspect ratio
- Editorial imagery keeps hard, full-bleed edges

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Near-black `{colors.background}`
- Heading text: White `{colors.ink}`
- Body text: Muted `{colors.ink-secondary}`
- Primary CTA: Electric red `{colors.primary}`
- Card surface: `{colors.surface}`
- Focus / active: `{colors.primary}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline at 88px Neutral Face/Oswald weight 700, line-height 0.95, letter-spacing -2px, white `{colors.ink}`. Red eyebrow label above it (`{colors.primary}`, 13px bold uppercase, 1.5px tracking). Subtitle 20px Helvetica weight 400 in `{colors.ink-secondary}`. Red pill CTA (`{colors.primary}`, 9999px, 14px 28px padding) and a white-outline secondary pill."
- "Design a dark resource card: `{colors.surface}` fill, 1px `{colors.surface-soft}` outline, 12px radius, 24px padding. Title at 24px Oswald weight 700 white; body 15px Helvetica in `{colors.ink-secondary}`."
- "Build a contrast-break section: full-width white `{colors.surface-light}` band with near-black `{colors.ink-on-light}` condensed headline and a red `{colors.primary}` CTA."

### Iteration Guide
1. One accent only — the red carries the whole brand; never add a second hue
2. Headlines are condensed and oversized; body is neutral Helvetica
3. Depth = value contrast and white inversion, never shadows
4. Pills for actions, hard edges everywhere else
5. Keep red rationed so each appearance still reads as loud

---

## 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 10x Designers. Brand names and trademarks belong to their respective owners.