31 Components · 6 Groups

Components

Every component ships a prop table generated from its declarations and a usage example from its prompt file, so the reference cannot drift from the code.

01 content 4 components

The document-body kit: code, callouts, tables and pull quotes for posts and docs.

Margin-Note Aside - ※ / Bracket Glyphs, Tone-Colored
Syntax Highlighting (Dracula), Filename Bar, Copy Button, Zero-Padded Gutter
Display-Type Quotation, 2px Amber Rule
Hairline Data Table, Optional Index Column

02 core 10 components

Buttons, chips, cards and navigation — the primitives most pages are built from.

Status Readout in Bracket Notation
Identity Mark - Amber Brackets, Paper Letters, Tracked Wordmark
Navigation Trail Joined by →
Spec-Sheet Button - Uppercase Tracked Label, Square Corners
Panel Primitive - Optional Registration Marks
Inline Link - Amber, Hairline Underline
Zero-Padded Rail, Amber Current Page, Arrow Nav
Scrollspy Rail - Zero-Padded Index, Active Section In Amber
View Switcher - Amber Underline on Active Tab
Metadata Chip - Tech, Topics, Years

03 feedback 2 components

Loading and status signals — shimmer skeletons and the live instrument dot, driven by the motion utilities.

Shimmer Loading Placeholder - Text And Block Bars
Live Status Indicator - Square Instrument Dot, Tracked Label

04 forms 7 components

Inputs and their chrome. Labels, hints and errors are wired to the control for assistive tech.

Boolean - Square Box, Amber Check
Row Wrapper - Micro-Label, Control, Hint / Error
Single-Line Text Field with Label / Hint / Error
Exclusive One-of-Many, Round Amber Dot
Single Choice from a Short Static List
Binary Toggle - Mechanical Slide, Amber When On
Multi-Line Input

05 furniture 6 components

The micrographic page furniture — rulers, spec labels, dotted leaders. This is the brand’s texture, not filler.

Dotted-Leader Label → Value Rows
Numbered, Captioned Block Like a Paper Figure
Instrument Readout Bar with Tick Overlay
Edge Ruler - 8px Minor, 40px Major Ticks
Section-Start Block - Index, Name, Meta, Title
Uppercase Tracked Micro-Label for Metadata

06 overlay 2 components

Layered surfaces over the page — modal dialogs, edge sheets and tooltips, on a warm-black scrim.

Modal Dialog And Edge Sheet - Focus-Trapped, Scrim, Square Panel
Hairline Tooltip - Expands Dense Labels On Hover And Focus