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/. Both are build output: in a clone, run bun run build:dist, bun run build:js and bun run build:themes before opening a page.

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 - twenty illustrated figures on the spacing scale, the layout primitives, and rhythm versus 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
Order management - one state at three levels (a badge in a selectable list, a message in context, a notification with its own action) composed on the admin-neutral business-interface theme
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
Modal patterns - eight application modals, each the modal surface plus the smallest application CSS it needs
Workspace settings - plans with visible native choices, preferences and segmented tabs
iOS-style settings - iOS-like controls and grouped settings from unchanged framework markup, a local theme, and its findings listed rule by rule
Card compositions - editorial, team, sign-in and horizontal cards composed from existing primitives
Neo-brutalist - a risograph print studio on the neo-brutalist theme (order alerts, plus-marker FAQ, ruled testimonial grid, docked cookie banner) with the page loading its own fonts
Register form - registration page with choice cards, masks, the password toggle, tel-prefix validation, an OTP verification dialog, and status feedback

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.

Contrast contexts - the page, data-theme islands, a card island, a named theme and an application-painted band side by side, with every intent variant, a full form (combobox and date picker included) and focus line measured live, plus joined fields that need no focus adaptation
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
Tooltips - generated text is a snapshot at show time: what updates, what stays, and the explicit-tip way for dynamic content

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)
Date fields - a native date input, a masked text field and an external date picker on Actual tokens, side by side
File upload - the native file input, Dropzone rendering its file rows as Actual components, and FilePond on Actual tokens
Diagrams - Mermaid timelines, Gantt charts and flowcharts drawn by Pele through a small web component, on Actual tokens

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.