# 100xengineers Design System

> High-contrast brutalist engineering aesthetic using stark monochrome foundations punctuated by high-voltage vermillion accents and monospaced technical typography.

**Source:** https://100xengineers.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
100xengineers utilizes a high-contrast "hacker-brutalist" aesthetic. The system is built on a strict monochrome foundation of pure black `#000000` and white `#ffffff`, with a signature high-saturation orange-red accent (`#ff6343` / `#ff2b00`) used for primary calls to action and emphasis. Typography is the primary brand driver, pairing the geometric **Space Grotesk** for massive display headlines with **JetBrains Mono** for technical, data-heavy body content. Layouts rely on sharp 0px corners, thin 1px dividers, and a generous 4px-based spacing scale that emphasizes a structured, "code-like" information hierarchy.

## Signature DNA
1. **Technical Monospace Pairing** (JetBrains Mono is used for nearly all body and UI labels, signaling an "engineer-first" environment, while Space Grotesk provides high-impact geometric display contrast.)
2. **Vermillion Punctuation** (The brand uses `#ff6343` and `#ff2b00` exclusively for high-priority CTAs and "Success" markers, creating a singular focal point against the gray/black canvas.)
3. **Sharp Brutalism** (A near-total rejection of border radii (`0px` observed in 1408 instances) and the use of 1px solid borders creates a rigid, blueprint-like structure.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.black}` | `#000000` | Primary text, dark surface backgrounds | 335 | 0.8 | Computed Style |
| `{color.white}` | `#ffffff` | Primary page background, inverted text | 331 | 0.8 | Computed Style |
| `{color.gray.dark}` | `#1e1e1e` | Secondary text, dark UI elements | 215 | 0.8 | Computed Style |
| `{color.gray.mid}` | `#626262` | Muted body text, captions | 138 | 0.8 | Computed Style |
| `{color.gray.light}` | `#efefef` | Section backgrounds, subtle surfaces | 38 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.primary}` | `#ff6343` | Primary CTA background, highlight text | 392 | 0.8 | Computed Style |
| `{color.accent.strong}` | `#ff2b00` | Active states, high-priority highlights | 36 | 0.8 | Computed Style |
| `{color.link}` | `#0000ee` | Standard web link blue (decorative/legacy) | 35 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Space Grotesk | 400, 500, 700 | Display & Headings | Space Grotesk (Google) | OFL |
| JetBrains Mono | 400, 500, 600, 700 | Technical Body & UI | JetBrains Mono (Google) | OFL |
| Clash Display | 300, 400, 700 | Secondary Body | Clash Display (Free) | Proprietary/Free |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display.xl}` | 86px | 94.6px | -1.72px | 700 | Hero Headline | `p.framer-text` |
| `{text.display.lg}` | 56px | 61.6px | -1.68px | 700 | Section Header | `p.framer-text` |
| `{text.display.md}` | 48px | 52.8px | -1.44px | 700 | Sub-section Header | `p.framer-text` |
| `{text.mono.lg}` | 28px | 33.6px | 0px | 700 | Technical Heading | `p.framer-text` |
| `{text.mono.md}` | 24px | 28.8px | 0px | 500 | UI Labels | `p.framer-text` |
| `{text.body.mono}` | 19px | 20.8px | 0px | 500 | Standard Body | `p.framer-text` |
| `{text.body.sans}` | 19px | 28.5px | 0px | 400 | Prose Body | `p.framer-text` |
| `{text.caption.mono}`| 12px | 16.8px | 0px | 400 | Small Metadata | `p.framer-text` |

### Principles
1. **Negative Tracking on Display:** Large Space Grotesk headlines (48px+) always use negative letter-spacing (-1.44px to -1.72px) to maintain visual density.
2. **Monospace for Data:** All curriculum details, dates, and technical specs must use JetBrains Mono.
3. **Weight as Hierarchy:** Bold (700) is reserved for display and technical labels; body prose typically sits at 400 or 500.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 12 |
| `{space.sm}` | 12px | 10 |
| `{space.md}` | 16px | 13 |
| `{space.lg}` | 24px | 109 |
| `{space.xl}` | 32px | 20 |
| `{space.xxl}` | 40px | 18 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default for all buttons, cards, and sections | 1408 occurrences |
| `{radius.sm}` | 2px | Small UI cards / code blocks | 33 occurrences |
| `{radius.md}` | 4px | Form inputs / specific surfaces | 12 occurrences |
| `{radius.full}` | 842px | Avatars / Circular badges | 21 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | Standard state for all cards and buttons | Default |
| Accent Shadow | `rgb(255, 43, 0) 0px 3px 0px 0px` | Primary CTA "pressed" or "lifted" look | 2 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main Call to Action (Enroll, Join)
**Pages observed:** https://100xengineers.com
**Spec:** Background: `#ff6343` | Text: `#000000` | Radius: `0px` | Padding: `12px 32px` | Typography: `{text.mono.md}`
**States observed:** Default | Active (Shadow: `#ff2b00` 3px bottom)

