Design system for pages with no brand

Unbranded covers explainers, small tools, reports, and forms that are not Greenville Triumph or Sean Tippen work. Link three files at a pinned version, pick one of four presets, and build only from the classes and tokens on this page.

Head block

Paste this into the page head, set data-preset on the html element, and fill the brief card before writing any markup. The preloads change with the preset: load that preset's display and body files.

<!doctype html>
<html lang="en" data-preset="standard">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="design-system" content="unbranded 1.0.0">
<title>Literal page title</title>
<link rel="preload" as="font" type="font/woff2" crossorigin href="https://unbranded.seantippen.com/1.0.0/fonts/schibsted-grotesk-latin-wght-normal.woff2">
<link rel="preload" as="font" type="font/woff2" crossorigin href="https://unbranded.seantippen.com/1.0.0/fonts/public-sans-latin-wght-normal.woff2">
<link rel="stylesheet" href="https://unbranded.seantippen.com/1.0.0/tokens.css" integrity="sha384-XDeiGpxMH40GoET+QMRWCAR5eq1KmvHub/TMCLGlumygsWgGzX7BB89qEK7gSAF2" crossorigin="anonymous">
<link rel="stylesheet" href="https://unbranded.seantippen.com/1.0.0/components.css" integrity="sha384-SKo2Dp7MntS9/kGGp647kNZZWg7YuCN3WaxZb1oIG+mvmBq+bEnXhadFdj5L+qLP" crossorigin="anonymous">
<script defer src="https://unbranded.seantippen.com/1.0.0/ub.js" integrity="sha384-KBr0JNa28XlPRogXFivF133uGU0fVJDWyEt7mG+uwMHPlPQoJ3DYPmG4iAtD242u" crossorigin="anonymous"></script>
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- ub-brief
purpose: One sentence saying what this page is for.
reader: Who reads it and what they already know.
must-make-clear: The one thing the reader must leave knowing.
preset: standard
starter: argument
signature-move: inverse band
sources: Where every number on the page comes from.
-->
</head>

This release

Version: 1.0.0
Released: November 1, 2026
Files: tokens.css, components.css, and ub.js
Presets: 4: standard, tool, reading, and report
Schemes: Light by default; dark and auto on request
Contrast: 192 color pairs pass WCAG 2.2 and APCA
Contract: SKILL.md
Registry: registry.md and registry.json
Current version: versions.json

Pin the exact version

There is no floating latest URL. Every file lives in an immutable version folder, so a page keeps working when a new version ships.

Presets

A preset sets fonts, accent, neutrals, radii, density, and motion together. Pick the one that matches the job of the page; never mix fonts or accents across presets. Each column below is rendered in its own preset.

Setting	standard	tool	reading	report
Heading	Permit backlog by district	Permit backlog by district	Permit backlog by district	Permit backlog by district
Body	Open requests rose for six straight weeks, mostly in water billing.	Open requests rose for six straight weeks, mostly in water billing.	Open requests rose for six straight weeks, mostly in water billing.	Open requests rose for six straight weeks, mostly in water billing.
Actions
Input
Status and link	Selected Open request	Selected Open request	Selected Open request	Selected Open request
Used for	General pages, explainers, demos, light tools	Small apps, admin screens, data entry	Long reads, essays, documentation	Reports, tables, finance and operations summaries
Accent	Orange, hue 58, dark label	Petrol, hue 218, white label	Berry, hue 353, white label	Ink, near black
Neutrals	Cool steel, hue 235	Warm gray, hue 85	Green gray, hue 160	Warm gray, hue 60
Display face	Schibsted Grotesk 700	Funnel Display 600	Literata 650	Source Serif 4 600
Body face	Public Sans	Public Sans	Literata; Public Sans for UI	Public Sans
Radius	4, 6, and 8 px	3, 4, and 6 px	4, 4, and 8 px	2, 2, and 4 px
Density	Regular	Compact	Comfortable	Regular
Overlay shadow	Tinted, light	None, border only	Tinted, light	None, border only
Starter	argument and form	tool	article	report

