Typography

Typefaces

Two typefaces are used across the entire platform — one humanist sans-serif and one monospaced.

Inter — Primary Sans

Property	Value
Family	Inter
Source	Google Fonts
CSS Variable	--font-family-sans
Tailwind Class	font-sans
Usage	All body copy, headings, navigation, form labels

Inter was chosen for its exceptional legibility at small sizes and its neutral authority — it reads as precise and professional without being corporate-bland.

JetBrains Mono — Monospace

Property	Value
Family	JetBrains Mono
Source	Google Fonts
CSS Variable	--font-family-mono
Tailwind Class	font-mono
Usage	Code snippets, token values, the [BJ] logo monogram, stats/numbers

The monospaced type reinforces the technical, hacker-adjacent brand identity. Used sparingly outside of code contexts, it adds a signature edge.

Token Source

packages/config-tailwind/theme.css

@theme {
  --font-family-sans: var(--font-sans), system-ui, sans-serif;
  --font-family-mono: var(--font-mono), monospace;
}

The --font-sans and --font-mono CSS variables are injected at the app level by Next.js next/font — each app sets these once in its root layout.

apps/www/app/layout.tsx (example)

import { Inter, JetBrains_Mono } from 'next/font/google';

const inter = Inter({ subsets: ['latin'], variable: '--font-sans' });
const mono  = JetBrains_Mono({ subsets: ['latin'], variable: '--font-mono' });

Type Scale

The scale uses Tailwind’s default modular type utilities. No custom scale is defined — standard Tailwind sizing covers all current UI needs.

Step	Class	Size	Line Height	Usage
xs	text-xs	12px	16px	Legal text, badges, meta labels
sm	text-sm	14px	20px	Secondary body, captions, table cells
base	text-base	16px	24px	Primary body copy
lg	text-lg	18px	28px	Lead paragraphs, card bodies
xl	text-xl	20px	28px	Sub-headings, service card titles
2xl	text-2xl	24px	32px	Section headings (h3)
3xl	text-3xl	30px	36px	Page headings (h2)
4xl	text-4xl	36px	40px	Hero sub-headings
5xl	text-5xl	48px	1	Hero headings (desktop)
6xl	text-6xl	60px	1	Display headings

Weight Conventions

Weight	Class	Usage
400 Regular	font-normal	Body copy
600 Semibold	font-semibold	Button labels, nav links, card titles
700 Bold	font-bold	Section headings, emphasis

Letter Spacing

Context	Class	Usage
Tight	tracking-tight	Large display headings
Normal	tracking-normal	Body copy
Wide	tracking-wide	Button labels, uppercase labels
Wider	tracking-wider	All-caps section labels, table headers

All-caps Labels

Section labels and badge text use uppercase with tracking-wider:

<span class="text-xs font-semibold tracking-wider uppercase text-brand-red">
  Featured In
</span>

Heading Hierarchy

h1  → text-5xl font-bold tracking-tight   (page title / hero)
h2  → text-3xl font-bold tracking-tight   (major sections)
h3  → text-2xl font-semibold              (sub-sections, card titles)
h4  → text-xl  font-semibold              (minor headings)