Primary link
Every census-shipped component, generated from the catalog registry and rendered with the framework's default tokens (framework components only; site-level styles are not reflected).
Buttons
Quiet small link
Button element (no href)
Cards
Title, body, meta
Card Title
Card body copy for the catalog.
Featured card — shadow-1 elevation with eyebrow, title, body, and CTA slots (Story 33.1.1)
FeaturedFull catalog
The featured item
The weighted card carries the page's one featured thing: an eyebrow or badge row, a title, body copy, and a call to action. Only this modifier is elevated; the base card stays flat.
Forms
Labeled text input with hint
As it appears on the record.
Invalid input with error text
Enter an email address that includes an @ sign.
Select
Textarea
Radio group in a fieldset
Checkbox
Disabled input
Split hero
Content left, media right; single column below md (resize to see the stack)
Compose the page from framework vocabulary.
Display type, a dek, and one call to action on the left; a photo or geometric slot on the right.
See the catalogWith the optional aside slot — under the copy from md, after the media below it
Title with a featured aside.
The aside is a third slot: a card, a finder, or a note that belongs with the copy on wide screens and follows the media on narrow ones.
Featured item
A card placed in the aside: under the hero copy on desktop, under the media on mobile.
Bands (section rhythm + tint)
Plain band → tint band → plain band: the rhythm sum (--space-7 below md, --space-8 from md) and the surface alternation
First band
A band is a full-width page section; its content sits in a container. Each band pads half the section gap, so adjacent bands' content sits one rhythm step apart.
Tint band
The tint modifier paints the elevated surface against the page canvas — alternate plain and tint bands down a page.
Third band
Back on the page canvas.
Hero band: extra bottom pad so hero → content is --space-8 at every width
A hero band (the split hero lives here on a real page).
The first content band sits one hero step below.
Photo treatment
Wide frame (16:9) — radius, object-fit cover, no filter; shown on a geometric placeholder
On a site the same classes go on the image element with lazy loading and async decoding as attributes: <img class="media-photo media-photo--wide" src="…" alt="…" width="…" height="…" loading="lazy" decoding="async">.
Portrait frame (4:5) — the hero slot's shape
Portrait frames pair with the split hero's media slot.
Trust strip
Four headed claims — one column per item from md, stacked with dividers below it (role=list keeps list semantics under list-style: none)
Reviewed by people who know the material
A named reviewer, not a claim alone.
No third-party trackers
None on any page.
Coverage you can check
Every entry carries its source.
Nothing stored on your device
No cookies; nothing kept.
Inside a tint band — the board's placement under the hero
First claim
Support line.
Second claim
Support line.
Third claim
Support line.
Step cards
Three numbered steps — 3-up from md, stacked below it; an ordered list carries the numbering, the label text is the site's
Step 1
Answer a few questions
Short questions about your situation, in plain language.
Step 2
We prepare the forms
The right forms for your case, filled from your answers.
Step 3
You file them
Review, sign, and submit where the process says to.
Accordion (FAQ treatment)
Two categories, first item open — plus/minus glyph on the native open state, secondary-accent category underline; the list fills its container, answer prose measure-capped (v0.14.0)
Getting started
What does this accordion do?
It is the native details and summary pair with the framework's treatment: a plus that becomes a minus when open, a hairline between items, and a category heading with the secondary underline. No script is needed.
Does it use the disclosure module?
No. That module carries menu semantics (close on Escape or an outside click), which is wrong for an accordion — these items stay open until you close them.
Details
Where do the colors come from?
From the site's tokens: the glyph and the underline are the secondary accent, gated on both surfaces.
Tables and the compact density
Plain table in its wrap — the reading size, --neutral-border rows, a strong header rule
| Request | Owner | Status |
|---|---|---|
| Intake form | Operations | Open |
| Records pull | Records | In review |
| Closing letter | Counsel | Done |
Compact table — .table--compact: 15px at 1.4, cells one step down the spacing scale, --border-subtle hairlines; a code cell off the region wraps anywhere (the fit rule)
| Repository | Marker | State |
|---|---|---|
example-org/a-repository-name-with-no-break-anywhere-in-it | session/box-20261011-1751-orientation-where-did-we-leave-off | LIVE |
example-org/framework | session-done/box-20261011-1641-proposal | WRAPPED |
Compact list — .list--compact on a list element: the same density, a hairline under each item
- Overview — the fleet's state at a glance
- Pull requests — open, by repository
- CI — the latest run per workflow
Wide grid — a named scroll region with a pinned first column
A table wider than the page in its region — Tab to it, scroll with the arrow keys; the first column holds
| Repository | Workflow | Run | Branch | Commit | Started | Duration | Conclusion | Runner |
|---|---|---|---|---|---|---|---|---|
| example-org/framework | test | 38164339999 | sprint-11/leg-1 | 78e6285f1a0c | 18:33Z | 13 s | success | primary-3 |
| example-org/a-site-with-a-long-name | deploy | 38164211004 | main | 5345e8a9b2d7 | 17:52Z | 41 s | success | primary-1 |
| example-org/an-app | ci | 38163998712 | dependabot/npm_and_yarn/lockfile-group | 0c2f57a4e6b1 | 17:40Z | 2 m 05 s | failure | primary-2 |
Disclosure (bare)
Bare details + summary — content disclosure, no teardown (structure/styling site-owned)
Show details
Content revealed by the native details/summary widget — enhanced with Escape-close and outside-pointerdown/focusin dismiss (disclosure.mjs). No teardown attribute here: that belongs to the topnav's mobile-toggle form above. This entry's structure and styling are site-owned — copy the markup as-is.
Base layout & utilities
Skip link (offscreen until focused on real pages; shown statically here)
Container
Width-constrained shell (max-width --content-full)
Prose measure
Prose copy is capped at the readable measure so long-form text never spans the full container.
Screen-reader-only text
Visible label (with an sr-only suffix)
Icons (vendored Lucide subset)
The v0.1 set
Theme toggle
The emoji menu (the default call)
The icons menu — the vendored monitor, sun and moon, tinted by the brand
The text menu — the word is the face
The flat form — the fieldset alone, for inside a nav sheet
Declared default theme and the init file
The consumer's two lines, and a second control wired by the same module — on a declared-dark page the cycle reads Dark, Light, System
A consumer declares its default on the root — <html data-fgl-theme-default="dark"> — and, where its policy allows no inline script, links the init file in <head> before its stylesheets: <script src="/assets/js/fgl/theme-init.js"></script>. No attribute then paints the declared scheme, the menu checks it, and system is a stored third value that hands the scheme back to the viewer and follows a second tab.
App sidebar — a popover drawer below lg, a pinned column at lg
The shell's parts: skip link first, the Menu bar, the drawer with its sections and counts, the current item and its section marked by attribute, an empty section's note
Skip to content
The page's content sits here. The Menu button above opens the drawer at every width in this demo (the --drawer form); a consumer's --side form pins the sidebar beside the page at 1088px and wider, hides the bar, and keeps a token's gutter between the sidebar's rule and the content.