Portfolio system · v2.0.0

Style guide

The visual grammar this project actually uses. Games get their own identity; projects prioritise context; the workspace prioritises comparison and traceability.

01 · Principles
01Editorial before ornamental
02Games have worlds; projects have context
03Colour communicates identity or state
04The workspace is a tool
02 · Semantic colour

Components consume intent, not raw values. Each project can change identity without breaking the contract.

Background--background
Surface--surface
Raised surface--surface-2
Primary action--primary
Secondary text--muted-foreground
Destructive--destructive
03 · Typography
Cairo · Display

Systems with a point of view.

IBM Plex Serif · Text

Body copy explains process, consequence and limitation at a calm reading pace.

IBM Plex Mono · Code

v0.2.0 · active · source_path

04 · Game identity

Vector illustrations represent mechanics and are labelled as illustrations. Real gameplay captures can replace them when available.

Mechanic illustration
Drop's Journey
Mechanic illustration
Overworld Freight
Mechanic illustration
Shepherd's Symphony
Mechanic illustration
Battle Tetris
05 · Vocabulary and states
surface-panel + kicker

A surface with a purpose

Border and elevation structure content; they do not imitate physical material.

activev2.0.0foundation
06 · Usage rules

Public

Reading, context and short lines. Every project gets its own narrative.

Games

Per-project atmosphere without sacrificing navigation, contrast or structure.

Workspace

More density, explicit relationships, with origin and version always visible.