Vitre CSS Kitchen Sink

A static test page for checking how vitre.css styles raw semantic HTML. Open this file directly or serve the repository with any static server.

Current Color Scheme

These swatches use Vitre variables directly, so they update with system theme changes or an explicit data-theme override.

Token Preview Role
--vitre-primary Links, focus, primary actions
--vitre-bg Page background
--vitre-surface Glass panels and elevated surfaces
--vitre-text Primary text
--vitre-muted Body copy and secondary text
--vitre-border Control and table borders
--vitre-code-bg Inline and block code backgrounds

Typography

Vitre is designed for ordinary paragraphs, inline links, emphasized text, strong text, marked text, and small metadata such as .

Abbreviations like CSS, inserted text like new token names, deleted text like old aliases, and formulas like H2O or x2 should sit cleanly in running copy.

Small text should stay legible without competing with body copy.

Appurist Design Systems
100 Glass Avenue
Halifax, NS

Heading Levels

Grouped Heading

Compact supporting text inside an hgroup.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six

Lists

  1. Include the stylesheet
  2. Write semantic HTML
  3. Tweak variables when needed
  • Open command
  • Save command
  • Export command
    •

    Ruby annotations should remain legible: 透明(toumei).

    Classless CSS should make the common path beautiful while leaving customization available through a clear variable surface.

    An inline SVG to check media sizing, radius, and caption treatment.

    Dialog

    Dialog Preview

    This non-modal preview checks dialog-like content without covering later sections. The Close button is intentionally inactive in this CSS-only test.

    Semantic Structure

    Article Card

    Nested headers and footers create a natural card anatomy.

    Articles inside sections inherit the same glass panel treatment as top-level content panels.

    Published
    Article
    A self-contained composition that can render as a semantic card.
    Aside
    Supplementary content that should stand apart from the main flow.
    Your changes have been saved successfully.
    This note highlights contextual information.
    This alert needs attention before continuing.

    Forms
    Preferences

    Button Variants

    Default buttons use the solid variant. Buttons also support flat, outline, ghost, and plain variants. 

    :root {
  --vitre-button-bg-angle: 180deg;
}

<button type="button" data-variant="flat">Flat button</button>
<button type="button" data-variant="outline">Outline button</button>
<button type="button" data-variant="ghost">Ghost button</button>
<button type="button" data-variant="plain">Plain button</button>

    Data And Code

    Token examples use the same table rhythm as application data.
    Token Purpose Example
    --vitre-primary Primary action and link color hsl(214 88% 56%)
    --vitre-radius Default control radius 0.75rem
    --vitre-shadow Elevated surface shadow 0 18px 48px ...
    Total Three sample tokens

    Inline code should work with const theme = "vitre"; and keyboard hints like Ctrl + K.

    :root {
  --vitre-hue: 168;
  --vitre-primary: hsl(var(--vitre-hue) 76% 42%);
}

    Embedded Media

    Audio example using a local MP3 asset.
    Video example using a local MP4 asset.
    YouTube embed example for responsive iframe styling.
    Embedded object fallback for the Vitre docs.
    Object example embedding the Vitre documentation.
    Embed example using the same documentation target.

    Interactive Elements

    Theme behavior

    Vitre follows system color preference by default and supports explicit data-theme="light" and data-theme="dark" overrides.