Attributes

Attribute	Values	Default	Changes
`data-preset`	standard, tool, reading, report	standard	Colors, fonts, radii, density, motion, and measure
`data-scheme`	light, dark, auto	light	Light or dark values of every color
`data-density`	compact, regular, comfortable	The preset's	Control heights, UI text size, and spacing
`data-contrast`	more	Off	Stronger borders, focus ring, and muted text

Any of the four works on any element, so one section of a page can switch preset or scheme. The Rules section below is an example: it sets data-scheme to the opposite of the page.

Color

Pages use role tokens only. Values are generated, then checked against both contrast gates before they ship. The value column shows what the current preset and scheme resolve to; switch either at the top of the page.

Surfaces and text

Token	Color	Value	Use
`--ub-bg`			Page ground
`--ub-surface`			Panels
`--ub-surface-raised`			Inputs, popovers, and menus
`--ub-surface-sunken`			Wells, code, and sunken bands
`--ub-surface-overlay`			Dialogs and drawers
`--ub-fg`			Body text and headings
`--ub-fg-muted`			Labels, captions, and metadata
`--ub-fg-faint`			Placeholders and disabled text
`--ub-border`			Separators and panel edges
`--ub-border-strong`			Header rules and emphasis
`--ub-border-control`			Input and checkbox edges (3:1)

Accent

Token	Color	Value	Use
`--ub-accent`			One primary button per view
`--ub-accent-hover`			Primary button on hover
`--ub-on-accent`			Label on the accent fill
`--ub-accent-subtle`			Selected rows, accent band
`--ub-accent-border`			Edge of a selected item
`--ub-accent-text`			Links and selected text
`--ub-focus`			Focus ring

Never use the accent for headings, body text, ordinary borders, decorative icons, a chart series, or a second button in the same view.

Status

Status	Solid	Subtle	Border	Text	On solid	Example
success						Closed
warning						Overdue
danger						Failed
info						Scheduled

Status colors are the same in every preset and appear only in status UI, always with an icon and a word. Warning yellow is never decoration.

Data

Categorical, --ub-chart-1 to -8. Separated for color-vision deficiency; each is 3:1 on the surface. Slot order moves a hue that is close to the accent to the end.

12345678

Sequential, --ub-seq-1 to -7

1234567

Diverging, --ub-div-1 to -9, blue to orange through a neutral midpoint. Red and green are never paired.

123456789

Neutral scale, --ub-neutral-1 to -12. Read-only: components use it, pages use the role tokens.

123456789101112

Accent scale, --ub-accent-1 to -12. Read-only.

123456789101112

Contrast gates

Pair	WCAG 2.2	APCA Lc
Body text on page and surfaces	7:1	90
Muted text, links	5.5:1	72
Faint text, status text	4.5:1	60
Label on a solid fill	4.5:1	60
Control border	3:1	30
Focus ring	3:1	45
Chart color on surface	3:1	Not used

Type

UI sizes are fixed; content sizes scale between a 320 px and a 1440 px viewport. Fonts are self-hosted with tokens.css, so a page needs no Google Fonts link. The face below follows the preset chosen at the top.

Token	At 320 px	At 1440 px	Used for	Sample
`--ub-text-5xl`	47.8	68.7	Display, one short line	Backlog
`--ub-text-4xl`	39.8	54.9	Display	Backlog
`--ub-text-3xl`	33.2	43.9	Page heading (h1), stat value	Backlog
`--ub-text-2xl`	27.6	35.2	Section heading (h2)	Backlog
`--ub-text-xl`	23.0	28.1	h3	Backlog
`--ub-text-lg`	19.2	22.5	h4, lead, reading body	Backlog
`--ub-text-base`	16.0	18.0	Body	Open requests by team
`--ub-text-sm`	14.0	14.0	Dense UI, tables, captions	Open requests by team
`--ub-text-xs`	12.0	12.0	Badges, source lines (the floor)	Open requests by team

