polomodov.tech design system
The new brand is built around the terminal prompt: warm dark monochrome, one green signal accent, Space Grotesk for UI, and JetBrains Mono as the voice. The hand-drawn (excalidraw) style remains visualization-only.
Palettes & surfaces
The global site uses terminal ink tokens from src/index.css. Sketch visualizations still choose “paper” or “chalk” via data-sketch-theme on the wrapper.
--sketch-surface--sketch-surface-2--sketch-label-bg--sketch-ink--sketch-ink-soft--sketch-accent--sketch-accent-2--sketch-surface--sketch-surface-2--sketch-label-bg--sketch-ink--sketch-ink-soft--sketch-accent--sketch-accent-2Typography
The site chrome is Space Grotesk with Inter as Cyrillic fallback, plus JetBrains Mono for prompt, meta, tags, and terminal blocks. Prose stays at 16/18px, descriptions and navigation start at 14px, metadata at 12px, and captions at 14px. Caveat is for sketch surfaces only.
roughjs primitives
Deterministic hand-drawn geometry: the same seed → identical lines on every render, in PDF and in visual-smoke.
Frames & cards
HTML containers with a wobbly CSS-filter border — the stroke is hand-drawn, the content stays crisp.
Annotations
Underline, circle, box, strike, highlight — rough-notation style, drawn with roughjs.
underline · circle · box · strike · highlight
Slide visualizations
Available as variants through the single switch — decks opt in with no renderer edits.
Framework diagrams
The same diagram in clean and hand-drawn modes — one sketch prop.
1. Startup
Startup Coder
builds the first product
2. Growth
Engineering Manager
scales teams
3. Maturity
All-in-one CTO
tech · people · business
4. Complexity
CIO · CTO · VP Eng
the role splits
5. Decline
No new CTO role
four decline symptoms
Page primitives
src/components/ui: PageShell, BackLink, Eyebrow/PageTitle/Lede, MetaChip/TagChip, PillLink, TakeawaysBand, Card. Each freezes one class string; the designSystemFrozenStrings test rejects raw copies in pages.
A title in the editorial voice
A one-paragraph lede: Space Grotesk light, tight tracking only at display sizes, plain text below.
Primary and secondary actions share their shape, height, and typography. Fill and border indicate priority.
Three takeaways
- 01Tokens and decks were already a system; the layer between them and the pages was missing.
- 02Primitives add no CSS: they freeze utilities that are already emitted.
- 03The list of raw copies in the test only shrinks.
Margin notes (MarginNote)
The author’s informal aside in a longread’s right margin: an arrow marker sits in the text, the note renders in italics in a separate column with links to the Knizhny kub channel. Below the 2xl breakpoint the note collapses and the marker becomes a toggle. Authoring rules live in docs/design-system.md.
The longread column is max-w-5xl wide, and on wide screens a note column lives to its right. The marker goes at the end of the annotated sentence.01This is roughly how it looks: italics, muted color, an arrow tying it back to the marker, and a mono link at the bottom.Knizhny kub · channel (in Russian)
When it fits
- Diagrams, schemas, flows, annotations — where you “show”, not “read”.
- Prompt wordmark, mono tags, and terminal surfaces for branded site moments.
- Always inside a SketchSurface — palette and filters in scope.
- Stable seedId/seedKey so rendering is deterministic.
- role="img" + aria-label on every sketch SVG.
When not to
- Don't apply it to navigation, article text, the global background.
- Don't use green as decorative background — it is a signal, cursor, and one primary action.
- Don't set body text in handwriting — Caveat is for short labels only.
- Don't use Math.random for geometry — hashed seeds only.
- Don't add decorative backgrounds against the editorial style (AGENTS.md).