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. Use a primary button only for the single most important action on a page, card, form, or control group. Everything else should use the secondary treatment unless it is destructive or confirming a completed action. Nest secondary actions use a heavier link treatment with trailing arrows.

Labels sit above fields. Switches use the same hard outline, visible state label, and mechanical track movement instead of 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. Do not place cards inside other cards; nested cards make hierarchy noisy and should be flattened into inline content, a rail, or a full-width section.

Writing Console

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

Markdown Blog

save file 02

The Nest

Family routines, meals, lists, calendars, points, and payout support.

Clear Table

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

4 pts

done today

Take Out Trash

Completed once, still available as a repeat quest.

2 pts do again

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.

Nest app pages use one shared hero: optional pixel art, a short kicker, one display title, one sentence of context, and a right rail for the primary action or compact status. Use the kicker only when it adds information the title does not already provide; skip it when it would repeat the headline.

Today's Chores

Use this header for Nest work surfaces so page identity, context, and the next action stay consistent.

Progress 3/5

Open Page

Admin-only meal totals use a dark arcade readout inside the existing Nest palette. The checkout estimate rounds each ingredient up to whole reference packages and shows the package math without replacing the proportional meal cost. On meal cards, place the HUD inside the standard disclosure box and leave it closed by default. On edit forms, add the saved ingredient contribution table between the totals and checkout estimate so every row reconciles to the whole-meal total.

Put the readiness rail beside each meal ingredient. State the outcome first, separate meal-entry problems from catalog problems, and name every missing field. Keep the status visible to everyone; only admins receive the catalog edit action.

Use five whole stars for a family member's own meal rating. Keep the family average and named breakdown grouped beneath the stars, inline within the meal card, so ratings stay distinct from weekly meal votes without nesting cards.

The Nest main navigation uses the same icon-over-label rhythm as the public site navigation. Keep labels centered below pixel icons so scan paths stay consistent across both areas.

Nest

Menu

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