This is how the web was meant to be.

Facet is a design library in plain HTML, CSS and JS. One link, one script, no build step, never minified — this page is the library.

Tell your AI:

“Use the Facet library and help me build an inflation calculator.”

That sentence is the whole workflow. Facet exists to give your AI taste: it teaches it, in its own language, how to build good web apps, good installable apps and good products — every component, every theme, every rule of craft, readable in one fetch. 

<link rel="stylesheet" href="https://[domain]/lib/facet.css">
<script src="https://[domain]/lib/facet.js" defer></script>

Why it hits different

The browser is the framework

Facet is extremely powerful because it truly uses your device's potential — the way the internet was designed to be. No runtime sits between you and the platform: pages install to the home screen and work offline, respond to your text size and dark mode, speak the reader's language and number system, move with the device's own tilt and light, click and vibrate like hardware, and print like real documents. Modern frontend rebuilds all of this in minified framework machinery; Facet just switches the browser's own features on.

And it goes one step further than any component kit: it helps you think the product through. Point your AI at the build method and it interviews you about the users and the job to be done, agrees a feature set with you, and builds it end to end — teaching as it goes. The page you ship stays plain, readable HTML you can open and understand.

How to use Facet

Two ways in, depending on who is reading. People read this site to learn what Facet offers; an AI reads the source to know exactly how every piece works. You bring them together — you decide, your AI builds.

If you are a person

  1. Skim this page. The Features show what Facet can do; the principles below show what you can count on. You never need to read the CSS or JavaScript.
  2. Grab the two tags. One link and one script, copied from the top of this page. That is the entire install — no framework, no build step.
  3. Explore the Library. Every component, block, template and whole app shell, live and with copy-paste code. Find the shells and pieces you want to use.
  4. Let your AI build it. Tell your assistant which template and components to use and ask it for a few options to choose from. It reads the code so you do not have to.
  5. Want to contribute? To extend the library itself — maintain it or add new components — follow the build instructions in CLAUDE.md, the charter for how Facet is built and kept consistent.

If you are an AI

Everything you need is in the source. Start with the manual, then drop into the files for exact detail:

  • llms.txt — read this first. The complete usage guide: every feature and every component, with copy-paste snippets, in one plain-text fetch.
  • facet.css — the whole design system, commented in place: every token and component documented where it lives.
  • facet.js — the behaviours, one small named function each, commented the same way.

Pointing an assistant at Facet? Hand it this:

Use the Facet design library at https://facet-kappa.vercel.app. Read /llms.txt for how to use every feature and component; the fully-commented source is /lib/facet.css and /lib/facet.js. Build pages with semantic HTML plus Facet's classes and data-attributes — no framework, no build step.

Features

What you get

The most impactful things first. Every card names its area; the complete technical inventory lives in llms.txt and every piece runs live in the Component library.

For people

Responds to your device

Raise your phone's text size and the whole interface grows. Dark mode follows your system. Reduced motion is honoured everywhere, high-contrast modes strengthen the ink, and layouts clear the notch and home bar.

For people

Speaks the reader's language

Author content in more than one language and one button flips the page. Numbers group the local way — lakh and crore where that is the norm — and big amounts are spelled out in words.

Theming

One attribute restyles everything

data-theme swaps the whole look, layout included. Dark mode composes with any theme, a single section can wear its own, and your brand color is one small block of overrides.

App feel

Any page becomes an installable app

Three small files make a page install to the home screen and work offline. Real screens with a working Back button, a bottom tab bar, a settings sheet and a floating menu — all self-wiring.

For AI

It helps you think the product through

The build method has your AI interview you about users and the job to be done, agree a feature set, and build end to end — teaching as it goes.

For AI

An AI learns all of it in one fetch

llms.txt teaches an assistant every component and rule in one plain-text read. The pages it builds stay operable by agents: real buttons, real links, state in the URL.

