Design system · v2 · dark editorial

The system, as the founder letter uses it.

A true near-black ground, one emerald accent (#1a8a5c), and two type voices — Source Serif 4 to feel, Manrope to work. This page is the living reference; Home is the implementation, and Workflows is the wireframe gallery.

Ground · #060b0e Accent · #1a8a5c Voices · Source Serif 4 + Manrope Tokens · assets/tokens.css
01 · color

Color

One ground, one accent. The page is a true cool near-black; the only brand color is an emerald green, used in small doses — drop cap, CTA, pull-quote rule, footnote marks, category labels. Everything else is the ink scale. Vendor tints live only inside the app figures.

SurfacesGround + two elevations
--paper
#060b0e
--surface
#10191d
--surface-2
#16222a
Ink scaleText on the ground. All pass WCAG AA; body & lede are AAA.
--ink
body · 14.9:1
--ink-soft
lede · 8.2:1
--ink-dust
caption · 5.8:1
--rule
hairlines (non-text)
Accent · emeraldThe one brand color, #1a8a5c. ~4.8:1 on the ground.
--accent
#1a8a5c
--accent-strong
hover
--accent-label
labels
--accent-soft
30% wash
Signal & tintsUsed only inside the light app figures — never on the dark page.
--positive
#137333
--negative
#c5221f
--tint-slack
vendor
--tint-gmail
vendor
--tint-sheets
vendor
02 · type

Type — two voices, no third

Source Serif 4, italic, is the expressive voice: the thesis, pull quotes, and all marginalia. Manrope is the working voice — body, deks, labels, numbers, and figure timestamps — and its 800 weight is the assertive headline, the declarative counterpart to the serif's intimate one. Two voices, no third. (An earlier Special Elite typewriter cameo has been retired.)

Expressive · serif italicSource Serif 4 · opsz-aware

You don't need to become a different person to take on more.

thesis · --type-thesis · opsz 60

A Tuesday in May.

section head · --type-section · opsz 32

The right system shows up, finds the load that's already on you, and quietly takes it.

pull quote · --type-quote

byline / marginalia · opsz 14

Working · ManropeBody, deks, labels, numbers

Say yes to the work you actually want.

display · Manrope 800 · --type-headline · the assertive headline

A letter for the fractional CFO who has reached the ceiling of what one person can hold.

dek · --type-dek · weight 400

You have run the math. The math says yes. Your week says no. The gap between those two numbers is the shape of a problem productivity advice cannot answer.

body · --type-body · 1.7 leading

$2,000

number · --type-price · tabular, weight 700

Systems-thinking

category label · Manrope 600 · uppercase · emerald · the site motif

Figure timestampsManrope tabular · inside wireframes

6:42 AM   8:30 AM   1:34 PM   5:30 PM

Never used for running text. One register, one job.

03 · components

Editorial components

The page is a letter. These are its parts — each lifted verbatim from the implementation. Compose them in a single reading column (--col), letting figures break out to --col-wide.

MastheadBrand + dateline. Quiet, serif-italic.
AI Executive Assistants a Fun Side LLC service A letter · May 2026
Title block + drop capdateline → thesis → dek → byline, then a drop-cap lead

May 2026

You don't need to become a different person to take on more.

A letter for the fractional CFO who has reached the ceiling of what one person can hold.

You have run the math. The math says yes. Your week says no. The gap between those two numbers is the shape of a problem productivity advice cannot answer.

Section headRoman numeral marginalia + serif head
II.

What it is. What it isn't.

Pull quoteSerif italic, emerald left rule, cold-traffic attribution
You do not need more delegation. You need a different shape of help.— Alex Peck, alxpck.com/notes
Price blockRule-bound, Manrope tabular number
$2,000per month

About five billable hours, at the rates you charge today.

CTAA plain emerald link, not a button

Book a call to begin →Twenty minutes. The call is for getting started, not for being sold.

SignatureHeadshot + name. A letter is signed by a face.
headshot
slot

Alex Peck

Founder, AI Executive Assistants

FootnotesNumbered, emerald markers, serif
  1. Per-customer data isolation. One client's context never enters another's. Built on Anthropic's commercial terms, not the consumer policy.
  2. Cancel any month. No setup fee. Onboarding is one ninety-minute call plus a week of supervised operation.
04 · figures

Figures — schematic wireframe windows

Product moments are drawn as schematic line-art “windows” — not photographic app mockups. Each is one of six device archetypes so the set reads as many different tools, never one rounded rectangle repeated. The component CSS is assets/wireframes.css; the full collection lives in Workflows, and they hang in the letter's margins in Home.

Archetypes & frames.wf--chat / --email / --sheet / --cal / --doc / --board · gray / white / emerald
AAssistantApp
A
Assistant6:42 AM
Three things need you today:
  • Reyes — approve the scope
  • Ops hire — confirmed Thu
  • Pike — refund credited
this week · draft
Metric
This wk
Δ
1
Revenue
$312k
+10%
2
Pipeline
$1.4M
+17%
3
Cash
$511k
+3%
Note. Pipeline up on two inbound; one deal slipped to October.

Rules of the figure:

  • Pure schematic line-art on the dark ground — hairline strokes, one accent, real text only where the narrative needs it.
  • Frame color is the variant: gray (default), .wf--white (bright), .wf--emerald (green chrome). Mix them so the set has texture.
  • Each archetype sets its own --wf-w and radius, so ratios differ by tool.
  • They are frozen illustrations — no live UI, no scroll entrance. In Home they bleed off the page edges as marginalia.
05 · space

Space, radius & shadow

A rem-based ~1.5× scale. Radius is restrained except the phone. On the dark ground, elevation reads as a hairline ring plus a soft drop — not a glow.

Radius
sm · 4
md · 8
lg · 14
xl · 20
Elevation
--shadow-card
--shadow-device
06 · motion

Motion — ambient, never blanking

Everything loads visible. There is no scroll-triggered entrance. The only motion is subtle, in-place ambient loops that imply the assistant is working — and they never hide content. All of it collapses under prefers-reduced-motion.

Ambient vocabularyin-figure life only

drafting dots

breathing highlight · --loop-breathe

moved-event pulse · --loop-pulse

checklist glow · --loop-glow

07 · usage

Usage

The rules that keep the system feeling like one brand.

Do & don't

Do

  • Use serif italic for the things that feel; Manrope for the things that work.
  • Keep emerald rare — a few touches per page.
  • Set prose in one column at --col; break figures out to --col-wide.
  • Draw figures as schematic wireframe windows; mix gray, white & emerald frames.
  • Place a face where credibility is claimed, not as a sign-off.

Don't

  • Add a third type family or a mono eyebrow.
  • Use gold, navy, or warm-charcoal grounds — the ground is #060b0e.
  • Fade content in on scroll, or animate anything to blank.
  • Set body in serif — serif is the guest, not the host.
  • Tint the dark page with vendor colors; keep figures schematic.