phase 1 · design system lab

/ branding

Scratch page for locking the visual language before we build real screens. Iterate here until it feels right — nothing downstream ships until this page ships.

Palette

Neutral ramp is locked (dark-only). Pick one accent — it becomes the signature hue used for active nav, focus rings, link underlines, and one "wow moment" on the home page.

neutral ramp

bg
card
muted
border
input
ring
fg-muted
fg

brand accent · locked

alternates considered: wisteria · hush · moondust · thistle

Pearl

oklch(0.83 0.10 305)

Cool blue-lilac pastel. Used for the signature dot in the logo, active nav state, hero accents, focus rings, and any "wow moment" highlights. Not a UI color — this is a brand color.

sample link
selected · tag · highlight
tokens: --brand, --brand-muted, --brand-strong, --brand-foreground

Typography

Sora (display) · DM Sans (body/UI) · Space Mono (code, labels, metadata).

display · sora

Joshua

Building things

Section heading

Card heading

body · dm sans

Lead paragraph — the confident intro sentence on a project page or writeup.

Body copy. DM Sans has a nice round shape that reads well at smaller sizes, great for long writeups and explanation-heavy project pages.

Secondary text — smaller notes, card descriptions, captions.

Muted fine print.

mono · space mono

metadata label

2026-04-16 · feat · portfolio scaffold

export async function load() {
  const posts = await source.listPosts();
  return { posts };
}

Components

Applied shadcn-svelte primitives — these will evolve once the accent is locked.

buttons

badges

default secondary outline destructive tag · mono
Project card preview

How a project tile might read at a glance.

Short tagline describing the project. Tags live underneath in mono.

svelte cloudflare

input / alert

tabs

All projects filter active.

prose sample (writeup body · every element)

Writing about the things I build

Lead paragraph. This is the opening of a writeup — slightly larger, used to set the stakes for whatever we're about to explore.

Body paragraph. Bold text emphasizes a term, italic offers a lighter stress, and links look like this. You'll see inline.code() used constantly in writeups — function names, flags, paths. Strikethrough exists too.

A second-level heading

Writeups lean on a strict heading hierarchy: H1 once, H2 for main sections, H3 for steps or sub-sections, H4 only if things get deep.

A third-level heading

Short intro under the sub-section. Then we usually get into a list, a code block, or a table.

An H4 (used sparingly)

Rare, but styled so nested sub-points stay legible.

"The best code is the code you don't have to write."
— every automation obsessed dev, ever.

Unordered list with a nested child:

  • First bullet
  • Second bullet with a nested list
    • Nested item one
    • Nested item with inline.code
  • Third bullet

Ordered list:

  1. Scaffold the thing
  2. Ship the boring parts first
  3. Revisit when you have data

Code blocks

Fenced code block, syntax highlighting comes later (Shiki + github-dark in Phase 2):

export async function load({ platform }) {
  const source = createContentSource(platform);
  const posts = await source.listPosts({ limit: 5 });
  return { posts };
}

You can also press Ctrl + K to open the search palette (once we add one).

Tables

DomainStartedStack
Minecraft plugins2014Java, Kotlin
Web / SaaS2019TS, SvelteKit
AI / RAG2023Python, TS, Claude

Motion

Subtle by default. We add expressive moments sparingly.

fade-up · 400ms

For content on enter

stagger · +120ms

For list children

fade · 600ms delayed

For secondary content

hover-lift

Cards rise 4px

underline-sweep

Nav-style links

icon-shift

Read writeup

Hero taglines

Three directions rendered at real hero scale. Pick one (or riff).

option a · plain · direct · Dawson-ish

Full stack dev with a bias for automation.

Shipping products end-to-end across web, infra, and whatever else the problem needs.

option b · declarative · story-led

I build tools that run themselves.

From Minecraft plugins in 2014 to LLM pipelines in 2026 — same instinct, new stack.

option c · philosophy · punchy · locked

Make the software do the boring parts.

Automation, web, infra, RE. Full-stack by necessity, pragmatic by default.

Radii & shadows

Current defaults — worth A/B'ing sharper vs softer once accent is locked.

radii

sm
md
lg
xl

shadows

shadow-sm

shadow-md

shadow-xl