Zero setupTwo files, nothing to installOne link and one script from a URL. No npm, no build step, never minified, always up to date.
Zero setupPlain HTML already looks designedAround thirty bare tags are styled before any class: headings, tables, forms, code, focus rings, selection.
Zero setupWorks with JavaScript offContent, layout, links and forms all work without JS. Scripts only add polish on top.
ComponentsA whole component libraryButtons, fields, cards, lists, tables, charts, overlays, navigation, status — live with copy-paste code.
ComponentsBlocks and whole templatesTwenty ready page sections, plus eight full starters: landing, dashboard, social app, deck, documents.
ComponentsEvery state built inSelected, disabled, busy, error, success — one attribute, and loading skins that trace the content's own shape.
App feelMotion, light, sound and touchParallax and shine follow the cursor or the phone's tilt; taps click and vibrate like hardware.
App feelLiving backgroundsFaint pattern grids of any glyph you pick, or a fluid field of drifting color.
App feelSmooth page transitionsOne attribute and navigation animates — the old page eases away, the new one springs in.
ThemingEighteen type faces, one per jobHeadings to barcodes: signature, typewriter, receipt, pixel, hand — plus native faces for four scripts.
ThemingBuild your own theme, visuallyA live builder tunes every token and hands you a paste-ready config; Skin Lab compares all themes at once.
For peoplePrints like a documentInk on paper, folds opened, controls stepped aside; one attribute says what belongs on the page.

What you can count on

The promises behind every component — the principles the library holds itself to, so you always know what you are getting.

What you can count on

The code you ship stays readable

Facet exists because modern front-end is often an unreadable pile of machinery. Here the library and the pages you write with it stay clean and legible — that is the whole point.

One-glance HTML

Structure makes sense on first read: header, nav, main, section, article. You can look at a page and understand it without decoding it.

No wrapper soup

Facet never nests boxes for the sake of it. An extra container is only there to enable something real, like a scroll area or a sticky region.

Real controls, always

Every interactive thing is the right HTML element with an accessible name — so it works with the keyboard, with screen readers, and with AI agents, for free.

Accessible, SEO-ready and AI-readable

Contrast, keyboard support, structured markup and a machine-readable guide are baseline in Facet, so the sites you build inherit them without extra work.

Battle-tested on iOS

Real app work on iPhone taught some painful lessons — how full-screen pages must scroll, how to tame gestures, what a standalone web app actually needs, and why caching has to be handled just so. Those fixes are built into the library so your app behaves reliably rather than breaking.

Bring your own analytics

No tracking vendor is baked in. Instead, important actions carry a documented data-event name, so you can connect whichever analytics tool you use with a short snippet.
The old feature wall — every card, kept for reference

Features

Everything Facet gives you, grouped by what it is for. Tap any card for the detail. The complete technical inventory also lives in llms.txt for AI tools.

Two files, zero setup

Restyle everything in one attribute

It adapts to the reader

Write plain HTML, get a designed page

A whole library of components

Accessible and AI-ready by default

Try it and learn it right here

Two files, nothing to install

Facet is one CSS file and one JS file. You add a link tag and a script tag pointing at the hosted URL and everything works — no framework to learn, no package to install, no build to run.

Never minified

The shipped files are the real, commented source — open them and read exactly what is happening. Gzip keeps them small, so readability costs you nothing.

Always up to date

Because you link to the hosted files instead of copying them in, your site picks up improvements automatically. At 1.0, frozen copies let you pin an old version for good if you prefer.

Installable as an app

Three small files at your project root make any page installable: a one-line sw.js (turns on offline caching), a manifest.json (name, colors, icons), and an icon set. Facet ships a working reference set you copy, and the full step-by-step recipe is in llms.txt. Then any page caches itself for offline use and can be added to a phone's home screen with its own icon and a full-screen shell.

Prints like a document

Hit print on any Facet page and it reads like it was designed for paper: themes flatten to ink on white, navigation and floating controls step aside, folds open, and cards never tear across sheets. One attribute overrides any element — never print, always print, or print only — and a ready-made button gives visitors Save as PDF.

An app shell with real screens

