.t-display .t-h1 .t-h2 .t-h3 .t-lede .t-body .t-small .t-caption
Anatomy Apply one type class to a semantic heading or text element. Keep the HTML heading level independent from the visual class. Modifiers .t-display through .t-caption select scale and voice. States Responsive display sizing is token-driven. Accessibility Preserve a logical heading outline; visual size does not determine heading rank.
Copy markup
<h2 class="t-h1">A semantic heading</h2>
<p class="t-lede">A concise editorial introduction.</p>
.dropcap .pullquote .byline .figure .eyebrow-serif
Anatomy Use inside prose with a 60–65ch measure. Figure captions belong inside figure. Modifiers .eyebrow-serif is the editorial counterpart to product-oriented .eyebrow. States Figures and pull quotes avoid breaks in print. Accessibility Use blockquote for quotations and meaningful alt text for figure images.
Copy markup
<blockquote class="pullquote">Quiet interfaces leave room for the work.</blockquote>
.field .field-label .field-help .field-error .field-row
Anatomy Label, control, then helper or error text. .field-row aligns related controls without removing labels. Modifiers Helper and error copy are mutually contextual, not visual replacements for labels. States Normal, help, and invalid. Accessibility Connect help or error IDs from the control with aria-describedby.
JavaScript contract
Application validation only.
Copy markup
<div class="field">
<label class="field-label" for="reference-slug">Slug</label>
<input class="input is-error" id="reference-slug" name="slug" aria-invalid="true" aria-describedby="reference-slug-error">
<span class="field-error" id="reference-slug-error">Use letters, numbers, and hyphens.</span>
</div>
.checkbox .radio .switch
Anatomy Wrap a native input and visible text in the matching label class. Modifiers Checkbox for independent choices, radio for one-of-many, switch for immediate settings. States Checked, unchecked, focus-visible, and disabled native states. Accessibility Radio groups need a fieldset and legend. Do not use a switch for a submit-time preference.
JavaScript contract
None for native state; application behavior may respond to change.
Copy markup
<label class="checkbox"><input type="checkbox" name="updates"> Product updates</label>
.segmented .seg
Anatomy A .segmented group containing two to four buttons or .seg items. Modifiers Mark the selected option with aria-pressed=true or .is-active. States Selected, hover, and focus-visible. Accessibility Give the group an accessible label and expose selection with aria-pressed.
JavaScript contract
Application code updates the selected choice.
Copy markup
<div class="segmented" role="group" aria-label="Density">
<button class="seg" type="button" aria-pressed="true">Comfortable</button>
<button class="seg" type="button" aria-pressed="false">Compact</button>
</div>
.badge .badge-neutral .badge-accent .badge-success .badge-warning .badge-danger
Anatomy Short, non-interactive status text inside .badge. Modifiers Neutral, accent, success, warning, and danger. Accessibility Do not rely on hue alone; the label must name the status.
Copy markup
<span class="badge badge-success">Published</span>
.pill .sev .resolved
Anatomy Compact severity or resolution label. Modifiers .sev for severity and .resolved for completed findings. Accessibility Include meaningful status text; color is supplemental.
Copy markup
<span class="pill resolved">Resolved</span>
10 · Since 1.0.0
Card
#card
.card .card.is-link
Anatomy Paper surface containing an optional title and body. Modifiers .is-link adds a restrained hover affordance to a genuinely linked card. Accessibility If the whole card navigates, use one clear anchor rather than nested interactive elements.
Copy markup
<article class="card"><h3 class="t-h3">Release notes</h3><p class="t-small">What changed and why.</p></article>
.card-grid
Anatomy Responsive parent for sibling cards. Modifiers Override the minimum column size only when content requires it. States Auto-fills from one column upward. Accessibility DOM order remains reading order; do not rearrange items visually.
Copy markup
<div class="card-grid"><article class="card">First</article><article class="card">Second</article></div>
.stat-card .stat-label .stat-num .stat-delta
Anatomy Label, prominent value, and optional directional delta. Modifiers .is-primary changes the full border to accent; .up and .down color deltas. States Default and primary emphasis. Accessibility Write the direction in text or accessible copy; arrows and color are supplemental.
Copy markup
<article class="stat-card is-primary"><div class="stat-label">Adoption</div><div class="stat-num">68%</div><div class="stat-delta up">Up 12%</div></article>
.avatar
Anatomy Image or initials inside .avatar; groups overlap siblings. Modifiers No public size modifiers; override dimensions locally only when the surrounding pattern requires it. Accessibility Use meaningful alt text when the identity is not repeated nearby; otherwise use empty alt.
Copy markup
<span class="avatar" aria-label="Ada Lovelace">AL</span>
.chip-dot .dot .safe .medium .attention
Anatomy A visible dot plus a textual status label. Modifiers Safe, medium, and attention. Accessibility Keep the text label; the dot is intentionally not the sole signal.
Copy markup
<span class="chip-dot safe"><span class="dot" aria-hidden="true"></span>Healthy</span>
.timeline .tl-entry
Anatomy Ordered entries containing date, title, and optional description. Modifiers No public visual modifiers. States Chronological static content. Accessibility Use an ordered list when sequence matters and machine-readable time elements for dates.
Copy markup
<ol class="timeline"><li class="tl-entry"><time class="t-caption" datetime="2026-08-27">Aug 27</time><h3 class="t-h3">Release</h3></li></ol>
.tldr .tldr-label
Anatomy Dark summary panel with a label and concise content. States Print swaps the fill for an ink border. Accessibility Do not hide essential details exclusively in the summary.
Copy markup
<aside class="tldr"><div class="tldr-label">TL;DR</div><p>Three files install the complete CSS system.</p></aside>
.sec-head .idx .count
Anatomy Optional index, semantic h1 or h2, and optional count. Modifiers Use the index only when sequence carries meaning. States Responsive wrapping follows content. Accessibility Use the correct semantic heading rank; the class styles h1 and h2 equally.
Copy markup
<div class="sec-head"><span class="idx">02</span><h2>Components</h2><span class="count">34 families</span></div>
.breadcrumbs
Anatomy A labelled nav containing an ordered list of ancestors and current page. States Current page uses aria-current=page. Accessibility Set aria-label=Breadcrumb on nav and aria-current=page on the last item.
Copy markup
<nav class="breadcrumbs" aria-label="Breadcrumb"><ol><li><a href="/">Home</a></li><li aria-current="page">Components</li></ol></nav>
19 · Since 1.0.0
Tabs
#tabs
.tabs .tab [data-tabs]
Anatomy A labelled tablist of tabs plus one labelled panel per tab. Each tab's aria-controls points to its panel; each panel's aria-labelledby points back. Modifiers aria-selected=true marks the active tab. States Selected, hover, focus-visible, and hidden panels. Accessibility Use roving tabindex and ArrowLeft/ArrowRight/Home/End navigation. Do not use tabs when users need to compare panels simultaneously.
JavaScript contract
Load inkwell-interactions.js or reproduce the documented WAI-ARIA behavior.
Copy markup
<div class="tabs" role="tablist" aria-label="Account views" data-tabs>
<button class="tab" id="ref-tab-overview" role="tab" aria-selected="true" aria-controls="ref-panel-overview">Overview</button>
<button class="tab" id="ref-tab-activity" role="tab" aria-selected="false" aria-controls="ref-panel-activity" tabindex="-1">Activity</button>
</div>
<div id="ref-panel-overview" role="tabpanel" aria-labelledby="ref-tab-overview">Overview content</div>
<div id="ref-panel-activity" role="tabpanel" aria-labelledby="ref-tab-activity" hidden>Activity content</div>
.alert .alert-title .alert-body
Anatomy Optional title followed by concise guidance. Modifiers .is-info, .is-success, .is-warning, and .is-danger. States Persistent notice or dynamically announced alert. Accessibility Use role=alert only for important content inserted after load; static notices need no live role.
JavaScript contract
None unless the product inserts or dismisses the alert.
Copy markup
<div class="alert is-info"><div class="alert-title">Before you continue</div><p class="alert-body">Review the generated changes.</p></div>
.callout .callout-label .callout-body
Anatomy Label and emphasized editorial statement inside a ruled panel. Modifiers .is-accent for brand emphasis. Accessibility Use an aside when the callout is complementary; do not use visual treatment as heading semantics.
Copy markup
<aside class="callout is-accent"><div class="callout-label">Adoption note</div><p class="callout-body">Start with the canonical entry file.</p></aside>
.findings .finding .finding-num .finding-text .finding-src
Anatomy A list of numbered findings, each with statement and source. States Stacks on narrow screens. Accessibility Use an ordered list when numbering communicates order; source links need descriptive labels.
Copy markup
<ol class="findings"><li class="finding"><span class="finding-num">01</span><p class="finding-text">Reference pages reduce adoption uncertainty. <cite class="finding-src">Repository review</cite></p></li></ol>
.code-block
Anatomy Optional label and pre/code pair inside a framed block. States Scrolls internally when code is wider than its container. Accessibility Keep commands as selectable text and identify the language in nearby copy when relevant.
JavaScript contract
None; copy buttons are an application enhancement.
Copy markup
<div class="code-block"><pre><code><link rel="stylesheet" href="inkwell.css"></code></pre></div>
.dialog .dialog-head .dialog-body .dialog-foot .dialog-close [data-dialog-open] [data-dialog-close]
Anatomy Native dialog with head, labelled title, body, and action footer. A trigger's data-dialog-open value matches the dialog ID. Modifiers No public visual modifiers. States Closed, modal open, cancel, and return-focus. Accessibility Use native dialog.showModal(), aria-labelledby, an obvious close action, and restore focus to the trigger.
JavaScript contract
inkwell-interactions.js wires data-dialog-open and data-dialog-close; native Escape handles cancel.
Copy markup
<button class="btn btn-secondary" type="button" data-dialog-open="reference-dialog">Open dialog</button>
<dialog class="dialog" id="reference-dialog" aria-labelledby="reference-dialog-title">
<div class="dialog-head"><h2 id="reference-dialog-title">Confirm</h2><button class="dialog-close" type="button" aria-label="Close" data-dialog-close>×</button></div>
<div class="dialog-body">Continue with this change?</div>
<div class="dialog-foot"><button class="btn btn-secondary" type="button" data-dialog-close>Cancel</button></div>
</dialog>
.skeleton .skeleton.is-text .skeleton.is-title .skeleton.is-block .skeleton.is-circle
Anatomy Decorative blocks that approximate pending content. States Animated normally, static under reduced motion and print. Accessibility Hide decorative skeletons from assistive tech and mark the containing region aria-busy=true.
JavaScript contract
Application code removes the skeleton and clears aria-busy when content arrives.
Copy markup
<div aria-busy="true" aria-label="Loading profile"><div class="skeleton is-text" aria-hidden="true"></div></div>
.tbl .tbl-scroll
Anatomy Semantic table wrapped in .tbl-scroll when columns may exceed the viewport. States Container-level horizontal scroll on narrow screens. Accessibility Provide a caption, use th with scope, and keep page-level scrolling vertical.
Copy markup
<div class="tbl-scroll"><table class="tbl"><caption class="sr-only">Release status</caption><thead><tr><th scope="col">Version</th><th scope="col">Status</th></tr></thead><tbody><tr><td>3.5.0</td><td>Ready</td></tr></tbody></table></div>
.toc
Anatomy Labelled navigation list of in-page section links. Modifiers Optional .n number within each link. Accessibility Wrap in nav with an accessible label; target IDs must exist.
Copy markup
<nav class="toc" aria-label="On this page"><a href="#reference-install"><span class="n">01</span> Install</a></nav>
.empty-state .empty-state-icon
Anatomy Optional decorative icon, heading, explanation, and one next action. Accessibility Use a semantic heading and hide decorative icon glyphs with aria-hidden=true.
Copy markup
<section class="empty-state"><div class="empty-state-icon" aria-hidden="true">◎</div><h2>Nothing here yet</h2><p>Create the first item to get started.</p><button class="btn btn-primary" type="button">Create item</button></section>
.disclosure
Anatomy Native details.disclosure containing summary followed by content. Modifiers The native open attribute controls expanded state. States Collapsed, expanded, hover, and focus-visible. Accessibility Keep summary concise and unique; native details exposes expanded state and keyboard behavior.
Copy markup
<details class="disclosure"><summary>Does this need JavaScript?</summary><p>No. The native details element owns the behavior.</p></details>
.carousel .carousel-track .carousel-slide .carousel-controls .carousel-btn .carousel-dot [data-carousel]
Anatomy Named carousel region, focusable snap track, labelled slides, and initially hidden controls. Modifiers No autoplay or visual variants. States Current slide, first/last disabled controls, swipe, keyboard, and reduced motion. Accessibility Name the region and each slide, keep the track keyboard-scrollable, and never autoplay.
JavaScript contract
inkwell-interactions.js reveals controls, creates labelled dots, and handles arrows/Home/End. Swipe and scroll work without it.
Copy markup
<section class="carousel" data-carousel aria-roledescription="carousel" aria-label="Release tour">
<div class="carousel-track" tabindex="0">
<article class="carousel-slide" role="group" aria-roledescription="slide" aria-label="1 of 2">First slide</article>
<article class="carousel-slide" role="group" aria-roledescription="slide" aria-label="2 of 2">Second slide</article>
</div>
<div class="carousel-controls" hidden><button class="carousel-btn" type="button" data-carousel-prev aria-label="Previous slide">←</button><div class="carousel-dots"></div><button class="carousel-btn" type="button" data-carousel-next aria-label="Next slide">→</button></div>
</section>
.navbar .navbar-inner .brand
Anatomy Sticky navbar, constrained inner row, brand link, and navigation. Modifiers Optional .dot inside the brand. States Sticky position and link hover/focus. Accessibility Label multiple nav landmarks and mark the current page with aria-current=page.
Copy markup
<header class="navbar"><div class="navbar-inner"><a class="brand" href="/"><span class="dot" aria-hidden="true"></span>Inkwell</a><nav aria-label="Primary"><a href="/docs.html">Docs</a></nav></div></header>
.wrap .wrap-narrow .wrap-wide
Anatomy A max-width container with responsive horizontal page padding. Modifiers Narrow, default, and wide content measures. States Fluid until each maximum width. Accessibility Layout classes do not replace semantic landmarks.
Copy markup
<main class="wrap"><h1 class="t-display">Page title</h1></main>
.sr-only .skip-link
Anatomy .sr-only preserves accessible text visually; .skip-link becomes visible on focus. States Skip link hidden until focus-visible. Accessibility Every page should place the skip link first in body and target its main landmark.
Copy markup
<a class="skip-link" href="#main-content">Skip to content</a>
<main id="main-content">…</main>
.kbd
Anatomy Use the semantic kbd element for a single key or chord. Modifiers .kbd is available when semantic kbd is not applicable. Accessibility Write the shortcut in surrounding text and use platform-appropriate key names.
Copy markup
<p>Press <kbd>⌘</kbd> <kbd>K</kbd> to search.</p>