#### Technical Card
**Role:** Curriculum modules, feature lists
**Pages observed:** https://100xengineers.com
**Spec:** Background: `#232323` | Text: `#ffffff` | Border: `1px solid #000000` | Radius: `2px` | Padding: `24px`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Section Header
**Role:** Introducing new content blocks
**Pages observed:** https://100xengineers.com
**Spec:** Typography: `{text.display.lg}` | Border-Top: `1px solid #cccccc` | Padding-Top: `40px`

#### Info Badge
**Role:** "Success Story" or "Next Cohort" labels
**Pages observed:** https://100xengineers.com
**Spec:** Background: `#efefef` | Text: `#000000` | Typography: `{text.caption.mono}` (700) | Padding: `10px 24px`

### Tier 3: Surface-specific

#### Curriculum Module
**Role:** Detailed course breakdown
**Pages observed:** https://100xengineers.com
**Spec:** Background: `#ffffff` | Border-Left: `4px solid #ff6343` | Padding: `24px 40px` | Typography: `{text.mono.md}`

#### Pricing Surface
**Role:** Enrollment fee display
**Pages observed:** https://100xengineers.com
**Spec:** Background: `#ffffff` | Border: `1px solid #ff6343` | Radius: `0px` | Shadow: `none`

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding | 24px (mobile) / 80px (desktop) |
| Grid Gap | 24px |

## Do's
- Use **JetBrains Mono** for any text that describes a process, date, or technical skill.
- Apply **0px border radius** to all primary interactive elements.
- Use `#ff6343` as the primary background for the most important button on the page.
- Ensure large headlines in **Space Grotesk** have at least -1.44px letter spacing.
- Use `#efefef` for secondary section backgrounds to create subtle visual separation.

## Don'ts
- **Wrong:** Using `#ff6343` for body text. **Right:** Use `#000000` or `#1e1e1e`. **Reason:** Accessibility and brand hierarchy; orange is for highlights only.
- **Wrong:** Rounding button corners. **Right:** Keep corners at 0px. **Reason:** The brand identity is built on a sharp, brutalist engineering aesthetic.
- **Wrong:** Using a sub-brand accent color (if any existed) as the primary site-wide background. **Right:** Use `#ffffff`. **Reason:** Parent brand is monochrome-first.
- Do not use standard sans-serif fonts for technical data; always default to the monospace stack.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #000000;
  --color-accent: #ff6343;
  --color-surface: #ffffff;
  --color-surface-muted: #efefef;
  --font-display: "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --radius-none: 0px;
  --space-unit: 4px;
}
```

## Known gaps
- Hover and Focus states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific navigation component details were limited in the analyzed page.
- Semantic colors for "Error" or "Warning" were not observed in the primary landing page flow.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://100xengineers.com | Desktop 1440px | 2026-06-06 |