For apps that navigate screen to screen — home, question, result — the view stack shows one screen at a time from plain hash links, so the URL always names the screen and the browser's Back just works. Every screen automatically stays clear of the Dynamic Island and the home bar, and one class lets a full-bleed screen deliberately run under them.

One attribute themes the whole page

Put one attribute on the page and the entire design changes — text, surfaces, borders, buttons, even layout backgrounds. Remove it and you are back to the clean default theme.

Dark mode that composes

Dark mode is its own switch, independent of which theme you chose, so every theme automatically has a light and a dark version.

Theme just one section

Want one panel in another theme, or a dark hero on a light page? Put the attribute on that element and only that part restyles.

Follows the visitor's system

If you do not pick a mode, Facet respects whatever the visitor's device is set to, and follows it live if they change it.

Shareable links keep the look

The current theme and mode ride along in the web address. Send someone the link and it opens looking identical to your screen.

One-line theme and mode switches

Building a theme picker or a dark-mode toggle is a single attribute on a button. Facet wires the click, the state and the URL for you.

Build your own theme, visually

The theme builder lets you adjust each color and watch the whole page update, then copy a small config into your project. Skin Lab lines up every theme in light and dark so you can compare at a glance.

Bring your own brand color

Set your brand's accent colors once and every component that uses that accent picks them up — page-wide, or scoped to one section.

Themed Google Map

Drop in a map with one attribute and your own key, and its ground, water, roads and labels are recolored to match your theme, light or dark.

Respects the phone's text-size setting

People who set a larger text size on their phone or browser get a larger interface everywhere — not just bigger body text, but proportional spacing and controls too.

Headlines that scale smoothly

Large display type resizes fluidly with the screen, so headlines look right on a phone and on a wide monitor without a single media query.

Mobile-first by default

Everything is sized for thumbs, nothing important hides behind a hover, and the layout respects notches and home indicators — so it feels right on a phone from the start.

Tunable motion

Presses have weight and things settle with a gentle spring. Prefer it quieter? One attribute calms or removes all motion, and a reader's reduced-motion setting overrides everything.

Handles high-contrast modes

When a reader turns on a high-contrast or forced-colors mode, Facet responds at the color level — grays firm up, borders appear, the focus ring thickens — so nothing disappears.

Smooth page-to-page transitions

Add one attribute and moving between pages feels like an app: the current page slides away and the next springs in, while the URL changes normally.

Speaks the visitor's language and numbers

Every built-in label comes from one translation table you switch with a single attribute and extend in a line — and the same switch translates your own content: write each language inline, and the active one shows while the rest hide (so with JavaScript off one language still shows and search engines read it). The choice rides the URL, so a shared link opens in the same language. Number grouping follows the locale — lakh and crore where that is the norm, million and billion elsewhere.

Prints cleanly

Hit print and you get a tidy document — navigation and controls drop away, colors go easy on ink, and margins are sane.

Semantic HTML already looks designed

Before you add a single class, raw HTML is already styled — a clean, readable page out of the box. Classes are for components, not for making basic text presentable.

Polished basics everywhere

The small things that make a site feel finished are handled: a single visible focus outline for keyboard users, nice selection colors, slim scrollbars, and a skip link for screen readers.

Layout building blocks

The pieces you arrange everything else with: width-capped containers, evenly-spaced stacks and rows, a grid that fits as many columns as comfortably fit, and full-screen swipe pages for app-like flows.

The app kit

Everything that makes a web page feel like a native app: a tab bar with a moving selection indicator, a settings panel that slides in on a spring, a floating action button, a scroll indicator, and a floating nav menu — a Menu button that opens your page links beside a Settings button that opens the toggles. Drop them in and they wire themselves up. The nav menu is real links in a <details>, so it still works with JavaScript off.

Buttons

Primary, secondary and quiet buttons in small, medium and large — identical whether they are a real button or a link. Square icon-only buttons match.

Form fields done properly

Every input comes wired with a label, room for a hint, and a clear error state, styled to match your theme — including a select with a themed arrow and no image files.

