Retro Design System

Departure Mono carries the game layer: headings, counters, labels, badges, and compact UI. Body copy can stay plain and readable, but anything structural should feel like a cartridge label.

The palette starts with ink and warm paper, then uses blue, yellow, green, pink, cyan, and red as explicit game states. Each color should have a job: action, reward, info, danger, or highlight.

Use a 4px grid. Dense UI lives between 8px and 24px; page rhythm gets 32px, 48px, or 64px. Hard shadows count as visual space, so leave room for them.

Edges are square. Default objects use a 4px black border and hard offset shadow. Smaller controls may use 2px borders, but soft shadows stay out of the arcade layer.

Motion should feel mechanical: press, blink, scan, fill. Keep it short and deterministic, and disable ambient motion when reduced motion is requested.

Prefer existing pixel-adjacent assets over generic outline icons. Sprites can label a route, reward a completed action, or make a card feel like a save file.

blog

projects

reward

speed

social

Buttons are physical controls. Primary actions use yellow, confirmation uses green, destructive actions use red, and secondary actions stay white.

Labels sit above fields. Focus uses a strong outline and a small shadow shift, never a soft glow.

Inline links keep the text flow simple. Chips are compact filters, tags, or state labels.

Browse the writing console, open projects, or check a quest board.

Admin surfaces use dense rows with heavy dividers, compact actions, and enough whitespace to scan without losing the arcade feel.

Lists should read like quest objectives: short labels, visible completion, and no decorative clutter.

Meters show score, allowance progress, craft, or completion. Use blocky fills and visible labels.

Cards are save files, blog cartridges, or quests. Panels hold grouped controls and should not nest.

Writing Console

Notes on software, teams, and shipping with a little arcade texture.

Markdown Blog

save file 02

Chore Quest

Recurring work, points, completed runs, and payout support.

Clear Table

Reset the surface, collect the score, and move to the next quest.

4 pts

Feedback should be loud enough to notice and small enough to keep working. Use color by state, not decoration.

Ship the smallest useful version, then improve the controls.

Done. Quest completed and points saved. x

Blocked. Add an image before publishing this card. x

Use a boot log when the system is fetching unknown work. Use an empty panel when the next action is clear.

[ok] connect database

[ok] fetch projects

[..] render cards

No projects yet

Create one save file to unlock the cabinet.

Use short, concrete product language with game flavor only where it clarifies the workflow. Avoid turning routine UI into a joke.