Fonts

Role	standard	tool	reading	report	Token
Display	Schibsted Grotesk	Funnel Display	Literata	Source Serif 4	`--ub-font-display`
Body	Public Sans	Public Sans	Literata	Public Sans	`--ub-font-body`
UI and tables	Public Sans	Public Sans	Public Sans	Public Sans	`--ub-font-ui`
Code	Atkinson Hyperlegible Mono	Atkinson Hyperlegible Mono	Atkinson Hyperlegible Mono	Atkinson Hyperlegible Mono	`--ub-font-mono`

Body text runs at --ub-measure (62 to 72 characters by preset). Headings balance and stop at 28 characters wide. Space above a heading is three times the space below it. Tables use tabular figures.

Space and layout

Spacing steps are multiples of 4 px with the same numbers Tailwind uses. Breakpoints are two literals, 40rem and 64rem; components use container queries.

Token	px	Size
`--ub-space-1`	4
`--ub-space-2`	8
`--ub-space-3`	12
`--ub-space-4`	16
`--ub-space-5`	20
`--ub-space-6`	24
`--ub-space-8`	32
`--ub-space-10`	40
`--ub-space-12`	48
`--ub-space-16`	64
`--ub-space-20`	80
`--ub-space-24`	96

Token	Phone	Desktop	Use
`--ub-gutter`	16	40	Page side padding
`--ub-gap`	16	28	Grid and sidebar gaps
`--ub-block`	24	48	Between blocks
`--ub-section`	48	112	Between sections
`--ub-control-md`	44	40	Control height (touch is taller)
`--ub-page-narrow`	640	640	Forms, single columns
`--ub-page-default`	1152	1152	Content and tools
`--ub-page-wide`	1536	1536	Data-heavy pages

Layout primitives

Layout comes from these classes, not from page CSS. Each one takes a few custom properties (knobs) for its sizes.

Class	Does	Knobs
`.ub-stack`	Vertical rhythm for controls and panels	`--ub-stack-space`
`.ub-flow`	Prose rhythm, more space above headings	`--ub-flow-space`
`.ub-center`	Centered column with the page gutter	`--ub-center-max`
`.ub-cluster`	Wrapping row of buttons, tags, or metadata	`--ub-cluster-space`
`.ub-grid`	Two tracks, 7 to 5 by default; one column under 40rem	`--ub-grid-cols`, `--ub-grid-min`
`.ub-with-sidebar`	Sidebar that drops under the content when narrow	`--ub-sidebar-width`
`.ub-switcher`	Row that becomes a column below a width	`--ub-switcher-threshold`
`.ub-cover`	Full-height screen with one centered block	`--ub-cover-min`
`.ub-frame`	Crops media to an aspect ratio	`--ub-frame-ratio`
`.ub-reel`	Horizontal scroller for screenshots	`--ub-reel-item`
`.ub-band`	Full-width section with its own ground	`data-ground`, `data-scheme`

7 tracks: the claim, the table, the main content

5 tracks: the evidence or the figure

Components

One root class per component, parts named after it, and closed attributes for variants. States come from the browser (hover, focus, disabled, checked) and ARIA, never from state classes. The figures in this section are sample data generated for this page.

Button

Variant	Default	Hover	Focus	Pressed	Disabled	Busy
solid
soft
outline
ghost
link						Not used

One solid accent button per view. Neutral and danger tones, sizes, a pressed toggle, icon buttons (each with an aria-label), and a tooltip on hover or focus.

Forms

Email address

Receipts and status changes go here.

Backup email

Backup email must include @.

Search requests

Shown in its hover state.

Assignee

Shown in its focus state.

Request number

Opened

Panel, description list, and callout

Request 2213

Overdue

High bill dispute, opened 4 days ago

Team: Water billing
Address: 418 Larkin Mill Road, Unit 2
Caller: Mara Okafor
Amount disputed: $186.40
Due: Oct 30, 2026

Billing cycle closes Friday

Disputes opened after Friday move to the November cycle.

Meter re-read scheduled

A technician visits 418 Larkin Mill Road on Nov 3.

2 days past due

Overdue requests go to the team lead each morning.

Payment sync failed

The billing export did not finish. Run it again from Settings.

Stats, table, and chart

657

Open requests

All teams, Nov 1, 2026

546

Opened this week

29 more than last week

528

Closed this week

17 more than last week

3.0

Median days to close

Across 5 teams with closures

Source: sample data generated for this page.

Requests opened and closed per week

All teams, 12 weeks from Aug 10 to Oct 26, 2026

Opened
Closed

Source: sample data generated for this page.

Open requests by team

Permits	214	96	4.5
Water billing	187	141	2.0
Streets and sidewalks	162	58	9.5
Parks	71	44	3.0
Records	23	37	1.5
Code enforcement and property maintenance	0	12	No data

Sort any column by its header. Days is the median number of days to close. The selected row shows the selected state.

Badges

Draft Selected Scheduled Closed Overdue Failed 12

Overlays

Tabs and accordion

Opened: 546
Closed: 528

Can a page change the accent?

No. Pick the preset whose accent fits. A white-label demo overrides the accent through the generator, which checks contrast again.

Does a page work without ub.js?

Yes. The script adds keyboard tabs, sorting, toasts, and the chart bridge. Everything else is CSS and HTML.

How do I update to a new version?

Change the version in the three URLs and the meta tag, then replace the integrity hashes from versions.json.

Empty, loading, and progress

No requests match these filters

Clear the filters to see all 657 open requests.

Loading Loading requests

Export, 62 percent62 percent Uploading meter photosUploading Storage used, 7.4 of 10 GB7.4 GB

Navigation, code, and keys

<button class="ub-button" type="button">Save changes</button>
<button class="ub-button" data-variant="outline" data-tone="neutral">Cancel</button>

Press Ctrl K to search. Inline code looks like --ub-accent.

Every class

59 components and primitives in 1.0.0
	What it is	Also called
