Living Style Guide
The System
Every token and component the site is built from, rendered from the real source — so this page can't drift. Flip the theme in the header to check both. Interactive states are live: hover to Lift, click to Press, trigger the stamped states.
Tokens
Swatches are painted from var(--token); hexes are read live from the page, so they always reflect the current theme.
Paper
………Ink
………Red
……Candy
………………Plate
…………On-color
……Motion
- Lift — Hover on any elevated element — rises 2px, shadow grows 6→8px.
- Press — Buttons on :active — stamp down onto the paper, shadow collapses.
- Stamp — Instant swap to a solid candy color, no fade — copied/success states.
- Roll — Split-flap vertical rotation — the hero title rotator (TitleRotator).
- Slide — Constant-speed horizontal loop, pauses on hover — reserved for ticker-style strips.
- Reveal — Entrance translateY 12px + fade, once as a section scrolls in; the SectionHeading bar draws left→right on land. Static under reduced motion.
Roll and Slide are shown live under Home & Portfolio. Reveal is live too — each section on this page rises + fades in once as you scroll, its heading bar drawing left→right; the Pinwheel tick (click the site mark, top-left) and the TOC bar-redraw round out the set. All collapse to static under reduced motion.
Foundation
The atoms — button, swatch strip, section heading, pinwheel, theme toggle.
Button — variants & states
Hover = Lift, active = Press, focus-visible = 2px red outline. Renders as <a> with href, else <button>.
SwatchStrip
The eight-color palette strip — zigzag stamp diamonds, the frozen silhouette.
SectionHeading & PinwheelMark & ThemeToggle
A Heading
The red-underlined section title, the site mark (ticks 90° on click), and the theme toggle (also in the header).
Home & Portfolio
The hero, the static skills line, and the work ledger rows.
TitleRotator (Roll)
I'm a Software EngineerFrontend EngineerAI Engineer
Split-flap vertical rotation through the hero titles; collapses to the first title under reduced motion.
SkillsLine
TypeScript · Vue · React · Node.js · Python
A single quiet, static line of the core stack under the home hero CTA — no motion, no box.
SkillMatrix
The tools grouped by domain (AI / Frontend / Backend / Infra) — organised, not ranked. Used on /about under "Tools I've worked with".
WorkList / WorkRow
Andela — AI Engineer. Multi-agent workflows and RAG.
X-HR Labs — Founding engineer. Zero to MVP.
Work
Project cards, filters, the case-study kit, and the outcome scoreboard.
FilterTags
Domain filter chips above the work grid; the active chip is a red plate, filtering is ~10 lines of client JS.
ProjectCard (candy domain chip, striped placeholder cover)
LedgerList ("Also shipped")
Case-study kit
Case Study · 01 · Acme Labs
A sample case study
Placeholder lede showing the case-study header in the style guide.
A sample pull quote — the blockquote's louder sibling for self-quotes.
Gallery (2-up ink-framed figures) needs real image assets — documented, shown live on a case study once covers land.
About
Portrait, the Now block, the path timeline, misc cards, contact panel.
Portrait (striped placeholder + stamp)
Photo in the ink frame + hard shadow with the red zigzag corner stamp; striped placeholder until a real photo is supplied.
NowBlock (from now.json)
The "what's true right now" ledger — candy-diamond label rows over prose, with the mono last-updated stamp. Content lives in one data file.
Timeline
- 2025 —AndelaAI Engineer
- 2018 — 20Design yearsGraphic → product → engineering
The path ledger — red mono year ranges, bold entity, muted role; newest first with the design years anchoring the bottom.
MiscCard
Mostly psychology and history.
FIFA on PS5, basically my only game.
Still a designer at heart.
Quieter bordered cards (no shadow) with a candy label chip — the personality tier.
ContactBlock
Centered bordered + shadowed panel: display SAY HELLO., mono subline, primary Email + ghost social buttons.
Blog Structure
Post cards, series banner/nav/tag, and the parts tracker.
PostCard — standalone & series variants
What happens when you type ls
A walk down the stack from keypress to pixels.
Series · 3 partsBuilding agents that ship
A sample series card with its parts tracker.
SeriesTag & PartsTracker
SeriesBanner
SeriesNav
Bottom prev/next cards — mono red direction line + title; the upcoming side renders non-clickable.
PostList (the Index feed)
The blog index feed: standalone posts as numbered rows, series as a grouped part tree. Same entries the Index rail consumes.
FormattedDate
Published
A machine-readable <time> rendering a date in the mono meta voice — used in post cards and article headers.
Prose
The article chrome and the in-language prose elements. The black plate, callouts, figures and tables are generated from Markdown by the rehype/remark plugins — see any blog post for the living example (not duplicated here).
ArticleHeader
A sample article
The lede that sits under the title.
TOC
The article table of contents — anchors to real heading ids, highlighting the section in view.
ArticleFooter (Share popover)
The printed fin mark + a Share popover — Copy link (Stamps to green COPIED, instant, no fade), Share on X, Share on LinkedIn. Subscribe is parked until there's a reader base.
Utilities
Skip link, the 404 stamp, and the share/subscribe controls.
SkipLink
The first focusable element on every page — Tab from the top of the document (or focus below) to reveal the red plate top-left. It's live on this page.
404 stamp treatment
The poster 404: giant display numeral with the red NOT-FOUND stamp (the fifth frozen stamp site).
The Twin
The chat surface — status diamond, numbered ledger messages, the write head, citation chips, error cards, and the composer.
Static samples — the live chat island (the site's one Vue island) loads on/twin only, so the style guide stays framework-free.
Status diamond
Green steady when idle; red, step-pulsing (Stamp motion, not a fade) while thinking or writing. Mirrored in the topbar from the chat island.
Numbered ledger message
My rule: the prompt is policy, the tool is physics. Tools return facts, never advice, and every result must be verifiable by a cheaper second call.
Both roles share a mono label row. Visitor: plain paper, 4px ink left rule. Twin: raised paper card, ink border, hard shadow. The red stamp-diamond is the streaming write head; citation chips and ghost actions follow a finished answer.
Error card
Callout DNA — yellow bar, mono label chip. Errors are messages in the thread, not toasts.
Social cards
Every post and top-level page emits a generated 1200×630 OG card in the poster language (paper, Inter Black title, red mark) — built from the tokens, not hand-designed. This page's card: