The component library

Fonts

Eighteen type roles, one per job. The core seven: headings, body text, code and labels, quotes, long-form reading, big numbers and a handwritten pen. The extended set: a loud hero display, a signature script, a typewriter, a receipt printer, a real barcode, a pixel face, a children's face, and native faces for Japanese, Chinese, Korean and Hindi (Russian is covered by the core faces). The theme picks the actual fonts; a page only asks for the role, and each card names the font the active theme chose.

Default Velvet Aero Elegant

/* Components never name a face — they ask for the role. */
h1, h2, h3 { font-family: var(--font-heading); }
body        { font-family: var(--font-body); }
code, kbd   { font-family: var(--font-mono); }
blockquote  { font-family: var(--font-quote); }
article p   { font-family: var(--font-reading); }
.big-number { font-family: var(--font-numeric); }
.margin-note { font-family: var(--font-hand); }
.sign-off   { font-family: var(--font-signature); }
.ticket-id  { font-family: var(--font-barcode); }
:lang(ja)   { font-family: var(--font-japanese); }

Copy

Typography

The scale in use, as a real page of writing. Every block below is a raw HTML tag styled by the base layer; the mono tag under each names the token doing the work. Each font stack ends in a system fallback, so text renders instantly and survives a font failing to load.

<h1>A heading that opens the page</h1>
<p>Body text at a comfortable measure, holding <strong>strong text</strong>,
  <a href="#">a link</a>, inline <code>code</code> and a key like <kbd>Esc</kbd>.</p>
<blockquote>A quote steps aside from the flow.</blockquote>
<p><small>Small text for secondary lines.</small></p>

Copy

Color

The color system: a neutral base plus three accent ranks, shown as the same interface in light and dark. Components pick ranks, never raw colors, so one theme block restyles everything.

Beside the ranks sits the vivid palette — five bright decorative colors named by rank, like the accents: red, yellow, green, blue, purple. Decoration only — card tints (mixed into the surface), charts, playful accents — never semantic status; a theme may re-tune them. The raw brights are fills-only; when the palette must write — a tinted label, a stat on a washed card — each color carries a text-safe companion, the same hue at readable contrast in light and dark.

Every value lives once in facet.css as a variable named by role — --surface, never --gray-100 — so a theme is one block of overrides and nothing downstream changes. Click any swatch below to copy its token.

The code is the custom-accent recipe: your own brand color on any accent rank, one small block of CSS, a supported feature. Override a rank's four tokens (the color, its hover, its pressed, and the on-color for text sitting on it) on :root for the whole page or on any element for a subtree, and check the on-color still passes AA. facet.set({"--accent-1": "..."}) is the same override applied live at runtime.

/* Your accent, one block. Rank tokens only — every component follows. */
:root {
  --accent-1: #0F6FDE;
  --accent-1-hover: #0B5FC2;
  --accent-1-pressed: #0850A6;
  --on-accent-1: #FFFFFF;
}

Copy

Spacing

Spacing is named by intent, not by number: reach for --space-card or --space-section, never a step on a scale. One global control — data-density="small|medium|large" — tightens or opens the whole system at once, and a theme sets its own rhythm. Below, real pieces sit on a tinted ground; the tint showing through is the token at work.

The full set, each named for where it belongs: --space-tight (bound pairs like a label and its field), --space-control (inside buttons and inputs), --space-inline (row gaps), --space-stack (default gap between blocks), --space-card (card padding), --space-page (page margins), --space-section (between sections), --space-hero (the biggest breaks) and --space-pin (the fixed 20px inset a viewport-pinned panel keeps from the screen edges — exact pixels, never density-scaled, so pinned panels fit exactly and never move with the scroll). Container widths cap the horizontal rhythm: --width-narrow 40rem for prose and calculators, --width-default 64rem for most pages, --width-wide 80rem for dashboards.

