0 / 0 pages shipped · hover a tile
Every page, designed then built
One Figma library and matching Webflow variables, so every new page starts on-brand.
/briefing
The objective
A portfolio for someone who builds interactive websites needed its own look: confident, a little playful, and clearly "space". Everything had to work as a tiny icon and as a giant headline.
A monogram where a ringed planet cuts through the A and the B, a token set (void, deep, panel, starlight, signal), square components with zero radius, and type roles for display, body and mono, all mapped to CMS-editable variables.
Mission parameters
/systems · 6 deployed
Systems deployed
Open a system to see what it does, why it matters and, in Engineer mode, how it works.
SYS-01
The planet monogram
Logo
What it does
An A and a B with a ringed planet cutting through them. The planet and its ring also form the A's right leg, so the letters and the planet read as one shape.
Why it matters
It says space and motion in two letters, without drawing a rocket.
Under the hood
Three solid shapes on one 490 × 242 artboard: the A's stroke, the planet with its ring, and the B. The gaps between them are real cuts, so it works as a single-color SVG. On the site it warps in as an outline, then fills, all in CSS.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
Square-first components
UI system
What it does
Every button and card has sharp corners. When you press a button, its shadow collapses like a key being pushed.
Why it matters
Sharp corners feel precise and technical, the opposite of soft template sites.
Under the hood
Radius token fixed at 0. Primary buttons carry a 4px offset shadow that collapses to 0 on press, with the label shifting 4px to match.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
SYS-01
Type in three roles
Typography
What it does
A wide, heavy font for big headlines, a clean one for reading, and a "computer" font for small labels.
Why it matters
Each job gets the right voice, and the page reads like a design tool.
Under the hood
Archivo Expanded 900 (display), Geist (body), JetBrains Mono (labels, coordinates, sizes). Mono is reserved for things a design tool would print.
Curious how it works?
Switch Crew level to Engineer for the technical breakdown.
/impact · 5 problems solved
Problems solved
What the site does for the people who run it and the people who visit it.
SOLVED-01For visitors
One mark from favicon to billboard
Before
A logo that only looks right large falls apart in a browser tab or a social avatar.
Now
The mark is three solid shapes with wide cuts between them, and the favicon sits on a dark Void tile so the planet cut stays visible.
Result
The brand stays recognizable in a browser tab and at wall size.
Under the hood
Thin knockouts are the first thing to close up when a logo shrinks, so the cuts around the planet are wide enough to survive at 32px. The favicon and webclip are exported on the site's #07080D background.
SOLVED-01For visitors
Visitors always know where to click
Before
When accents are used everywhere, nothing stands out as the next step.
Now
Orange is reserved for actions and highlights. The Figma-style selection UI gets its own blue.
Result
Every orange element is something you can do, so the path to contact is obvious.
Under the hood
Signal orange is a single token. Decorative states use separate tokens, so accent creep can't happen by accident.
SOLVED-01For visitors
Readable for everyone
Before
White text on the orange accent measured under 3 : 1 contrast, which is hard to read for many people.
Now
Text on the accent is always the near-black Void color.
Result
Buttons clear 7 : 1 contrast, well past accessibility guidelines.
Under the hood
Checked against WCAG 2.2 AA and AAA. The on-accent text color is a token, so every new button inherits it.
SOLVED-01For visitors
One system for every surface
Before
Without rules, every new page or asset would drift a little further from the brand.
Now
Six color tokens, one type scale and a construction grid define the whole identity.
Result
Each new page, card or deck looks like it belongs, without starting from scratch.
Under the hood
Tokens map one-to-one to Webflow variables, so a color change in one place updates the whole site.
/manifest · what shipped
Mission manifest
Everything this mission delivered, planned and mocked up first, then built from the ground up.
Mission · planet
Role
Designer
Platform · Year
CMS collections
0 collections
Mission type
0 disciplines
Drag the tags
Mission parameters
All met
Status
Live
Self-initiated identity
/telemetry
By the numbers
25
iterations created
128
oz of coffee along the way
hours of endless tweaking
∞
/stack · 0 tools
Tools in orbit
Every tool this mission ran on. Pull one out of orbit and let go; it finds its way back.
Hover a tool
Tools in orbit
/observatory · from this mission