Sliders

A clean slider that shows its value as you drag, and a heavier version for big ranges that pairs a coarse drag with plus/minus steppers and a number box for precise values.

A serious number input

Built for calculators and money: it starts with an example, clears on first touch, groups digits the way the reader's country does as they type, and can spell the amount out in words.

Choice controls

The full set of pick-one and toggle controls, built on native inputs so they stay accessible and submit in forms, just dressed to match your theme.

Cards

A flexible surface for grouping content. Make it clickable and the entire card becomes a link that lifts and presses.

Modals, drawers and popovers

Dialogs, side drawers and small popovers that sit above everything correctly, open from any button with one attribute, and close on Escape or a backdrop click — no extra code.

Menus, toasts and accordions

The disclosure set: dropdown menus of real buttons, short toast notices that announce themselves, and accordions where opening one closes the rest.

Navigation

Tabs you can arrow between, breadcrumbs that mark the current page, and pagination built from real links with big enough tap targets.

Data and status

The pieces for showing information: clean tables, simple charts, tinted status badges, filter chips, initial avatars and progress indicators.

Graceful waiting states

While things load, show a shimmer shaped like the real content or a spinner; when there is nothing yet, a clear empty state instead of a blank space.

Line icons on one attribute

A set of clean line icons built into the library. Name one on an empty svg and it fills in, riding the current text color; add your own in a line.

A description tooltip on one attribute

Explain any control with one attribute. The tip appears on hover and on keyboard focus, so it helps everyone, and it is pure CSS.

Parallax, shine and idle motion

Chosen elements float gently or drift behind the cursor, the scroll's momentum, or the phone's tilt — and the shine effect sweeps a specular light across icons and cards from the same movement, the way iOS icons catch light. Where no input exists, an idle drift stirs everything every few seconds. It is opt-in and respects reduced-motion.

Sound and haptics

Controls can play a soft synthesized click and a haptic tap — no audio files — giving the interface a physical feel. Users can toggle it in the settings sheet.

Textured backgrounds

Give a section a faint material — a technical grid, dots, notebook rules or graph paper — with a single class that recolors itself per theme. And one of them is yours to fill: give any surface your own character, emoji or icon and it becomes the repeating pattern, redrawn live as the theme changes.

Built-in rough location

The visitor's approximate city, region and country from an IP lookup, without wiring up a service — configurable and off by default. Precise GPS stays your app's call on a real tap, not something the library forces on load.

Ready-made blocks and whole pages

Beyond single components: assembled sections like heroes, pricing and carts you copy whole, and complete page templates you rename and fill in — each previewable at phone, tablet and desktop widths.

AA contrast in every theme

Every theme is designed so text meets AA contrast in both light and dark. Accessibility is a starting constraint here, not an afterthought.

Fully keyboard operable

You can drive the whole interface from the keyboard, controls announce themselves correctly, and icon-only buttons always carry a label.

Operable by AI agents

Because everything is real semantic HTML with accessible names and state stored in the URL, an AI agent can understand a page by reading it and act by clicking real controls — no guessing at custom widgets.

The whole library as one text file

A plain-text guide at the site root describes every token, component and snippet, so an AI assistant can learn the entire library from one file and help you build with it.

Every component is live

This is not a list of screenshots — every component is running on the Library page, and you can flip its variants and states to see exactly how each looks.

Copy the exact HTML

Each copy button gives you the real HTML behind the demo you are looking at, generated from the live page so it always matches. You can also copy it as Markdown to paste into an AI prompt.

A loading skin for live content

When a card, list or dashboard is refreshing from a server, mark it busy with one attribute. The text turns into soft pulsing bars that hug its own lines, images flatten to gray, buttons go quiet — and when the data lands, everything comes straight back. No separate skeleton markup to build.

Every state built in

Selected cards and rows, disabled buttons and tabs, saving buttons with a spinner, fields that show error, warning or success with a message line — every state is one attribute, styled in every theme, and the accessible semantics come with it because the style rides the attribute itself.