07 · Library

Components

Every element the system calls for, rendered live on the page. Open the source to copy the markup, there’s no framework to install.

Text links

Primary actions read as underlined text, not floating pills. Default uses a quiet divider underline; prominent uses a darker underline. Both keep the arrow movement to a two-pixel nudge. Filled controls are reserved for forms where the action must be unmistakable.

Default Prominent

Hover either link to see the underline and arrow respond .text-action · .text-action-default / .text-action-prominent

<!-- Usage -->
<a href="#" class="text-action text-action-prominent">
  Read
  <svg class="arrow-icon" viewBox="0 0 16 16" fill="none">
    <path d="M4 12L12 4M12 4H5M12 4V11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
  </svg>
</a>

Use .form-action only for compact form controls such as

Cards

A 1px divider border, 8px corners, and generous padding. Cards rely on type and spacing alone, without decorative rules, color blocks, lift, or glow.

Editorial card

Use a clear title and a short description when the card opens a story, note, or case study.

Standard card

The default. Reach for this first and let the heading, copy, and whitespace do the work.

Hover either card to see the border darken .card

Section labels

Small General Sans, medium weight, sentence case, subtle positive tracking, in --text-faint. Use one when it adds hierarchy; it sits above the heading, never beside it.

Foundations

Example heading

Label above the heading, only when it adds useful context .section-label

Graphite rule

A 40 × 3px graphite rule may separate an interior page title from its supporting copy. Use it once in a page opening, never as a repeated underline or hero background treatment.

Interior page title

One restrained rule in an interior page opening .accent-line

Blinking cursor

A 3px graphite cursor may finish a short, type-led AI statement. Treat it as a rare ambient detail, not a default hero device, and always respect reduced-motion settings.

I build with AI

Rare, restrained, and disabled for reduced motion .cursor