All things WTF design system

---
version: alpha
name: All things WTF
description: "Dark interface measured from allthingswtf.com: Hakobi type with New Spirit, red accents, flat surfaces and pill-shaped controls."
colors:
  background: "#2A2A2A"
  surface: "#2A2A2A"
  on-surface: "#FDF7EB"
  on-background: "#FDF7EB"
  outline: "#09407E"
  primary: "#C53B3A"
  on-primary: "#FDF7EB"
  secondary: "#F07633"
  success: "#0C9367"
  warning: "#F1B333"
typography:
  headline-display:
    fontFamily: Hakobi
    fontSize: 180px
    fontWeight: 400
    lineHeight: 1
  headline-lg:
    fontFamily: Hakobi
    fontSize: 90px
    fontWeight: 400
    lineHeight: 1.5
  headline-md:
    fontFamily: New Spirit
    fontSize: 27px
    fontWeight: 400
    lineHeight: 1.1
  body-md:
    fontFamily: Hakobi
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1
  body-sm:
    fontFamily: system-ui
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: New Spirit
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1
  headline-display-mobile:
    fontFamily: Hakobi
    fontSize: 81.5px
    fontWeight: 400
    lineHeight: 1
  headline-lg-mobile:
    fontFamily: Hakobi
    fontSize: 62px
    fontWeight: 400
    lineHeight: 1
rounded:
  full: 9999px
spacing:
  xs: 2.25px
  sm: 6px
  md: 9px
  lg: 18px
  xl: 43.5px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    padding: 9.75px 16.5px
    height: 38px
  button-secondary:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-surface}"
    padding: 9.75px 16.5px
    height: 38px
  button-tertiary:
    backgroundColor: "{colors.outline}"
    textColor: "{colors.on-surface}"
    padding: 9.75px 16.5px
    height: 38px
  card:
    backgroundColor: "#6758A5"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-sm}"
    rounded: 6px
    padding: 0px
  link:
    textColor: "{colors.on-surface}"
---

# All things WTF Design System

## Overview

All things WTF describes itself as: “Welcome to the All Things WTF community! Join Nikhil Kamath for insightful talks, podcasts, and a supportive ecosystem for entrepreneurs. At WTF we help you uncover trends, learn from top investors, gain business insight” The interface is dark, built on **Graphite (#2A2A2A)** with **Pale Amber (#FDF7EB)** text, and **Red (#C53B3A)** as the main accent.

Type is set in **Hakobi** and **New Spirit**. Headlines run large; body text is 18px. The surface language is flat. Controls are pill-shaped.

Measured from [allthingswtf.com](https://www.allthingswtf.com/) on November 7, 2026 at 1440×900 and 390×844 from 231 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 8 roles.

- **Graphite (#2A2A2A):** Page background, seen 9 times. Token `background`.
- **Pale Amber (#FDF7EB):** Primary text and headings, seen 65 times. Token `on-surface`, CSS `--color-white`.
- **Dark Blue (#09407E):** Borders and dividers, seen 1 time. Token `outline`, CSS `--color-custom-blue`.
- **Red (#C53B3A):** Primary buttons and calls to action, seen 6 times. Token `primary`, CSS `--color-custom-red`.
- **Pale Amber (#FDF7EB):** Text and icons on primary. Token `on-primary`.
- **Vivid Orange (#F07633):** Accent, seen 1 time. Token `secondary`, CSS `--color-orange`.
- **Dark Teal (#0C9367):** Success and positive states, seen 4 times. Token `success`, CSS `--color-custom-green`.
- **Vivid Amber (#F1B333):** Warnings and highlights, seen 4 times. Token `warning`, CSS `--color-yellow`.

## Typography

**Hakobi**, **New Spirit** and **system-ui** share the interface. Fallback stack: `Hakobi, sans-serif`. Other loaded fonts: Poppins.

- **headline-display:** Hakobi 180px at weight 400, line height 1 (81.5px on mobile). Page title (h1).
- **headline-lg:** Hakobi 90px at weight 400, line height 1.5, uppercase (62px on mobile). Section headings (h2).
- **headline-md:** New Spirit 27px at weight 400, line height 1.1. Sub-section headings.
- **body-md:** Hakobi 18px at weight 500, line height 1. Body text.
- **body-sm:** system-ui 12px at weight 400, line height 1.5. Secondary and small text.
- **label-md:** New Spirit 12px at weight 400, line height 1. Buttons, navigation and labels.

## Layout

Spacing does not follow a strict grid: 10% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 2.25px, sm 6px, md 9px, lg 18px, xl 43.5px.
- **Breakpoints:** 479px, 767px, 768px, 1023px, 1024px, 1280px, 1400px.

## Elevation & Depth

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

## Shapes

Interactive controls are pill-shaped. Measured radii, most used first:

- **full (9999px):** 20 elements.

## Components

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

- **button-primary (“Learn More”):** #C53B3A fill, #FDF7EB text, 14px/400, 3.35544e+07px radius, padding 9.75px 16.5px, border 2px solid #C53B3A.
- **button-secondary (“Learn More”):** #0C9367 fill, #FDF7EB text, 14px/400, 3.35544e+07px radius, padding 9.75px 16.5px, border 2px solid #0C9367.
- **button-tertiary (“Learn More”):** #09407E fill, #FDF7EB text, 14px/400, 3.35544e+07px radius, padding 9.75px 16.5px, border 2px solid #09407E.
- **card:** #6758A5 fill, #FDF7EB text, 12px/400, 6px radius, padding 0px, shadow `rgb(0, 0, 0) 0px 0px 15px 0px inset`.
- **link:** transparent fill, #FDF7EB text, padding 0px.

## Do's and Don'ts

- Do use #2A2A2A for the page.
- Do reserve #C53B3A for primary actions and key highlights.
- Do reuse the measured spacing steps (6px, 9px, 18px).
- Do make buttons and chips fully rounded (9999px).
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond Hakobi, New Spirit and system-ui.
- Don't use #C53B3A for large backgrounds or body text.
- Don't make interface transitions slower than 0.3s.

## Motion

Interface transitions are quick: 0.2s, 0.3s, 0.15s.

- **Easing:** `ease`, `cubic-bezier(0.4, 0, 0.2, 1)`.

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