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. 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.
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).