Agentic Documentation System

Sora SemiBold · 36 px

Website page titles.

Sora SemiBold · 28 px

Work row and card titles.

Sora SemiBold · 28 px

Home section headings: Work, Writing.

Sora SemiBold · 18 px

Name in the header.

Satoshi Regular · 28 px

Home intro paragraph.

Satoshi Medium · 22 px

Writing list titles..

Satoshi Regular · 18 px

Body, lead, nav, links.

Satoshi Regular · 18 px

Years, dates, captions, usually fg/subtle, tabular numbers..

Satoshi Bold · 18 px

Small-caps label tier..

OOUX sticker. Style=Tint (default): soft colour fill, no label, for dense boards such as object matrices where colour carries the meaning. Style=Card: white card with a small type label, for stickers that stand alone or in a legend. Type: Object blue, Core content yellow, Metadata red, CTA green, AI purple, Label (quiet text), Row number (dark marker). Text: Name. Never recolour a sticker by hand: pick the Type. Do: Use Style=Tint in dense boards such as object matrices: colour carries the meaning. Don’t: Do not put type labels on every cell of a dense board.

Top of every board: eyebrow (project · section), number, title (Heading) and one sentence of context. Do: Start every board with one header: eyebrow (project · section), number, title, one sentence of context. Don’t: Do not stack two headers on one board; split the board instead.

Column header: a tone label (Before grey, Now green, Next blue), title and subtitle. Do: One Version per column; tone Before (grey), Now (green), Next (blue). Don’t: Do not compare more than four columns on one board.

One answer in a comparison grid, same Tone as its column. Before = muted grey, Now = white card, Next = white card with the accent outline (proposed). Do: Answer the row's question in one or two plain sentences. Don’t: Do not mix tones within a column.

One-sentence conclusion at the bottom of a board. Do: Close the board with one sentence that says what the comparison means. Don’t: Do not repeat the rows; say the conclusion.

Document building block. Block = variant; edit text through its text properties (Text, List items, Step title, …). Tables: pick table - N col, then set the exposed rows' Column 1–N. Do: Build documents from blocks and edit text through their properties. Don’t: Do not detach a block to change its text.

Data row with up to six columns; text properties Column 1–6. Use inside a Block table variant (2–6 col) or stack rows in an auto-layout frame. Do: Colour a cell only when it carries OOUX meaning (object, core content, metadata, CTA). Don’t: Do not use colour as decoration in tables.

Cover for a project, test project or hiring assignment document. Do: Open hiring assignments, test projects and case files with a cover and status. Don’t: Do not use the cover inside boards.

Website diagram card (736 px column scale). Type carries the meaning: Object (object models), Step / Start / View / System / AI/Decision / Done / Error (flows). Highlight = the key item. Set width per diagram; height hugs. Never detach; never hand-paint.

Header: name left, links right (Work, Writing, Skills, About). Active link fg/default, others fg/muted.

Home intro: one paragraph, first sentence in fg/default, the rest fg/muted, max 58rem (928 px).

Section start: hairline above, heading left, optional link right ("All writing →").

Selected work: image left (3:2, radius 12, bg/subtle behind), text right: year, title, one line, accent link. Two equal columns, gap 48.

Writing list item: title (22 px medium, hover accent) and date (fg/subtle).

Tag: pill on bg/subtle, 18 px fg/muted.

Outcome number: value (Sora 28), what it means (fg/muted), source (fg/subtle).

Case-study decision: title, then labelled paragraphs (What I chose, What it cost, What it changed). Column 45rem.

Footer: hairline, email left (selectable), LinkedIn and GitHub right, 18 px fg/muted.