Live component reference

Compact Theme, fully assembled.

This page uses the published stylesheet and script to demonstrate typography, layout, navigation, cards, controls, code treatment, theme behavior, responsive media, and accessibility utilities.

Plain HTMLIBM PlexLight + darkNo runtime dependency

Typography

Editorial text with a technical voice.

IBM Plex Sans carries body copy. IBM Plex Mono handles headings, labels, navigation, controls, and code. Inline references remain distinct without interrupting a paragraph.

Hierarchy

Compact headings

Heading sizes stay restrained, line lengths remain readable, and the content shell stops growing on very wide displays.

One clear page title
Section-level headings
Card-level headings

Base elements

Links and inline code

Ordinary text links use a restrained hover treatment. Short commands such as npm test use the mono face and semantic theme colours.

Components

A small vocabulary covers most static sites.

The header, navigation, hero, sections, cards, tags, actions, buttons, code frames, and footer share the same spacing and colour variables.

Cards

Responsive grid

Cards appear in 2 columns when space permits and collapse to 1 column at the mobile breakpoint.

Actions

Primary and secondary

Buttons remain ordinary links or buttons with visible keyboard focus and a minimum touch-friendly height.

Primary action Secondary action

Utilities

Accessible helpers

The skip link appears when focused. The screen-reader-only utility adds useful context without changing the visual layout.

Install

Media

Responsive by default

Images, SVG illustrations, and video stay inside their containers without extra utility classes.

Code treatment

Semantic code blocks label and copy themselves.

Standard language classes produce readable labels. A custom label can replace the detected language, and data-no-copy leaves a block untouched.

Detected label

HTML

The script recognizes common language classes and adds a copy control.

<link rel="stylesheet" href="./compact-theme.css">
<script src="./compact-theme.js" defer></script>

Detected label

Shell

Long commands scroll inside the frame instead of widening the page.

npm install
npm test
npm run test:update-snapshots

Custom label

Token palette

Token classes support syntax highlighters while the theme stays independent of any highlighter.

/* Compact Theme */
.compact-card {
  color: var(--compact-text);
}

Opt out

Unmodified block

This block uses the base code style and deliberately receives no toolbar or copy button.

data-no-copy keeps this block unchanged.

Behavior

Progressive behavior with durable fallbacks.

The stylesheet works alone. JavaScript adds preference persistence, theme controls, language labels, and copy actions.

System preference

Automatic first visit

The initial palette follows prefers-color-scheme. The control in the header shows the mode available next.

Persistence

Remembered choice

A visitor’s light or dark selection is stored locally and restored on the next page load.

Reduced motion

Respectful transitions

The reduced-motion media query disables smooth scrolling and theme interaction transitions.

No JavaScript

Readable fallback

The theme toggle stays hidden, code remains styled, semantic markup stays intact, and the system palette still applies.

Install

Copy the assets into any static site.

Keep the bundled fonts directory beside the stylesheet, load the script with defer, and retain the software and font licences when redistributing the theme.

Download latest release Read the guide Validate this page

<link rel="stylesheet" href="./compact-theme.css">
<script src="./compact-theme.js" defer></script>