`.ub-stack`	Vertical rhythm for components and forms.	None
`.ub-flow`	Prose rhythm: space between blocks, more above headings than below.	None
`.ub-box`	A bordered padded area.	None
`.ub-center`	Centered content column with the page gutter.	None
`.ub-cluster`	Wrapping row of items.	None
`.ub-with-sidebar`	Sidebar beside content that wraps under it when narrow.	None
`.ub-switcher`	Row that becomes a column below a container width.	None
`.ub-cover`	Fills the viewport height with one centered main block.	None
`.ub-grid`	Two-track grid with one dominant track (7/5); equal tracks only with data-fit.	None
`.ub-frame`	Crops media to an aspect ratio.	None
`.ub-reel`	Horizontal scroller.	None
`.ub-with-icon`	Icon aligned to the first line of text.	None
`.ub-cq`	Marks a container for container queries.	None
`.ub-table-wrap`	Scroll container for wide tables.	None
`.ub-band`	Full-width page section that carries its own ground.	None
`.ub-display`	Display-size headline for one short phrase (six words at most).	None
`.ub-lead`	The paragraph that says what the page is for.	None
`.ub-icon`	Inline SVG icon from the page's Lucide sprite.	None
`.ub-button`	The action control.	btn, cta
`.ub-icon-button`	A button that shows only an icon.	icon-btn
`.ub-field`	A label, a control, help text, and an error message.	None
`.ub-input`	Text input, select, or textarea.	text-field, textbox
`.ub-check`	Checkbox or radio with its label.	checkbox, radio
`.ub-switch`	On and off for one setting that applies immediately.	toggle
`.ub-segmented`	A small set of mutually exclusive views or values.	segmented-control, toggle-group
`.ub-fieldset`	Groups related fields under a legend.	None
`.ub-panel`	Groups one task's content with a title and optional actions.	card, box, tile
`.ub-dl`	Label and value pairs, value next to its label.	description-list, key-value
`.ub-callout`	A message with a status: full border, tinted ground, icon, and a word.	alert, banner, notice
`.ub-table`	Data table sized to its contents, headers on one line, numbers right-aligned.	None
`.ub-sort`	The button inside a sortable column header.	None
`.ub-stat`	One sourced figure with a label, an optional change, and its basis.	metric, kpi
`.ub-stats`	A row of two to four stats divided by hairlines.	None
`.ub-figure`	A figure, diagram, or image with a caption and a required source line.	image, diagram
`.ub-badge`	A short status or count.	tag, pill, label, chip
`.ub-chart`	The frame every chart sits in: title, subtitle with units, plot, legend for two or more series, source line.	chart-frame, graph
`.ub-map`	Frame for a Leaflet map on OpenFreeMap tiles.	None
`.ub-tip`	A short CSS tooltip from data-tip.	tooltip
`.ub-popover`	Floating content opened by a button (popovertarget).	None
`.ub-dialog`	A modal dialog on the native dialog element.	modal
`.ub-drawer`	A dialog attached to one side of the screen.	sheet, tray, side-panel
`.ub-toast`	A short confirmation that disappears on its own.	snackbar, notification
`.ub-tabs`	Peer views of one dataset.	None
`.ub-accordion`	Sections that open one at a time, on details name.	None
`.ub-empty`	What is missing, what to do, and one button.	empty-state, zero-state
`.ub-skeleton`	A static placeholder block while content loads. No shimmer.	None
`.ub-spinner`	The only infinite animation in the system.	None
`.ub-progress`	Determinate or indeterminate progress, or a meter.	None
`.ub-appbar`	The full-width bar at the top of a page or app.	header, navbar, topbar
`.ub-nav`	A list of page links.	None
`.ub-sidenav`	A vertical list of sections or pages.	None
`.ub-app`	App shell: appbar on top, sidebar beside main.	None
`.ub-toolbar`	A row of controls above a table or view.	None
`.ub-code`	A code block with a copy button.	None
`.ub-skip`	Skip link to the main content.	None
`.ub-num`	Right-aligned tabular figure.	None
`.ub-nowrap`	Keeps a value on one line.	None
`.ub-sr-only`	Visually hidden, still read by screen readers.	visually-hidden
`.ub-muted`	Secondary text color.	None

Rules every page follows

These are the checks ub-check runs. Floor rules never have an exception. A Reflex rule can be waived once per page with a written reason.

Floor
ID	Rule
F01	Head block present, files pinned to an exact version
F02	No unknown `ub-` class
F03	No unknown `--ub-` token
F04	No other design system on the page
F05	No color literal outside tokens.css
F06	Fonts only through `--ub-font-*`
F07	No gradients and no gradient text
F08	No backdrop blur
F09	No scale on hover, press, or focus
F10	No panel or box inside another
F11	No colored stripe on one side of a box
F12	No icon tile above a heading
F13	No spaced-out uppercase labels
F14	No emoji outside content
F15	No em-dashes
F16	No placeholder text, names, or image hosts
F17	No accent bar under or beside a heading
F18	No background image or pattern on the page or a section

Reflex
ID	Rule
R01	Spacing, radius, and z-index from tokens
R02	Headings and paragraphs aligned left
R03	No row of three or more identical cards
R04	No 01, 02, 03 section markers
R05	The spinner is the only infinite animation
R06	No bounce or elastic easing
R07	No `!important` in page CSS
R08	Every CDN file pinned and hashed
R09	Charts colored only through the bridge
R10	Warning colors only in status UI
R11	Brief card in the page head
R12	A figure with %, x, or + has a source
R13	No numbered scale tokens in page CSS
R14	One solid accent button per section