<section class="card stack">      <!-- --space-card padding, --space-stack between blocks -->
  <h2>Card title</h2>
  <p class="row">                  <!-- --space-inline between the buttons -->
    <button class="btn btn-primary">Save</button>
    <button class="btn">Cancel</button>
  </p>
</section>

Copy

Shape and elevation

Small radii on controls, medium on cards, large on overlays, pill for chips and thumbs. Shadows stay subtle and flat in every theme. How things move is its own system — see Motion just below.

/* Radii and shadows by role — a theme retunes them all at once. */
.panel   { border-radius: var(--radius-card); box-shadow: var(--shadow-raised); }
.menu    { border-radius: var(--radius-panel); box-shadow: var(--shadow-overlay); }
.chip    { border-radius: var(--radius-pill); }

Copy

Motion tokens

How everything moves, as one system: three durations and three easing curves that every component reads, plus one personality switch — Lively, Calm or Off — that retunes them all at once. The parallax, shine and idle drift ride the same engine, and reduced motion always wins.

Lively Calm Off

/* Anything you animate reads the same tokens the library uses. */
.panel { transition: box-shadow var(--duration-fast) var(--ease-out); }
.sheet { transition: translate var(--duration-slow) var(--ease-spring); }

<!-- One attribute retunes the whole system -->
<html data-motion="calm">   <!-- or "off"; reduced motion always wins -->

<!-- The same engine moves and lights elements -->
<img src="hero.png" data-parallax="12" alt="">
<button class="btn btn-primary" data-shine>Get started</button>

Copy

Base styles

The look of raw HTML itself. Around thirty bare tags are already designed before any class is added: headings, paragraphs, links, lists, quotes, tables, images, rules, code and keyboard keys, and the whole form family — labels, text inputs, selects, textareas, file and date pickers, checkboxes, radios and buttons. One visible focus ring, selection colors, thin scrollbars and the print base come with it, and controls refuse accidental text selection while every piece of content stays selectable. The working tags are below; the text tags — headings, paragraphs, lists, quotes, small print — are shown as a full page of writing on the Typography page. If a page only carries writing and simple forms, it may need no classes at all.

<table>
  <thead><tr><th>Scale step</th><th>Size</th></tr></thead>
  <tbody><tr><td>--space-stack</td><td>16px</td></tr></tbody>
</table>

<label for="amount">A raw text input</label>
<input id="amount" type="text" placeholder="Type here">

<select><option>Monthly</option><option>Yearly</option></select>
<textarea rows="2"></textarea>
<button>A raw button</button>

<p>No classes anywhere — base styles only.</p>

Copy

Print & export

Printing built in. Mark what belongs on paper and what does not, and every page prints clean: white ground, folds opened, nothing cut in half. A save-as-PDF button is one attribute.

Copy

Container

The page-width wrapper. It centers the content, caps how wide it grows, and keeps the side padding even on every screen.

Narrow Default Wide Full

Copy

Stack

Puts blocks one above the other with an even, themed gap. The default way to space a column of anything.

Tight Default Loose

Copy

Row

Puts things side by side with an even gap, wrapping onto new lines when the room runs out.

Tight Default Loose

Copy

Grid

A grid of equal columns — as many as fit the screen, one on phones, with no breakpoints to write.

Default Wide cards

Copy

Snap section

Full-screen sections that snap one screen at a time as you scroll — the feel of a modern product page, built to work on iPhone.

Copy

View stack

The app shell. Each section is a screen, one shows at a time, and plain links move between them — with the browser's back button working.

Copy

Button

The action element: three variants and three sizes for primary, secondary and quiet actions. Works identically as a button or a link.

Primary Secondary Ghost Small Default size Large Disabled

Copy

Icon button

A square button holding one icon — for compact actions whose meaning the icon and its tooltip carry.

Primary Secondary Ghost Small Default size Large Disabled

Copy

Switch, checkbox, radio

Switches, checkboxes and radios — the native controls wearing the theme, with nothing custom to break.

