Brand assets
Logo, color, type, components, and motion — documented from the live system, free to download.
Logo
Three lockups (M mark, mim, moreismore wordmark) shown across four ink treatments (black, white, black-and-grey, white-and-grey) plus a full-color pair for the wordmark. Maintain a clear space of at least half the logo height on all sides. Minimum reproduction size: 24 px tall for the wordmark, 16 px tall for the M mark.
moreismore wordmark
Full color (wordmark only)
Color
Token-derived swatches for all 13 color values. Click any swatch to copy its hex. Text-safe pairs — which tokens clear WCAG AA on the dark surfaces — are measured in the contrast note below the swatches.
Brand
Neutral & surface
Accent only
Text legibility (WCAG AA on the dark surfaces)
Measured contrast ratios for each foreground token against the two background surfaces. AA requires ≥ 4.5:1.
| Token | on --ink-0 | AA | on --ink-100 | AA |
|---|---|---|---|---|
| --mim-magenta | 5.51:1 | ✓ AA | 5.40:1 | ✓ AA |
| --mim-green | 14.61:1 | ✓ AA | 14.32:1 | ✓ AA |
| --mim-cream | 14.63:1 | ✓ AA | 14.34:1 | ✓ AA |
| --mim-cream-2 | 13.27:1 | ✓ AA | 13.00:1 | ✓ AA |
| --mim-blue | 3.12:1 | ✗ — | 3.06:1 | ✗ — |
| --mim-blue-text | 5.86:1 | ✓ AA | 5.74:1 | ✓ AA |
| --sig-blue | 4.60:1 | ✓ AA | 4.51:1 | ✓ AA |
| --ink-900 | 16.65:1 | ✓ AA | 16.31:1 | ✓ AA |
| --ink-700 | 6.00:1 | ✓ AA | 5.88:1 | ✓ AA |
| --ink-600 | 4.84:1 | ✓ AA | 4.75:1 | ✓ AA |
| --paper-0 | 17.57:1 | ✓ AA | 17.22:1 | ✓ AA |
Typography
Two typefaces power the identity: PP Telegraf for all primary display and body text, and the PxPlus IBM VGA pixel face as the terminal/accent voice. The scale below shows every --t-* token at its live size.
AaBbCcDd 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
PP Telegraf — primary. Licensed from Pangram Pangram (display only; not redistributable).
Pangram Pangram ↗AaBbCcDd 0123456789
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
PxPlus IBM VGA — pixel/terminal accent face.
PxPlus IBM VGA by VileR (int10h.org), CC BY-SA 4.0. Download: coming later.
Engineering Joy
Engineering Joy
Engineering Joy
Engineering Joy
Engineering Joy
Engineering Joy
Engineering Joy
Engineering Joy
Engineering Joy
Engineering Joy
Engineering Joy
Engineering Joy
Engineering Joy
Engineering Joy
Engineering Joy
Components
How We Solve
- 40M+
- points
- 5
- studios
Motion
The animated logo. Use it for intros and loaders; keep it short.
Voice & tone
"Engineering Joy." We are precise about craft and unpretentious about it.
- Do lead with the technical truth, then the human payoff.
- Do use terminal/system microcopy as accent, not noise.
- Don't overclaim or use hollow agency-speak.
Design tokens
The exact CSS custom properties the site runs on.
Copy the tokens, or grab tokens.json.
| Role | Aliases | Value |
|---|---|---|
| --surface | --ink-0 | #0b0b0d |
| --surface-raised | --ink-100 | #0e0e11 |
| --line | --ink-line | #232327 |
| --ink | --ink-900 | #ececec |
| --ink-dim | --ink-700 | #8e8e8e |
| --ink-muted | --ink-600 | #7e7e7e |
| --on-accent | --surface | #0b0b0d |
| --surface-light | --paper-0 | #f2f2f2 |
| --on-light | --ink-0 | #0b0b0d |
| --accent | --mim-magenta | #ff199e |
:root {
--mim-magenta: #ff199e;
--mim-green: #00ff7d;
--mim-cream: #eadfa9;
--mim-cream-2: #e3d58d;
--mim-blue: #115dbe;
--mim-blue-text: #3b8fe6;
--sig-blue: #2c71ff;
--ink-900: #ececec;
--ink-700: #8e8e8e;
--ink-600: #7e7e7e;
--ink-line: #232327;
--ink-100: #0e0e11;
--ink-0: #0b0b0d;
--paper-0: #f2f2f2;
--surface: var(--ink-0);
--surface-raised: var(--ink-100);
--line: var(--ink-line);
--ink: var(--ink-900);
--ink-dim: var(--ink-700);
--ink-muted: var(--ink-600);
--on-accent: var(--surface);
--surface-light: var(--paper-0);
--on-light: var(--ink-0);
--accent: var(--mim-magenta);
--track-eyebrow: .16em;
--track-tight: -.02em;
--radius: 2px;
--radius-sm: 2px;
--measure-text: 760px;
--measure-wide: 1100px;
--container: 1240px;
--measure-title: 20ch;
--measure-dek: 46ch;
--gutter: 24px;
--gutter-sm: 20px;
--gutter-lg: 40px;
--shadow-text: 0 2px 40px rgba(0,0,0,.6);
--shadow-text-soft: 0 2px 24px rgba(0,0,0,.6);
--ease: cubic-bezier(.2,.7,.2,1);
--dur-fast: .15s;
--dur-med: .25s;
--dur-rise: 1s;
--t-eyebrow: 0.75rem;
--t-body: clamp(1rem, 0.95rem + 0.4vw, 1.1875rem);
--t-h3: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem);
--t-h2: clamp(1.75rem, 1.2rem + 2.5vw, 3.25rem);
--t-h1: clamp(2.5rem, 1.4rem + 5.2vw, 5.75rem);
--t-stat: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
--t-micro: 0.6875rem;
--t-label-sm: 0.8125rem;
--t-body-sm: 0.9375rem;
--t-h4: 1.0625rem;
--t-display: clamp(2rem, 1.1rem + 4vw, 4.75rem);
--t-h3-prose: clamp(1.375rem, 0.95rem + 1.9vw, 2.375rem);
--t-lead: clamp(1rem, 0.92rem + 0.95vw, 1.3125rem);
--t-brief: clamp(1.125rem, 0.82rem + 1.4vw, 1.625rem);
--t-cta: clamp(1.125rem, 0.86rem + 1.3vw, 1.75rem);
}