components

Component library

Everything on this site is built from these pieces. Atoms combine into molecules, molecules into organisms, and organisms fill the page templates. Switch themes up top and watch all of them change.

Foundations

tokens.*.css

Design tokens

Components never touch a raw color. A theme sets base tokens, semantic tokens give them roles, and component tokens tune each part. Change one value at the bottom and it flows all the way up.

base --color-primary set by the theme
semantic --primary what it means
component --btn-primary-bg where it goes

base --color-base-000 set by the theme
semantic --surface-sunken what it means
component --tag-bg where it goes
Tag

global.css

Cascade layers

Styles stack in three layers, so a component can always restyle the atoms inside it with a plain class.

@layer basereset + utilities
@layer uiatoms + molecules
(unlayered)components + pages, unlayered, so they always win

Atoms

The smallest pieces. Each one does one job and reads only tokens.

ui/Button.astro

Button

Links and actions. Its surface comes from the controls tokens, so one theme setting makes every button flat, beveled or round.

Props

Prop	Type	Default
`variant?`default (outlined), primary (filled), portal (glowing accent, for the loft), danger (destructive)	`'default' \| 'primary' \| 'portal' \| 'danger'`	`'default'`
`size?`md for page CTAs, sm for dense tool UIs, icon for a single glyph	`'md' \| 'sm' \| 'icon'`	`'md'`
`block?`fill the container's width	`boolean`	`–`
`icon?`a pixelarticons name, drawn before the label	`string`	`–`

Plus every native <button> / <a> attribute.

Tokens it reads

component

--fs-* --sp-* --ctl-border --ctl-radius --btn-bg --btn-fg --ctl-shadow --ctl-lift-hover --ctl-shadow-hover --btn-hover-border --btn-hover-fg --ctl-press --ctl-shadow-active --btn-primary-bg --btn-primary-fg --btn-primary-hover-bg

semantic

--font-pixel --error --accent --foreground --secondary

Usage

<Button variant="primary" icon="mail" href="#contact">email me</Button>
<Button size="sm" block data-save>save</Button>

ui/Tag.astro

Tag

Small labels in a sunken well: the tech on a card, or a count.

React 19 WebRTC Rust 25 8

Props

Prop	Type	Default
`variant?`	`'label' \| 'count'`	`'label'`
`hot?`	`boolean`	`–`

Plus every native <span> attribute.

Tokens it reads

component

--sink-border --sink-radius --tag-fg --tag-bg --sink-shadow --fs-* --sp-*

semantic

--font-pixel --warning --on-warning

Usage

<Tag>WebRTC</Tag>
<Tag variant="count" hot>8</Tag>

ui/Badge.astro

Badge

A status in a solid color, with that color's own readable text on top.

Shipped Failed In review Live

Props

Prop	Type	Default
`tone`	`'success' \| 'error' \| 'warning' \| 'info'`	`–`

Plus every native <span> attribute.

Tokens it reads

component

--fs-* --sp-* --sink-radius

semantic

--font-pixel --success --on-success --error --on-error --warning --on-warning --info --on-info

Usage

<Badge tone="success">shipped</Badge>

ui/Chip.astro

Chip

A word in a sunken well, bigger and plainer than a tag. Removable ones get an ×.

TypeScript WebRTC AT Protocol atproto webrtc

Props

Prop	Type	Default
`removable?`	`boolean`	`–`

Plus every native <span> attribute.

Tokens it reads

component

--fs-* --sp-* --sink-border --sink-radius --sink-shadow --tag-bg

semantic

--foreground-dim --surface-sunken --font-pixel --foreground --foreground-faint

Usage

<Chip>TypeScript</Chip>
<Chip removable>atproto</Chip>

ui/Field.astro

Field

A text input with a glyph inside its edge. An error turns the border red.

Props

