01 - DESIGN SYSTEM

Styleguide

Every primitive rendered in both worlds. Terminal world is raw inference output; rendered world is the shipped portfolio. Amber is the only brand accent; green appears exclusively as ok ticks. Reviewed against CLAUDE.md §2.

Tokens

Colors

--ink #0B0F14 page background - deep ink, not pure black
--panel #111820 cards, rendered-world panels
--line #1E2830 hairline borders
--text #E6EDF3 primary text (~15:1 on ink)
--dim #7D8590 timestamps, captions (~5.2:1 on ink)
--amber #FFB454 THE accent (~10.9:1 on ink)
--ok #3FB950 success ticks only (~7.6:1 on ink)
--key #79C0FF JSON keys / inline identifiers
--err #F85149 404 page + error easter eggs only

Typography

IBM Plex Sans — rendered world

heading / 64 The quick brown model streams a response.

heading / 40 The quick brown model streams a response.

heading / 28 The quick brown model streams a response.

heading / 20 The quick brown model streams a response.

body / 16 The quick brown model streams a response.

sans 400 Plex Sans weight 400

sans 700 Plex Sans weight 700

IBM Plex Mono — terminal world

mono 400 Plex Mono weight 400

mono 500 Plex Mono weight 500

World A

Terminal world

Raw inference logs — timestamps, progress, ok ticks, command input, status bar.

LogLine

00:00:00.142 system_prompt: loaded ok

00:00:00.318 foundation_model: weights mapped ok

00:00:00.511 skills_frameworks: adapters registered

00:00:00.884 eval: 1 assertion failed (non-fatal)

ProgressBar

100%

64%

12%

Command input

> goto projects

JSON trace

{ "query": "best work", "top_k": 3, "status": "open to work" }

StatusBar (fixed to viewport bottom on live pages)

inference v1.0 · uptime 00:41 · latency 12ms · status: open to work

World B

Rendered world

The quiet shipped site — eyebrow, headline, caption, buttons, links.

Eyebrow + SectionShell + caption

06 · KNOWLEDGE BASE

Featured Projects

> A knowledge base stores practical evidence that can be retrieved and applied.

[view trace]

{
  "query": "best work",
  "top_k": 4,
  "retrieved": [
    "bahasabot",
    "usm-evently",
    "my-bibi",
    "grab-realtime"
  ]
}

Body copy sits in the section shell at a comfortable measure. This is where each section's real content lives once the boot sequence dissolves into the portfolio.

Buttons

view work external link

Text links

An inline internal link and an external link both read as amber within body copy without shouting.

Accessibility

Focus styles

Tab through these — every focusable element shows the amber :focus-visible ring. The skip link (top-left) appears on first Tab.

focusable button focusable link