The visual guide.

Charcoal and bone carry the page. Blue identifies a link, mint marks something ready to try, and orange marks work in progress. The same roles carry through light and dark appearances.

Bright pops belong in small marks, status dots and image details. Text uses a darker or lighter companion shade. The light-theme mint and orange text shades are tuned for readable contrast on bone.

Literata carries page and project headings. Fira Sans carries descriptions, small section labels, navigation and actions. Keep those two voices consistent; monospace is reserved for actual code in this guide.

Keep paragraphs comfortably narrow. Long titles wrap; descriptions remain complete. Use sentence case for reading text and reserve capitals for compact labels.

Every project uses the same action hierarchy. A solid button opens the project; quieter controls let someone watch or look around first.

Primary

Ink fill, paper text. Use a concrete verb: Play, Open or Try. Keep one principal action per project.

Video

Link colour in a text row; a labelled Watch action beside the launch button. Keep it outside the image so it cannot obscure the work.

Gallery

A View gallery text link beneath the caption, plus an expand control at the image corner. Keep browsing distinct from launching the project.

Keyboard focus

A visible outline with room around it. Every link and control works with a keyboard; hover adds emphasis without moving the layout.

Available projects form one continuous collection. Each has the same title, description, action and media rhythm. Keep a compact directory above them, alongside the page title on wide screens. Group readiness with project metadata; keep launch and watch actions together. Work in progress uses the same language at a quieter scale.

02Miniature racingPlayable beta

Tiny Stunts

Race, tune, and build your own tracks.

Play beta ↗▶ Watch gameplay

Specimen:ImageVideo

On the working collection, all ready projects remain visible. Edge arrows change images in place. Expand opens the same image in the full gallery. Films start only when requested and pause when someone navigates to another section. Image frames use the source proportions; 16:9 is the fallback because it is the most common shape in this collection.

Framing

Keep the subject visible. Use each original image’s proportions and contain the whole image. Do not crop artwork, product identity or interface details to force a shared shape. Video follows its actual metadata.

Media stage

A steady dark surface supports images and video in both themes. Keep captions outside the image. Integrated media controls stay at the edges and preserve the subject.

Honest previews

Name artwork, screenshots and video accurately. Label concepts as planned and date historical development captures. A real Play or Visit link distinguishes available work from Coming soon.

Shared links

The 1200 × 630 sharing image uses the same bone paper, type and four ready projects. Its compact image tiles contain the complete originals. The page and gallery retain each source’s own proportions.

Use a small spacing scale. Keep related details close, leave more room between entries, and let a fine rule separate sections.

Motion acknowledges an action and then settles. Keep feedback quick, avoid continuous decoration, and honour the system’s reduced-motion preference.

Quick feedback

for colour and emphasis.

Short movement

with a gentle ease. The specimen uses the shared motion token.

Reduced motion

Remove movement and smooth scrolling. A clear state change still explains what happened.