Copy

Plain, literal, and short. Name the thing; say what happened; say what to do.

Element	Rule	Example
Page headline	What the page is or does, under 10 words	Open requests by team
Section heading	Name the contents in one to three words	Overdue requests
Button	Verb and object, sentence case, three words or fewer	Export CSV
Never on a button	Submit, OK, Click here, Get started, Learn more	Read the fee schedule
Empty state	What is missing, what to do, one button	No invoices yet. Add one to start tracking.
Error	Field, problem, fix; no apology or blame	Email address must include @.
Success	Past tense, names the object, no exclamation	Request 2213 assigned to Permits.
Destructive confirm	Title names the object; the button repeats the action	Delete 3 requests?
Loading	Say what is loading	Loading requests
Numbers	Units in headers, one date format, a source for every figure	Revenue (USD); $15/match
Terms	One noun per thing across a product	Request everywhere, never ticket or case

Also banned: em-dashes, buzzwords (seamless, supercharge, world-class, unlock, elevate, streamline, empower), aphorism cadence such as "Less X. More Y.", invented numbers, a subtitle that repeats the title, lorem ipsum, and the brand claiming feelings. Serial lists take the Oxford comma.

Starters

Five page structures, so pages built on the system do not all share one shape. Copy the starter that fits, then replace the sample content. None has a hero, a card row, testimonials, pricing, or an FAQ block.

Starter	Preset	Structure
argument	standard	Headline that states the claim, evidence beside it in a 7 to 5 split, sections on alternating grounds, sourced figures
article	reading	One column at the prose measure, contents list, notes in the margin on wide screens
tool	tool	App shell: top bar, sidebar, toolbar, table, and a detail drawer
report	report	Title block with as-of date and source, up to four stats, tables sized to content, a chart, and notes
form	standard	Narrow page, fieldsets, inline validation, an error summary, and a confirmation state

Examples

Three finished pages built from the starters. The explainer and the report use real public data with citations; the tool uses sample data.

Example	Preset	Data
How to tell three penguin species apart	standard	Palmer Penguins, CC0
Freezer samples	tool	Sample data
Renewable share of electricity, 2000 to 2025	report	Our World in Data, CC BY 4.0

Signature moves

Every page picks one and records it in its brief card: an oversized sourced figure, an inverse band, an accent band, a side-by-side comparison table, a margin column, a large index list used as navigation, an annotated diagram of the page's own mechanism, or a real screenshot at native size.

Files

Every file in a version folder is immutable and served with Access-Control-Allow-Origin: *, so pages on any domain can link it. Client demos copy the folder into their own deploy instead of linking this host.

File	Pinned URL	Integrity
tokens.css	https://unbranded.seantippen.com/1.0.0/tokens.css	sha384-XDeiGpxMH40GoET+QMRWCAR5eq1KmvHub/TMCLGlumygsWgGzX7BB89qEK7gSAF2
components.css	https://unbranded.seantippen.com/1.0.0/components.css	sha384-SKo2Dp7MntS9/kGGp647kNZZWg7YuCN3WaxZb1oIG+mvmBq+bEnXhadFdj5L+qLP
ub.js	https://unbranded.seantippen.com/1.0.0/ub.js	sha384-KBr0JNa28XlPRogXFivF133uGU0fVJDWyEt7mG+uwMHPlPQoJ3DYPmG4iAtD242u

File	Holds
SKILL.md	The contract for agents: the build loop, hard rules, head block, decision tables, and snippets
registry.md	Every component with its use, classes, variants, states, and knobs
registry.json	The same, plus every token name, for tools
versions.json	The current version and the integrity hash of each file
adapters/shadcn.css	Maps shadcn/ui variables and slots to Unbranded tokens for React apps
adapters/tailwind-theme.css	Tailwind v4 theme that replaces the default palette with tokens
favicon/	The default icon set for unbranded pages