Copy

Stepper & segmented control

A count with minus and plus buttons, and a segmented control for flipping between a few views of the same thing.

Copy

Fields: input, textarea, select, search

Labelled inputs — text, dropdown, search and more — in one pattern with hints and error lines built in.

Copy

File upload & date input

The file picker and the date input, themed but kept native, so the browser's own dialogs do the work.

Copy

Number input

A money-grade number field: digits group as you type, the amount is spelled out in words underneath, and a clear button empties it in one tap.

Normal Error Disabled Indian numbers Western numbers English words हिन्दी words

Copy

Slider

A range slider with its live value beside it — for small bounded choices you drag to.

Disabled

Copy

Detailed slider

A slider for wide ranges: drag fast across the whole span, then land the exact value with the steppers or the number box.

Copy

Choice grid

A grid of small picture buttons — a symbol above a tiny caption — for picking one of a few options at a glance.

Copy

Card

The grouped surface: a padded, rounded panel that lifts content above the page. The building block of most layouts.

Copy

List

Rows with a leading icon or picture, a title, and a trailing value or action — the workhorse of feeds, settings and results.

Copy

Table

The data table: quiet header, striped rows, and a hover that names the row you are reading. For records, not layout.

Copy

Chart

A themed line chart drawn from a list of points — with labels, event markers and an optional dashed projection.

Copy

Heading bar

A short thick accent stroke under a heading — the designed look for a section title, between plain text and a font change.

Copy

Text clamp

Holds a long block of text to a set number of lines and fades the last one out instead of cutting it with an ellipsis, so cards and rows stay the same height when their copy runs long. The full text stays in the page for screen readers, reader view and print.

Copy

Badge, chip, avatar, progress

Four tiny signals: the badge for a status word, the chip for a filter, the avatar for a person, the progress bar for a share of done.

Copy

Icon badge

A small glossy status dot pinned to an app icon's corner — numbers, ticks or alerts, like a home-screen badge.

Copy

Result block

The answer card: one plain sentence a person can repeat, with the number large underneath. For calculators and verdicts.

Full Verdict and number Empty state

Copy

Icons

The icon set: thin line glyphs you place with one attribute and color with the text color. About sixty ship, and you can add your own.

<button class="btn btn-icon" aria-label="Search" data-tip="Search everything">
  <svg data-icon="search"></svg>
</button>
<p><svg class="glyph" data-icon="clock"></svg> Updated an hour ago</p>

Copy

Themed map

A Google Map wearing the active theme, so the map matches the page in every theme, light and dark.

Copy

Modal, drawer, popover

Modal, drawer and popover, built on the platform's own dialog machinery — focus, Escape and the backdrop come free.

Copy

Accordion, toast, dropdown menu

The accordion for folding content, the toast for a passing notice, and the dropdown menu for a few actions behind a button.

Copy

Description tooltip

A one-attribute explanation bubble: put the text on any element and it appears on hover or keyboard focus. On touch screens a tap opens it — placed wherever there is room — and it stays until you scroll or tap anywhere else.

Flip below

Copy

Tabs, breadcrumb, pagination

Tabs for switching views, the breadcrumb for where you are, pagination for long lists — the wayfinding trio.

Copy

Nav link

The navigation link with three designed states: quiet at rest, named on hover, marked when it is the current page.

Copy

Flagship link

The prominent link: heading-sized, a strong underline, and an arrow that leans in on hover. One per section at most.

Copy

Skeleton, spinner, empty state

The three honest ways to show absence: a skeleton while loading, a spinner while working, an empty state when there is nothing.

Copy

Loading skin

The loading state: mark any region busy and its content turns into pulsing placeholders shaped like itself, then comes back.

Copy

Component states

The state system: hover, focus, disabled, selected, busy and status, carried the same three ways on every component.

Copy

Grid of cards

Cards laid out in the auto-fitting grid — as many columns as fit, one on phones, no breakpoints to write.

