Design System

A comprehensive guide to the new white, graphite, mustard, and mist visual language

Fonts in Use

Fonts change per theme. The current theme's font pairing is shown live below.

Heading Font

The quick brown fox

jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%&

var(--font-family-heading)

Body / Sans Font

The quick brown fox

jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz

0123456789 !@#$%&

var(--font-family-sans)

All Loaded Fonts

Fraunces

500, 700

Renaissance Engineering and Cybernetics

Heading font for Paper, Ember, and legacy themes

Manrope

400, 500, 600, 700, 800

Where the 1337 meet to speak machinespeak.

Body font for Paper and Signal themes

Space Grotesk

400, 500, 700

Fast signals, field notes, and useful links.

Heading font for Signal theme

Source Sans 3

400, 500, 600, 700

Clean surfaces, dense ideas.

Body font for Ember theme

IBM Plex Sans

400, 500, 600, 700

Readable systems, editorial technology notes.

Heading font for Ember theme

Inter

400, 500, 600, 700

The living desk for operators.

Body font for legacy themes

Signal Blue & UI Colors

Signal Blue is the system's functional UI accent — used for interactive elements, pills, and call-to-action surfaces outside the editorial palette.

Signal Blue

--signal-blue

Primary functional UI color — buttons, links, active states

Sage

--sage

Secondary UI accent — hover states, links, subtle highlights

Accent

--accent

Editorial accent — subscribe buttons, emphasis, warm pop

Signal Blue Components

Machine / SpeakWire SignalSystem Tag

Signal Blue Text Link →

System Notice

Signal blue used for informational UI surfaces that aren't part of the editorial palette.

Heading Variants

All heading styles used across the site. Match these against card and page elements to identify which heading level is in use.

Page-Level Headings

Page Title (H1)

text-5xl font-heading font-bold

Section Heading (H2)

text-4xl font-heading font-bold text-primary

Subsection (H3)

text-2xl font-heading font-bold text-secondary

Card Title (H4)

text-lg font-semibold leading-tight

Category / Meta Label

text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground

Card Heading Patterns

Article Card

Clean surfaces, dense ideas

A subtitle or description line shown on article listing cards.

Engineering5 min read

Wire Card (Signal)

Quick field note with commentary on a useful link

Short commentary — the wire desk for operators.

Wire2 min ago

Homepage Section

Clean surfaces, dense ideas.

text-3xl font-heading font-bold

Masthead / Brand

machinespeak systemsCyberdyneRenaissance Engineering and Cybernetics

Drop Shadows

Custom dramatic shadows inspired by the deheras design language. Heavier than Tailwind defaults — designed for cards, images, and interactive surfaces.

dramatic

.shadow-dramatic

Default card elevation

dramatic-lg

.shadow-dramatic-lg

Featured cards, hero panels

dramatic-xl

.shadow-dramatic-xl

Modals, overlays, image lightbox

dramatic-blue

.shadow-dramatic-blue

Signal-blue tinted for UI focus

Interactive Shadows

Hover me

shadow-dramatic + shadow-dramatic-hover — lifts and deepens on hover

Hover me (lg)

Starts at lg, lifts further on hover

Hover me (blue)

Blue-tinted shadow with hover lift

Dynamic Theme Generator

Editor-only feature

Upload an image to extract colors and generate a custom theme. Available to signed-in editors via the CMS.

Color Palette

Switch themes using the theme switcher in the header to see how all colors change dynamically.

Primary

--primary

Secondary

--secondary

Accent

--accent

Muted

--muted

Destructive

--destructive

Card

--card

Background

--background

Foreground

--foreground

Border

--border

Buttons

Tags & Badges

PrimaryAccentSignal BlueMuted

Typographic Scale

Based on a 1.25 major third ratio. Each step multiplies or divides the base (16px) by 1.25. Desktop sizes shown — mobile scales down one step.

Step	Mobile	Desktop	Ratio	Tailwind	Usage
Display	30px	44px	×2.75	`text-3xl / md:text-[2.75rem]`	Page title (H1)
H2	24px	36px	×2.25	`text-2xl / md:text-4xl`	Section heading
H3	20px	28px	×1.75	`text-xl / md:text-[1.75rem]`	Subsection heading
Dek	18px	22px	×1.375	`text-lg / md:text-[1.375rem]`	Article subtitle / lead
Body	20px	24px	×1.5	`prose-xl / md:prose-2xl`	Article body text
Base	16px	16px	×1	`text-base`	UI text, card descriptions
Small	14px	14px	×0.875	`text-sm`	Metadata, timestamps
Xs	12px	12px	×0.75	`text-xs`	Labels, badges, tracking
Micro	10px	11px	×0.68	`text-[10px] / text-[11px]`	Masthead, overlines

Live Scale

Article Page Hierarchy (Heading Font)

Renaissance Engineering and Cybernetics44px

Where the 1337 meet to speak machinespeak: readable systems, editorial technology notes, and useful links.22px dek

The living desk for operators: brief commentary, things worth reading, and machine-state notes that should reach people quickly.24px body

UI text, card descriptions, and secondary content surfaces.16px base

March 22, 2026 • 5 min read • Systems Engineering14px small

MACHINESPEAK SYSTEMS / CYBERDYNE12px xs

the wire / signal11px micro

Body Font Weight Scale

Regular (400) — Long-form body text and descriptions

Medium (500) — UI labels, navigation, and interactive text

Semibold (600) — Card titles, section labels, emphasis

Bold (700) — Page headings, strong callouts

Extrabold (800) — Display text, hero statements

Spacing Scale

4px

8px

16px

24px

32px

48px

2xl

64px

3xl

80px

4xl