Prop	Type	Default
`icon`	`string`	`–`
`type?`	`'text' \| 'search' \| 'password' \| 'email' \| 'url'`	`'text'`
`placeholder?`	`string`	`–`
`name?`	`string`	`–`
`inputDir?`	`'ltr' \| 'rtl' \| 'auto'`	`–`
`error?`	`boolean`	`–`

Plus every native <label> attribute.

Tokens it reads

component

--sp-* --fs-* --sink-border --sink-shadow --sink-radius

semantic

--foreground-faint --foreground --surface-sunken --primary --error

Usage

<Field icon="@" placeholder="handle.bsky.social" />
<Field icon="⚿" type="password" error />

ui/Switch.astro

Switch

An on/off toggle built on a real checkbox, so keyboards and forms just work.

ScanlinesFilm grain

Props

Prop	Type	Default
`label?`	`string`	`–`

Plus every native <input> attribute.

Tokens it reads

component

--sp-* --fs-* --ctl-radius

semantic

--foreground-dim --surface-sunken --border-strong --foreground-faint --primary --on-accent --foreground

Usage

<Switch label="Scanlines" data-fx="--fx-scanline" />

ui/Segmented.astro

Segmented

A few options where only one can be on. The chosen one rises out of the well.

Props

Prop	Type	Default
`options`	`Option[]`	`–`
`label`	`string`	`–`

Plus every native <div> attribute.

Built from

Badge

Tokens it reads

component

--sink-border --ctl-radius --fs-* --sp-*

semantic

--surface-sunken --foreground-faint --surface --foreground --shadow-color

Usage

<Segmented label="Billing" options={[
  { label: 'Monthly' },
  { label: 'Yearly', pressed: true, badge: { text: '-20%', tone: 'warning' } },
]} />

ui/Eyebrow.astro

Eyebrow

The small // label above a section heading.

selected work

Props

No props of its own.

Tokens it reads

component

--fs-* --sp-*

semantic

--font-pixel --primary --foreground-faint

Usage

<Eyebrow>selected work</Eyebrow>

Molecules

Atoms put together into a shape: a window bar, a raised surface.

ui/TitleBar.astro

TitleBar

The strip across the top of a window: dots, a title, and a slot at the far end. AIM turns it into the classic blue gradient.

protoimsg.app 2025

now_playing.mod

// atproto · live ● online

Props

Prop	Type	Default
`size?`md on cards, sm on dense tool windows and dialogs	`'md' \| 'sm'`	`'md'`
`dots?`	`boolean`	`–`

Plus every native <div> attribute.

Tokens it reads

component

--sp-* --titlebar-bg --fs-* --titlebar-fg --ctl-radius --titlebar-accent

semantic

--border --font-pixel --foreground-faint

from the parent

--ac

Usage

<TitleBar dots>
  protoimsg.app
  <span slot="end">2025</span>
</TitleBar>

ui/Panel.astro

Panel

The raised surface every card and window sits on. Raised for things you act on, flat for supporting content, lift for links.

raised

flat

lift · hover me

window.txt

Panel + TitleBar

Props

Prop	Type	Default
`as?`	`'div' \| 'article' \| 'section' \| 'aside'`	`'div'`
`elevation?`	`'raised' \| 'flat'`	`'raised'`
`lift?`	`boolean`	`–`

Plus every native <div> attribute.

Tokens it reads

component

--card-bg --raise-border --raise-radius --raise-pad --raise-shadow --raise-shadow-static --lift-hover --raise-shadow-hover --card-border-hover

Usage

<Panel as="article" lift>
  <TitleBar dots>window.txt</TitleBar>
  …
</Panel>

Organisms

Whole, recognizable parts of the site, built from molecules and atoms.

ProjectCard.astro

ProjectCard

A Panel with a TitleBar, a blurb, Tags and links. The whole card clicks through to its first link.

protoimsg.app 2025

protoIM

Founder & Lead Engineer · 2025–present