Copy

Horizontal card row

Cards that scroll sideways with momentum and a gentle snap — a shelf of content on any screen.

Copy

Promo rail

A full-bleed carousel of wide feature cards, each washed in its own tint, gliding sideways with a snap.

Inflation calculator See what today's money was worth then Open Real-time explorer What's around you, live Open Money scale From thousands to trillions Open Anime quote quiz Guess who said it Open Schedule clock Your day at a glance Open

Copy

Filterable card list

A search field over a list: type and the rows that do not match disappear, live.

Copy

List cards

Full-width outlined rows, one card per record, with the fields side by side inside.

Copy

Product grid

Product cards — image, name, price, action — where the whole card is the link.

Copy

Product detail

The product page pair: a gallery on one side, with the name, price, options and buy action stacked beside it.

Copy

Cart line items

The order as rows — item, quantity stepper, line total — with the totals and checkout in a card beside it.

Copy

Full top menu

The site header: a brand lockup, links with small icons and one action. It can stick to the top of the page as a blurred translucent strip; on phones the links fold behind an icon that grows the panel open under a darkening blur.

Copy

Sidebar navigation

Grouped navigation links in a side column — the pattern this page's own index uses.

Copy

Side index

The pinned index beside long content: a search box and grouped links, with the current item marked and kept centred as you move. This page's left menu is this block.

Copy

Footer

Link columns over a legal row — the bottom of every site page.

Copy

Hero

The opening statement: display type, one line under it, one primary action.

Copy

Feature grid

Icon, claim, one sentence — repeated in the auto-fitting grid. The what-you-get section.

Copy

Pricing table

Plan cards side by side — name, price, the differences, one action each — with the recommended plan lifted.

Copy

FAQ list

Questions as accordions that keep one answer open at a time, with no JS.

Copy

CTA band

The closing ask: an ink-filled strip with one line and one button.

Copy

Logo row & testimonial

A muted row of logos and one quote with a face and a name — the proof pair.

Copy

Data table with toolbar

Search, filter chips and actions in a row above the data table — the working screen of a records app.

Copy

Stat row

KPI cards: one number that matters with its label under it, in the auto-fitting grid.

Copy

App grid

A home-screen launcher: a grid of app tiles, each one a real link with a rounded icon and a label.

Copy

App identity

An app's identity header: the centered icon, name and one-line purpose, with the version details in rows below.

Anime quote quiz

Guess who said it

In development

4,120OPENS

v0.9VERSION

212 KBSIZE

Copy

Settings section

Settings rows — a label with its switch, select or stepper — in a quiet stack under a group heading.

Copy

Form section

Grouped fields with one submit row: a fieldset per group, the primary action last.

Copy

Article header, prose, media

The editorial set: title, byline and meta over long-form semantic text, with the article structured-data slot.

Copy

Parallax & idle motion

Parallax and idle drift: elements shift gently with the cursor or the phone's tilt, and sweep on their own when nothing moves.

Copy

Shine

A specular light that travels across an element as the device moves — the way app icons catch light. One attribute.

Copy

Sound & haptics

UI sound and vibration with no audio files: a tap under buttons, a tick on steppers, a snap when a pager lands.

Copy

Backgrounds

Very faint materials for big quiet surfaces. Two variants: Grid shows its five looks stacked below — the technical grid, the dot grid, the circle grid of outlined rings, graph paper and the custom grid of your own symbols — and each area carries its own controls, so every look tunes independently; Fluid drifts soft color like light through glass. The technical, dot and circle grids can also scatter your own characters across the pattern, at a size you pick, in a fresh arrangement on every visit.

Grid Fluid

Copy

Tab bar

The app's floating command bar, like the pill in Apple's Photos app: a round menu button that slides the navigation in from the left edge, the pill of sections with its gliding highlight, and a round settings button that slides the settings panel in from the right. Every piece is optional, and one extra class turns the same bar into a desktop site bar pinned to the top. This site's own bar — with its corner panels condensing in and out of their buttons — is the whole system running live.

