Design System

Engineer Notebook

The single source of truth for the jayptl.me redesign: four type voices, one handwriting, a doodle-led surface with HUD accents, and two themes that never mix. Everything here is hand-written vanilla HTML/CSS/JS.

Type

Stack A, "Engineer Notebook" (dossier 04 §1A). Drafting-desk DNA across all four roles. Handwriting is never body text; mono carries every number.

Display, Space Grotesk

Every suit I've built.

Headings, section titles, case-study heroes. Weights 500/600/700; tight tracking at display sizes.

--font-display

Body, IBM Plex Sans

The short version: I build it, design it, plan it, film it, and make the launch trailer.

Open apertures hold up on translucent surfaces. 65ch cap; 16–18px floors.

--font-body

Hand, Architects Daughter

this is where the work happens

The one casual voice. Annotations only: captions, margin notes, sticker labels. Minimum 16px; dark theme uses near-black-teal ink for 4.5:1 over glass.

--font-hand · --ink-hand

HUD, IBM Plex Mono

SITE.STATUS: 30+ shipped · v2.0 · 1st

Numbers, micro-labels, FIG captions, readouts. Tabular figures on; uppercase labels track +0.12em+.

--font-mono · .hud-readout

Color law

Two committed ramps, one per theme, never mixed. Blue is light-only; turquoise is dark-only. No emoji, one accent per surface. Gradients stay inside the ramp, icon fills, ambient glows, progress fills, never gradient text, never competing hues.

Light theme, skeuomorphic blue ramp

100#bbdefb

200#90caf9

300#64b5f6

500#2196f3

600#1976d2

700#1565c0

Dark theme, turquoise glass ramp

400#26c9d8

500#00b8cc

600#009fb3

700#008190

ink#123b42

Working tokens

Doodle ink

Handwriting reads in neutral or dark-teal ink; lines use the accent at reduced alpha.

--doodle-line · --marker-band

HUD accents

Labels and readouts always resolve to the committed ramp (blue light / turquoise dark).

--hud-label · --hud-bracket

Paper grid

Optional flat ground, alpha baked to 8% max so it never fights text contrast.

--paper-grid-line · .paper-grid

Glow

Ambient radial only, one focal element per viewport.

--glow-focal

Doodle system

Hand-drawn marks annotate content, they never replace layout. Symbols live in assets/doodle-sprite.svg and are placed with <svg class="doodle"><use href="#d-…"/></svg>; strokes inherit currentColor.

Sprite vocabulary

d-arrow d-underline d-circle d-bracket-l d-bracket-r d-sparkle d-tape d-scissors d-asterisk

Highlighter band

A flat, hard-edged band reads as hand-annotated emphasis without a gradient, pair with the underline doodle under a heading:

Selected work

HUD accents

Instrument-panel grammar only where there is real data: micro-labels, tabular readouts, corner frames, FIG captions. Fake telemetry is banned, every readout traces to something true.

Micro-label

01 · About

Mono, uppercase, tracked. The dash is a pseudo-element.

.hud-label

Metric chips

30+products shipped

1stCHARUSAT FinTech

Tabular numerals via font-variant-numeric.

.metric

FIG captions

FIG 1, patient, partner, hero, and admin views

Spec-document grammar borrowed from engineering drawings.

.fig-caption

Corner frame

SYS.LOCK: ACQUIRED

Bracket-only border via CSS mask; scanlines stay panel-sized.

.corner-frame .scanlines

Stickers

Rotated chips with counter-rotated handwritten captions. Rotation is capped at ±12deg; on mobile they collapse into an inline strip. The homepage footer carries the Reset-stickers toy.

this is where the work happens

homelab hums, cloud bill doesn't

oh, I also train small language models

One sticker per row may carry a slow idle bob; the rest sit still. .sticker--idle gates on prefers-reduced-motion: no-preference.

Components

Buttons, cards, tag runs, and link rows inherit the existing system components and the new redesign layer. Tags and links use mono chips and dot-separated rows.

Buttons

.btn .btn-primary

Press / tap

Default tap flash is off globally; owned :active states carry feedback. Light presses into skeu inset, dark into glass inset, both scale to 0.97–0.98. Tap targets use manipulation for instant response.

--tap-highlight · --press-scale · :active

Tag run

Flutter ×3
Next.js 16
Bun + Hono

.tag-row

Links row

.links-row

Hand note

five lanes, one garage

.hand .hand--md

Motion law

Ambient idle loops only: one gentle loop per viewport, everything static by default under reduced motion. Nothing flashes faster than three times per second (WCAG 2.3.1).

Idle

Slow bob on a single sticker, a breathing corner-frame glow on one focal panel.

.sticker--idle · .corner-frame--focal

Reduced motion

Blanket duration collapse plus per-effect static fallbacks: doodles render fully drawn, sweeps freeze, type is never animated in.

@media (prefers-reduced-motion: reduce)

Retired

Gradient text washes, inset/neumorphism shadows, full-page CRT flicker, carousel auto-rotation, and emoji are not part of this system.

law: no gradient text · no emoji