For any ε > 0, there exists a δ > 0.
The personal brand system of Alan Chester. Tokens, components, and assets. Everything I need to identify my work in code.
This is the system layer of my personal brand, expressed as code. It's the canonical source for:
- 🎨 Design tokens (colors, type, spacing) as CSS variables and JSON
- 🔠 Logo components (Monogram, Wordmark, EpsilonDelta) as React components
- 🖼️ Static assets (SVG and PNG exports of every mark)
- 📄 The brand document (a 13-page PDF that explains the whole system)
The goal is durability. Anything I build that needs my name on it (a personal site, a slide deck, a README, a side project) pulls its identity from here. When the brand evolves, it evolves here and propagates outward.
∀ ε > 0, ∃ δ > 0
The formal definition of a limit, in seven characters.
- ε is the standard the world demands. Define it before the work.
- δ is the small enough step that lands inside ε. The pivot, the input, the change in approach.
- The promise of the equation is that no matter how tight ε gets, a δ exists. The work is finding it.
The whole system is downstream of that line. See docs/brand-document.pdf for the full story.
npm install @amcheste/brand// Import the tokens once, anywhere in your app's CSS pipeline:
import "@amcheste/brand/tokens";
// Then use the components:
import { Monogram, Wordmark, EpsilonDelta } from "@amcheste/brand";
export default function Header() {
return (
<header>
<Monogram size={48} />
<Wordmark size={32} />
<EpsilonDelta variant="logo" />
</header>
);
}<!-- Drop in the tokens -->
<link rel="stylesheet" href="node_modules/@amcheste/brand/tokens/index.css">
<!-- Use the SVGs directly -->
<img src="node_modules/@amcheste/brand/assets/monogram-solid.svg" alt="A·ε·C" width="64">
<img src="node_modules/@amcheste/brand/assets/wordmark.svg" alt="alan chester.">Copy the files you need from tokens/, components/, and assets/ straight
into your project. The package is intentionally small and dependency-free for
exactly this reason.
| Token | Hex | Job |
|---|---|---|
--ac-ink |
#0B0B0C |
primary text, monogram fill |
--ac-graphite |
#2B2B2E |
body copy |
--ac-muted |
#8A8A8E |
captions, eyebrows, page numbers |
--ac-mist |
#E6E4DE |
dividers, hairlines |
--ac-paper |
#F6F4EE |
canonical background |
--ac-accent |
#1F4D3A |
Hunter Green · the data, the pivot, the δ (rule below) |
--ac-accent-alt |
#B45A3C |
rust · alternate accent (rarely used) |
#1F4D3A is scarce on purpose. It does exactly one job:
Green = the data, the pivot, the δ.
Every place you see green, something changed. A finding, an inflection, a result.
Do apply it to:
- ε in any equation (the standard the data sets)
- The inflection point in a chart or timeline
- The "result" column in any notebook layout
- The noun in body copy that names the finding
Don't apply it to:
- Eyebrows, page numbers, dividers, section tags (decoration)
- Headlines (they're claims, not findings)
- Generic emphasis on opinions
If a green element doesn't represent data, evidence, or a pivot, demote it to ink. The full ruleset lives on page 9 of the brand document.
| Family | Used for |
|---|---|
| IBM Plex Sans | Body copy, headlines |
| IBM Plex Mono | Monogram, equations, labels, eyebrows |
| IBM Plex Serif | (Reserved · long-form essays only) |
Plex is the only family. Sans for prose, Mono for everything mathematical or
structural. The full type scale is in tokens/typography.css.
| Mark | Component | SVG asset |
|---|---|---|
 Monogram (solid) |
<Monogram /> |
assets/monogram-solid.svg |
| Monogram (outline) | variant="outline" |
assets/monogram-outline.svg |
| Monogram (accent) | variant="accent" |
assets/monogram-accent.svg |
Wordmark · alan chester. |
<Wordmark /> |
assets/wordmark.svg |
Equation · ∀ ε > 0, ∃ δ > 0 |
<EpsilonDelta /> |
assets/epsilon-delta.svg |
| Temperament axes · five-axis calibration | (asset only) | assets/temperament-axes.svg |
The monogram is A · ε · C. The ε is set at exactly 50% of the cap-height of A and C, vertically centered. Don't redraw it; use the components or SVGs.
The temperament-axes mark visualizes the five-axis calibration introduced in
v2026.05.0 (docs/voice.md ## temperament): warmth, contrast,
edge softness, whitespace rhythm, voice cadence. Hunter green sits on the
position markers, never on the axes or labels. Asset only, no React wrapper.
.
├── tokens/ Design tokens (the foundation)
│ ├── colors.css CSS variables
│ ├── typography.css Type scale, families, tracking, leading
│ ├── colors.json Tokens as data (for tooling)
│ ├── tokens.json Everything as data (single source)
│ └── index.css One-file import
│
├── components/ React components (the runtime)
│ ├── Monogram.jsx The AεC mark
│ ├── Wordmark.jsx "alan chester."
│ ├── EpsilonDelta.jsx The signature equation
│ └── index.js Barrel export
│
├── assets/ Static exports (the universal fallback)
│ ├── monogram-solid.svg
│ ├── monogram-outline.svg
│ ├── monogram-accent.svg
│ ├── wordmark.svg
│ ├── epsilon-delta.svg
│ └── png/ Rasterized PNGs at common embed sizes
│ ├── monogram-{solid,outline,accent}-{256,512,800,1024}.png
│ ├── wordmark-{800,1600,3200}.png
│ └── epsilon-delta-{600,900,1200,2400}.png
│
├── docs/
│ └── brand-document.pdf The full 13-page brand document
│
└── examples/
└── index.html A living showcase (open in a browser)
Brand versions are dated: YYYY.MM.PATCH. The current version is
2026.06.0, June 2026, temperament-axes mark added (v1.1 alignment complete).
A bump to the minor (month) component means the system extended: new tokens, new components. A bump to patch means a fix: typo, color tweak, asset re-export. The major (year) changes when the core philosophy does, which should be never.
This is a personal brand. It's MIT-licensed because the code primitives
are useful. Feel free to study them, fork the structure, learn from the
patterns. The marks (AεC, the alan chester. wordmark, the equation
as identity) are mine. Please don't represent yourself with them.
If you spot a bug in the code (a token mismatch, a broken SVG, a typo), open a PR. The notebook is open.
MIT · © 2026 Alan Chester