Tap the segments: the highlight stretches and settles between them. The corner buttons open the two edge panels — menu left, settings right — and swap each other out. The brand is the home tab in both shapes — first option in the phone pill, left anchor on desktop — and the CTA slot hides itself on phones; one markup serves both.

<!-- the app bar (phone: floats at the bottom). Add class
     "tab-bar-top" and wide screens pin it to the top as the
     site bar; the brand and CTA slots show only there. -->
<nav class="tab-bar tab-bar-top" aria-label="Sections">
  <button type="button" class="tab-menu" aria-controls="nav-sheet"
          aria-expanded="false" aria-label="Open menu"
          data-tip="Opens the navigation">
    <svg width="20" height="20" data-icon="menu"></svg>
  </button>
  <div class="tab-set">
    <!-- the brand IS the home tab: aria-current="page" on the home page -->
    <a class="tab-brand" href="/" aria-current="false"><svg width="18" height="18" data-icon="sparkle"></svg>acme</a>
    <button type="button" class="tab-seg" data-section="intro" aria-current="true">Intro</button>
    <button type="button" class="tab-seg" data-section="inputs" aria-current="false">Inputs</button>
    <a class="btn btn-primary btn-small tab-action" href="/start">Start free</a>
  </div>
  <button type="button" class="tab-settings" aria-controls="settings-sheet"
          aria-expanded="false" aria-label="Open settings"
          data-tip="Opens the settings">
    <svg width="20" height="20" data-icon="sliders"></svg>
  </button>
</nav>

<!-- each edge panel is a scrim + sheet pair -->
<div class="sheet-scrim" data-open="false"></div>
<aside class="sheet sheet-left sheet-rise" id="nav-sheet" data-open="false"
       aria-hidden="true" aria-label="Navigation">…</aside>
<div class="sheet-scrim" data-open="false"></div>
<aside class="sheet sheet-rise" id="settings-sheet" data-open="false"
       aria-hidden="true" aria-label="Settings">…</aside>

<!-- .sheet-rise: on phones the panel rises out of the bar in the
     bar's own glass; on wide screens it stays an edge sheet. -->

<!-- the page clears the fixed bar with one class, no hand-measured
     padding: top on wide screens, bottom on phones. (A page with the
     plain bottom bar pads with var(--bar-clearance-bottom) instead.) -->
<main class="page-under-bar">…</main>

Copy

Sheet & menu

The settings sheet: a panel that slides in over a dark scrim, holding menu rows and setting toggles. The same panel can instead rise out of the tab bar's corner as a glass card on phones, or hang from the top bar's corner on wide screens — the menu and settings panels running this site, opened from the bar below, are that shape live.

Copy

Float button

A lone round button floating at the page's corner — the home for one global action, like opening the menu.

Copy

Nav menu

The floating site menu: a Menu pill that opens a stack of links, with a settings button beside it.

Copy

Content translation

Content in more than one language: author each variant in the markup and one button flips the page.

Copy

Scroll gauge

A slim themed scroll thumb beside a panel — it shows your place where the native scrollbar is hidden.

Copy

Installable (PWA)

Turns a page into an installable app: three small files at your project root, with offline caching from the library.

The install button reveals itself only when the browser actually offers installation (so here it may stay hidden). facet.install() triggers the prompt from code.

1 · sw.js at your project root — one line:

importScripts("https://facet-kappa.vercel.app/lib/facet-sw.js");

Copy sw.js

2 · the head block on the page (manifest, apple metas, worker registration):

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#FFFFFF">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="/icons/icon-180.png">
<script src="https://facet-kappa.vercel.app/lib/facet.js" data-service-worker="/sw.js" defer></script>

Copy the head block

3 · manifest.json + icons/ — copy the template manifest and the icon set, then edit the name and colors.