proto Instant Messenger — open-source, cross-platform video chat on the AT Protocol: free, no-account-wall calls, positioned against FaceTime’s lock-in. An 8-package TypeScript monorepo (~65K LOC) shipping one real-time platform across web (React 19), desktop (Tauri v2 / Rust) and mobile (Expo). Hand-rolled WebRTC signaling with time-limited TURN creds on self-hosted coturn, LiveKit SFU for group calls, custom app.protoimsg.chat.* Lexicons, a Jetstream indexer, and 5 Fly.io services — including a self-hosted PDS and NLLB-200 live translation across ~17 locales.

React 19 WebRTC Tauri v2 Rust Expo LiveKit PDS Fly.io

→ Visit site → GitHub

Props

Prop	Type	Default
`project`	`Project`	`–`

Built from

Tag Panel TitleBar

Tokens it reads

component

--sp-* --fs-*

semantic

--primary --font-body --font-display --font-pixel --foreground-faint --foreground-dim --foreground

Usage

{featured(m).map((project) => <ProjectCard project={project} />)}

MiniCard.astro

MiniCard

A flat Panel for the smaller projects.

nosky

Creator & Lead Engineer · 2026

ATProto social client (Expo/RN) that bypasses the centralized AppView — fans out directly to followed PDS servers with client-side merge/sort, on the Microcosm stack (Slingshot, Constellation, Spacedust).

Props

Prop	Type	Default
`project`	`MiniProject`	`–`

Built from

Panel

Tokens it reads

component

--sp-* --fs-*

semantic

--font-display --info --font-pixel --foreground-faint --foreground-dim --warning

Usage

<MiniCard project={project} />

ArcadeCabinet.astro

ArcadeCabinet

A Panel dressed up as an arcade machine, with a playable or a locked screen.

FAST HOPPER

BEST 0

HOPPER

Designer & Engineer · live now

A vertical platform-climber — leap up an endless ladder of platforms and chase the high score. Runs on a deterministic sim so every run is verifiable. Global leaderboards by difficulty (fast / faster), and your bests are written straight to your ATProto repo as actor.rpg.stats records.

TypeScript Canvas Deterministic Sim ATProto Records Leaderboards

▶ Play now

Props

Prop	Type	Default
`game`	`Game`	`–`

Built from

Tag Panel

Tokens it reads

component

--cabinet-from --cabinet-to --sink-shadow --screen-star --screen-bg --fs-* --screen-shadow --platform-from --platform-to --platform-edge --platform-hi --player-glow --sp-* --locked-from --locked-to

semantic

--primary --border --scanline-color-screen --font-pixel --foreground --foreground-dim --font-display --foreground-faint

Usage

<ArcadeCabinet game={game} />

AtStatusCard.astro

AtStatusCard

My live Bluesky status, read from my AT Protocol repo when the page loads.

Props

No props of its own.

Built from

Panel TitleBar

Tokens it reads

component

--fs-* --titlebar-accent --sp-* --sink-radius

semantic

--success --primary --surface-sunken --shadow-color-soft --font-display --foreground --info --border --font-pixel --foreground-faint

Usage

<AtStatusCard />

FeedbackForm.astro

FeedbackForm

A Button that opens a drawer: a TitleBar over a form, and a sheet you can swipe away on phones.

Props

No props of its own.

Built from

Button TitleBar

Tokens it reads

component

--sp-* --fs-* --sink-border --sink-shadow --sink-radius

semantic

--foreground --surface-sunken --foreground-faint --primary --foreground-dim --success --error

Usage

<FeedbackForm />

Templates

The frames that pages pour their content into.

Section.astro

Section

Every section of the home page: an Eyebrow, a heading, then whatever goes inside.

selected work

Projects.

This box is a Section.

Props

Prop	Type	Default
`id?`	`string`	`–`
`eyebrow?`	`string`	`–`
`title?`	`string`	`–`

Built from

Eyebrow

Tokens it reads

None of its own. Its atoms bring theirs.

Usage

<Section id="work" eyebrow="selected work" title="Things I've built">
  …
</Section>