Johan Alphonso Braga
WorkProjectsReadingStackCraftDesignStatusResume

Utilities

Ask anything

Elsewhere

GitHub

Design system

45 tokens

The tokens this site is actually built from, read out of the stylesheet at build time.

Nothing here is transcribed. The page parses site/assets/style.css during the build, so a token that is renamed or removed changes this sheet in the same pass. The specimens are live elements, not screenshots: resize the window and the type scale moves, because every step is a clamp rather than a fixed size.

Type scale

A perfect fourth at the top of the viewport range easing to a minor third at the bottom, so the headline cannot bully the rest of the page on a phone.

Aa I make projects
--step--2 --t-micro clamp(0.69rem, 0.67rem + 0.11vw, 0.75rem)
Aa I make projects
--step--1 --t-small clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem)
Aa I make projects
--step-0 --t-body clamp(1.00rem, 0.95rem + 0.24vw, 1.13rem)
Aa I make projects
--step-1 clamp(1.20rem, 1.11rem + 0.43vw, 1.44rem)
Aa I make projects
--step-2 --t-item clamp(1.44rem, 1.30rem + 0.71vw, 1.84rem)
Aa I make projects
--step-3 clamp(1.73rem, 1.50rem + 1.13vw, 2.36rem)
Aa I make projects
--step-4 --t-sec clamp(2.07rem, 1.72rem + 1.76vw, 3.05rem)
Aa I make projects
--step-5 clamp(2.49rem, 1.95rem + 2.68vw, 3.98rem)
Aa I make projects
--step-6 clamp(2.99rem, 2.18rem + 4.02vw, 5.23rem)
Aa I make projects
--step-7 --t-hero clamp(3.58rem, 2.37rem + 6.05vw, 6.95rem)

Colour

Each token in light and dark. Both themes are audited against WCAG AA on every build by npm run contrast.

--bg #0b0a12same
--bg-2 #121020same
--bg-3 #1a172bsame
--text #f3eff8same
--muted #b2abc4same
--faint #8f88a6same
--line #221e33same
--line-firm #352f4bsame
--accent #ff9ec6same
--accent-bg #2a1424same
--edge rgb(255 220 240 / .07)same

Components

Button

Secondary Primary

Chip

Case study Live

Eyebrow

04   STACK

Lede

Only things I have actually shipped with.

Row

2026

A project

One sentence a recruiter can skim.

WebGPU

Stat

81projects shipped
52live in the browser

Everything else

The edge highlight. A single hairline of light along the top of a raised surface is what stops a dark card reading as a hole cut in the page.

--sans "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
--mono "JetBrains Mono", ui-monospace, "Cascadia Mono", Menlo, monospace

Display is the same family, distinguished by weight and tracking rather than by a second typeface.

--display var(--sans)
--pad clamp(1.15rem, 4.5vw, 4rem)
--maxw 1180px
--readw 68ch
--radius 10px
--radius-sm 6px
--ease cubic-bezier(0.2, 0.8, 0.2, 1)

The header's own height, named once so anything that has to clear it (the sticky rail, scroll-margin on anchor targets) stays correct if it ever changes.

--hdr-h 3.4rem

Named roles, so components ask for meaning rather than a number.

--t-hero var(--step-7)
--t-sec var(--step-4)
--t-item var(--step-2)
--t-body var(--step-0)
--t-small var(--step--1)
--t-micro var(--step--2)

Line heights tighten as type grows, which is how it stays readable at both ends instead of loose at the top and cramped at the bottom.

--lh-display 0.98
--lh-heading 1.12
--lh-body 1.62
--lh-tight 1.3

Tracking follows size in the opposite direction. A grotesque set this large needs more negative tracking than a serif did.

--tr-display -0.042em
--tr-heading -0.024em
--tr-body -0.006em
--tr-caps 0.16em