Lumen
AI product landing page
Hero, feature cards, a scrolling row, pricing and an FAQ. Shows the
bed as a showcase surface and the disclosure group.
Four products, one system.
Each of these is a complete interface built from Niveus and nothing else.
They look like different products because they are — but none of them
overrides a component, forks a token, or writes a color. What differs is
one declaration of --nv-brand, and the
layout each one needs for its own content.
Open any app.css beside them: it contains
grids, widths and breakpoints, and not a single hex value. That split —
the system owns the language, the application owns the layout — is the
thing these examples are really demonstrating.
Lumen Chat
AI chat application
A full app shell: sidebar with travelling selection, a transcript that
cross-fades between threads, a composer, and settings in a dialog with
tabs.
Northwire
IT hardware shop
Filters, a product grid, stock states in the status colors, and a
basket in a dialog with a table. Same components, warm brand.
Northwire Ops
Monitoring dashboard
Stat tiles, a chart drawn in semantic colors, a service table with
per-row menus, and tabs that filter it. The densest test of the system.
How to read these
Every example links exactly two files from the system —
dist/niveus.css and the optional
niveus/niveus.js — then its own
app.css for layout. Nothing else is shared
between them.
Where one of them needed something the system did not have, the answer was to add it to the system, not to the page: the badge and table components exist because these examples asked for them.