Design System

Work in progress. I'm adding components as I go, following patterns from what's already documented. Nothing here is set in stone yet.

Atoms

Small, single-purpose elements. Some are structural (Button), others are chromatic (Tag) and pick up the accent color from their context.

Button

Atom

Chromatic button — inherits --accent-color from its container. Renders as <a> when href is set, <button> otherwise.

Variants

<Button variant="solid | surface | ghost | tint">...</Button>

As Link

Solid Link Surface Link Ghost Link Tint Link

<Button href="#" variant="tint">...</Button>

Small

<Button size="small">...</Button>

With Icon

Raw SVG string rendered before text

Solid Tint Small

<Button icon={githubSvg}>...</Button>

States

<Button state="loading | success">...</Button>

Chromatic

All variants adapt to --accent-color

Props

Prop	Type	Default	Description
`variant`	`"solid" \| "surface" \| "ghost" \| "tint"`	`"solid"`	Visual style variant
`size`	`"default" \| "small"`	`"default"`	Compact 28px variant
`state`	`"idle" \| "loading" \| "success"`	`"idle"`	Button state for form feedback
`href`	`string`	—	When set, renders as <a> instead of <button>
`external`	`boolean`	—	Opens in new tab with noreferrer/nofollow
`icon`	`string`	—	Raw SVG string rendered before text
`...attrs`	`ComponentProps<"button">`	—	All native button attributes (disabled, type, etc.)

Link

Atom

Inherits --accent-color from its section context, falling back to --light-color. External links are auto-detected from the URL and get an icon + target="_blank".

Default

Internal link External (auto-detected)

<Link href="/articles" text="Internal link" />

With Arrow

ArrowLink — directional arrow that animates on hover

Read article Articles

<ArrowLink href="/articles" text="Read article" direction="back | forward" />

Back

BackLink — shorthand for ArrowLink direction=back

Articles

<BackLink href="/articles" text="Articles" />

External

ExternalLink — always opens in new tab with icon

View on GitHub

<ExternalLink href="https://github.com" text="View on GitHub" />

Props

Prop	Type	Default	Description
`href`	string	required	URL
`text`	string	required	Link text
`external`	boolean	auto	Force external link behavior
`small`	boolean	`false`	Smaller font size
`class`	string	—	Additional CSS class

IconButton

Atom

Default Color

<IconButton label="Menu"><BurgerIcon /></IconButton>

Primary Color

<IconButton label="Contact" color="primary">...</IconButton>

As Link

<IconButton label="Contact" href="#contact"
      color="primary">...</IconButton>

When href is provided, renders as <a> instead of <button>.

With Open State

Add .open class to trigger BurgerIcon animation.

Props

Prop	Type	Default	Description
`label`	string	required	Accessible aria-label
`id`	string	-	Optional ID for JavaScript targeting
`href`	string	-	If provided, renders as <a> instead of <button>
`variant`	"default" \| "floating"	"default"	Floating adds fixed position and shadow
`color`	"default" \| "primary"	"default"	Color scheme
`class`	string	-	Additional CSS classes

Dropdown

Atom

Generic dropdown with trigger slot, click-outside close, and chevron indicator. Content is fully custom via children.

Preview

<Dropdown trigger={() => <span>Label</span>}>
  <button class={dropdownStyles.option}>Option</button>
</Dropdown>

Props

Prop	Type	Description
`trigger`	`(open: Accessor<boolean>) => JSX.Element`	Render function for the trigger content
`children`	`JSX.Element`	Dropdown panel content
`class`	`string`	Additional class on the wrapper

Exported styles

Class	Usage
`dropdownStyles.option`	Standard option button
`dropdownStyles.optionActive`	Active/selected option

NavCard

Atom

Link card with title and optional subtitle. Used for navigation grids.

Preview

Foundations 5 components Atoms 6 components Cards

<NavCard href="/path" title="Section" subtitle="5 components" />

Props

Prop	Type	Default	Description
`href`	string	required	Link destination
`title`	string	required	Card title
`subtitle`	string	-	Secondary text below title
`class`	string	-	Additional CSS class

Tag

Atom

Passive metadata label. No hover state, no interactivity — just shows what something is. Picks up --accent-color from its section for the tint and left border.

Variants

Default

Highlight

Outline

Badge

Small

Default

Highlight

Outline

Badge

size="small"

With Icon

Terminal

icon={terminalSvg}

Chromatic

Default

Highlight

Outline

Badge

Props

Prop	Type	Default	Description
`title`	string	required	The text content of the tag
`size`	`"default" \| "small"`	`"default"`	Compact variant
`icon`	string	-	SVG icon as raw string
`highlight`	boolean	false	Adds accent border
`outline`	boolean	false	Transparent background with accent border
`badge`	boolean	false	Solid accent background, black text
`animated`	boolean	false	Starts hidden for reveal animation

Responsive

Property	Desktop	≤900px	≤600px
`font-size`	14px	~13px	12px
`padding`	8px 18px	6px 12px	4px 10px
`icon`	16px	16px	12px

TagRow

Atom

Flex row for Tag components. Uses margin-top: auto to push down and padding-top for minimum spacing.

Preview

React

TypeScript

Next.js

<TagRow><Tag title="React" /><Tag title="TypeScript" /></TagRow>

Fluid spacing

Property	Value	Min	Max
gap	clamp(6px, 0.32rem + 0.21vw, 8px)	6px	8px
padding-top	clamp(18px, 0.59rem + 1.89vw, 36px)	18px	36px