--type-title-xl

Title Extra Large

--type-title-l

Title Large

--type-title-m

Title Medium

--type-title-s

Title Small

--type-title-xs

Title Extra Small

--type-nameplate

Nameplate

--type-text-m

Paragraph text uses IBM Plex Sans at 14px with 185% line-height. This is the default body copy style—secondary color, regular weight.

Bold text renders in semibold weight with primary color. This demonstrates the inline emphasis treatment.

--type-text-l

Body text L uses IBM Plex Sans at 17px with 170% line-height. Used for article prose and long-form reading.

Dazzed SemiBold for titles and hierarchy. IBM Plex Sans for body, labels, and metadata. Title scales go from hero down to xs. Text scales go from l down to s.

Base colors

--color-lightest

--bg-elevated

--color-superpastel-light

--text-primary --bg-default --bg-lens

--color-light

--bg-sunken --border-shy

--color-medium-light

--color-base

--color-medium-dark

--color-dark

--bg-elevated --border-shy

--color-superpastel-dark

--bg-default --bg-lens --text-primary

--color-darkest

--bg-sunken

Opacity colors

--color-white-opacity-high

--text-secondary

--color-white-opacity-mid

--text-shy --border-strong --button-secondary-hover

--color-white-opacity-low

--border-default --button-secondary-idle

--color-black-opacity-high

--text-secondary

--color-black-opacity-mid

--text-shy --border-strong --button-secondary-hover

--color-black-opacity-low

--border-default --button-secondary-idle

Emphasis color

--color-emphasis

--color-emphasis-opacity-high

--color-emphasis-opacity-mid

--color-emphasis-opacity-low

--bg-lens

Base palette defined in oklab. Semantic aliases map each base colour to surface, text, and border roles. Toggle the theme switch in the dock to compare.

width

color

Horizontal rules and borders. Used for section dividers, card outlines, and structural separation between content blocks.

--line-width 0.5px

--line-width-thick 1.5px

--radius-xs 3px Pills, tags, code blocks, form inputs, small interactive elements.

--radius-sm 6px Cards, playground containers, search inputs, figure corners. The default container radius.

--radius-md 12px Dock navigation, kanban items, sitemap cards. Larger containers.

--radius-lg 44px Reserved. Large soft-edged panels or dialogs. Currently unused.

--radius-infinite 1000px Full pill shape. Buttons, CTAs, theme switcher track. Forces a capsule regardless of size.

Durations

instant: 0.1s
fast: 0.2s
moderate: 0.4s
slow: 0.65s
deliberate: 1s

Easings

linear: (0,0,1,1)
soft: (.4,.3,.6,.8)
ease-out: (.2,.5,.5,1)
ease-in: (.5,0,.8,.5)
ease-in-out: (.5,.2,.5,.8)
bounce: (.34,1.4,.6,1)

Distances

subtle: 20px
default: 80px
dramatic: 160px

Applied to scroll reveals, page transitions, and interactive state changes. Combine a duration, an easing, and a distance token for consistent animation.

type

speed

easing

distance

Button

variant

inverted

size

iconLeft

iconRight

state

Three importance tiers: primary (high), accent (purple emphasis, mid), low (compact, icon-led). Toggle inverted to flip primary/low to dark backgrounds (no-op on accent). Optional iconLeft / iconRight from the system icon set. For inline text links inside prose, use cp-link.

Button Link

Link Label

Inline text navigation within prose or standalone. Underline visible by default, disappears on hover. No background treatment—relies on colour and underline alone.

Switch size

Generic boolean toggle for any on/off setting. Two sizes—regular and small.

Theme Switcher size

Specialised toggle that switches between light and dark theme. All instances sync state automatically across the page.

options

Single select

States

Single-select option groups for filtering or configuration. Active state uses emphasis background. Used in playground controls and navigation filters.

label

Section separators in post layouts. Optional label provides context for the content that follows. Use sparingly—headings usually provide enough structure.

subtitle

intro

Post title

Post Subtitle

The intro paragraph lives in the default slot. It supports rich content and multiple paragraphs of introductory text for a project post.

Opening block of every project or article. Establishes the title hierarchy with optional subtitle and introductory paragraph.

Section Title

Paragraph text below the section title. This demonstrates how running text pairs with headings inside the narrow reading column.

Running prose within post sections. Pairs a heading with body paragraphs inside the reading column.

Role: Value placeholder
Focus: Value placeholder
Collaboration: Value placeholder
Team: Value placeholder
Period: Value placeholder

Structured metadata grid at the top of project posts. Displays role, focus area, collaboration model, team size, and timeline.

caption

Placeholder image — Caption goes here (optional)

Image container with optional caption. Responds to layout position tokens—full, centre, left, right—within post canvases.

mode

intensity

size

320

CSS-only device frame for mobile screenshots. Scales proportionally via the --phone-w custom property. No images—pure CSS.

Breakpoint

Caption

Items

Position

Item 1

Item 2

1200px

Canvas composition system for arranging figures and text blocks. Supports multiple breakpoint-aware grid positions and 1- or 2-item configurations.

layout

image

subtitle

cta

Title of this card goes here

Subtitle goes here and continues continues like so.

See project

Content container for project and article listings. Four layout variants—inline, inline reversed, stacked, and no-image wide.