Work that actually wins the client.
Baselumen exists to give agencies production-grade work to build on — components that make a site feel considered and trustworthy the moment it loads, whole-site templates, and a print-accurate designer for the brand around it. Strong styling, user-first design, and the hard parts built properly.
Four things we refuse to compromise on.
Styling, the people using it, the hard parts and the print. Each one is a rule the library and the designer are held to.
-
Styling that actually lands
Every component ships pixel-considered — real type scale, hairline borders, tuned spacing, and a restrained accent system. Not a wireframe you have to finish. Drop one in and the page already looks designed.
-
User-first by construction
Built to WCAG AA — semantic markup, keyboard paths, focus states, ARIA where it counts, and reduced-motion respect. Light and dark from the same tokens. Your visitors get a product that feels considered, not decorated.
-
Sophisticated where it counts
Command palettes, animated pricing toggles, mega menus, comparison matrices, live status boards — the hard components, built properly. Variants are BEM modifier classes in every build, so a variant is a class, not a rewrite.
-
Print-accurate, not approximate
The brand work around a site is drawn to size. The designer measures artboards in millimetres with trim and bleed marked, starts from 9 presets from an 85 × 55 mm business card to A4, and exports SVG first, so the geometry reaches the printer and the site intact.
The hard parts, built. A variant is a class.
Command palettes, animated pricing toggles, mega menus, comparison matrices, live status boards — the hard components, built properly. Variants are BEM modifier classes in every build, so a variant is a class, not a rewrite.
- ⌘K command menu, animated tabs
- BEM modifiers in every build
- 185 components across every page section
Copy as
- Files 2 files SdfStatStrip.tsx sdf-stat-strip.vue sdf-stat-strip.svelte Markup + <style>, one paste
- Copy Copy HTML + Copy CSS Copy React Copy Vue Copy Svelte Copy for Terminal
Plain markup and a stylesheet. No build step and no dependencies — paste it into any framework or a bare page. One typed .tsx per component, carrying the same DOM and the same sdf- class names as every other build here. One .vue single-file component. Its styles ship with it, unscoped, so your --sdf-* overrides still reach them. One .svelte single-file component. Styles ship with it, unscoped, so your --sdf-* overrides still reach them. Markup and stylesheet as one block, shaped for the Terminal designer — paste it into its code panel.
What arrives already done.
The work on the left is what every build asks for. What Baselumen hands over is beside it.
- Resolve spacing, type and colour for every section
- Ships design-complete — spacing, type and colour already resolved
- Add accessibility after the fact
- Semantic and keyboard-ready from the first line, themed through tokens
- Build the hard sections from scratch
- Command menus, matrices and status boards, already built
- Port each block to every framework
- One component, shipped as HTML + CSS, React, Vue and Svelte from a single source
- Start every site from an empty folder
- 12 whole-site templates that import into Terminal without losing a section
- Redraw the logo and the cards for print, then again for the web
- One artboard in millimetres, exported as SVG and pushed to the site
Print-accurate. Not approximate.
The brand work around a site is drawn to size. The designer measures artboards in millimetres with trim and bleed marked, starts from 9 presets from an 85 × 55 mm business card to A4, and exports SVG first, so the geometry reaches the printer and the site intact.
- Artboards in mm, with bleed marked
- SVG first, PNG for print or screen
- Pushed straight to a Terminal site
Document
Counted when this page is built.
Build sites that win the pitch.
Nothing to install. Every component arrives with its styles and variables, and every design with its trim and bleed — ready to make your own.