# All things WTF design system

> All things WTF design system measured from allthingswtf.com: Hakobi font, #C53B3A primary, 8 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/allthingswtf.com/

All things WTF’s website (allthingswtf.com) uses the Hakobi font and #C53B3A as its main color on a #2A2A2A background. Measured by Sitepeel on November 7, 2026.

## What font does All things WTF use?

All things WTF uses Hakobi (weights 400 and 500) and New Spirit (weight 400) on allthingswtf.com. Page titles are 180px at weight 400 (81.5px on phones) and body text is 18px. Measured on November 7, 2026.

- Hakobi (weights 400, 500)
- New Spirit (weights 400)
- system-ui (weights 400)

## All things WTF colors: palette and hex codes

All things WTF’s main colors are #2A2A2A (graphite) for the background, #FDF7EB (pale amber) for text and #C53B3A (red) as the main accent, with #F07633 (vivid orange) as another accent. Measured on November 7, 2026.

- #2A2A2A: graphite
- #FDF7EB: pale amber
- #09407E: dark blue
- #C53B3A: red
- #F07633: vivid orange

## What is All things WTF built with?

All things WTF’s website (allthingswtf.com) is built with Sanity, Nuxt, Vue.js, Tailwind CSS and Cloudflare. Measured on November 7, 2026.

- JavaScript framework: Nuxt 4.2.2, Vue.js 3.5.26
- Hosting & CDN: Cloudflare
- Animation & 3D: GSAP 3.14.2, Lenis 1.3.17, GSAP ScrollTrigger
- Analytics: Cloudflare Web Analytics
- Site builder & CMS: Sanity
- UI & CSS: Tailwind CSS 4.x

## Questions and answers

### What font does All things WTF use?

All things WTF’s website uses Hakobi (weights 400 and 500) and New Spirit (weight 400). Page titles are 180px at weight 400 (81.5px on phones) and body text is 18px. Measured on November 7, 2026.

### What are the All things WTF colors and hex codes?

On allthingswtf.com: #2A2A2A (graphite) for the background, #FDF7EB (pale amber) for text and #C53B3A (red) as the main accent, with #F07633 (vivid orange) as another accent. The color palette above lists all 8 colors with their hex codes and where each one is used.

### What is the All things WTF design system?

The design system on this page is allthingswtf.com’s, as measured on November 7, 2026: Hakobi type, #C53B3A as the main color and pill-shaped corners, written down as a DESIGN.md. It is not All things WTF’s own documentation.

### What is All things WTF built with?

All things WTF’s website (allthingswtf.com) is built with Sanity, Nuxt, Vue.js, Tailwind CSS and Cloudflare. The full tech stack Sitepeel found: Nuxt, Cloudflare, Vue.js, GSAP, Lenis, Cloudflare Web Analytics, Sanity, Tailwind CSS and GSAP ScrollTrigger. Measured on November 7, 2026.

### What is the All things WTF DESIGN.md?

A plain-text file with All things WTF’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 All things WTF’s official design system?

No. Sitepeel measured it from allthingswtf.com’s public page on November 7, 2026. It is an independent analysis, not made or approved by All things WTF.

### Can I use All things WTF’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 All things WTF’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/allthingswtf.com/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 All things WTF.

## The DESIGN.md file

```markdown
---
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).

```