Examples

Real pages built with Actual CSS to see the primitives, components, and patterns composed the way they are meant to be used.

The examples live in the repository under demo/ and load actual.full.css and actual.full.js from dist/, plus the theme palettes bundle from demo/assets/. The bundle is committed and regenerated by bun run build:themes, so the pages open from a fresh checkout.

Templates

demo/templates/ are standalone pages. The first three explain the system; the rest show it composed, isolated, or under stress.

Start here

Visual guide - seventeen illustrated figures on the spacing scale, the layout primitives, and density versus local size
Color guide - theming principles measured live on ocean and sunset, in light and dark, as data-theme islands
Kitchen sink - one-screen test bed for themes, scopes, variants and interactions

Page shapes

Whole pages, composed the way a real product would.

Dashboard - data-heavy overview page
App - application shell with sidebar
Workspaces - sectioned sidebar, master/detail list with native current state, and workspace cards
Marketing - landing page with typography and fluid type
Blog - article page with prose
Settings modal - two-pane preferences dialog, with the local CSS it needs audited rule by rule
Workspace settings - plans with visible native choices, preferences and a local segmented tab treatment
Card compositions - editorial, team, sign-in and horizontal cards composed from existing primitives

Layout references

One mechanism at a time, with its contract and its pitfalls.

Layout reference - canonical compositions built only with the layout primitives
Blocks - layout building blocks
Grid density - the grid contracts on resizable stages, with the pitfalls called out
Column layout - the twelve-column canvas: spans, starts, and the narrow-container recomposition the framework leaves to the application
Density - compact control density

System benches

Contracts you cannot read off a static screenshot: state, motion, focus, and extension points.

Surface contracts - .inverted, cascade precedence, and the intent boundary
Presence motion - status bar, tooltip, flyout, modal and drawer replayed side by side, with easing swaps and a reduced-motion simulation
Keyboard controls - hands-on keyboard support matrix and focus test bench
Adaptive filter surface - app-level flyout/drawer composition with one synchronized filter state
Select intents - extending the enhancer with a project's own data-enhance behavior, injected markup included, with no framework change
Popover transport probe - self-scoring bench for the native popover transport go/no-go

Third-party components on Actual tokens

Data grid - an external data grid component themed with Actual tokens (sort, filter, search, selection)
Combobox - an external combobox themed with Actual tokens (search, tags, autocomplete)

Sites

Full sites demo living in demo/sites.

Mobile PWA

Actual Tasks is a mobile task demo with one bottom/side navigation landmark, application lists, tabs, dialog validation, project cards, an activity feed, loading and empty states, theme preferences, switches, and passive status feedback. Its local stylesheet includes a rule-by-rule framework friction audit.

Admin application

demo/sites/admini/ is a complete admin interface: application shell, navigation, tables, forms, dialogs, and feedback states.

Dashboard - app shell, navbar, stat cards, quota meter, recent activity
Login - centered auth card with social actions
Forms - inputs, choice cards, validation, joined controls
Tables - data tables, status badges, right-click row actions
Kanban - drag-and-drop columns with card context menus
Chat - conversation list, message thread, composer
Calendar - month grid with event chips and month navigation
Invoice - structured document layout, print styles
Profile - avatar header, tabs, activity feed
Settings - vertical tabs, validation, confirmation dialog
User grid - avatar grid with live search and role filter
404 - error state

Neon ramen

demo/sites/neon-ramen/ is a complete restaurant storefront: campaign home, menu browsing, item customization, locations, and checkout validation flow.

Home - campaign landing, hero story, live cart summary
Menu - tabbed categories with equal-height product cards
Item - product configurator with choice cards and form controls
Locations - responsive shop list with practical location metadata
Order - checkout form with validation feedback states

Note: the examples reference the repository's source files, so they open from the checkout, not from a standalone copy of site.