Primary link
@fgl/vituno styleguide
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.
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
Three-state control (System → Dark → Light)
Switch to dark mode