One library, every build.
186 components with the same markup and the same sdf- class names in HTML + CSS,
React, Vue and Svelte, plus a single block for Terminal. Copy a card, open a component to read its
code, or let an agent fetch it. Templates, Component Studio, custom components, MCP and the CLI all
draw on the same source.
The library in numbers
Every build, one source. Picked once.
Every component is one card, whatever framework you work in. The build is a property of the copy, so it is a picker on the screen rather than a place in the navigation: switch it and every card hands over that file, with your scroll, filters and search kept.
- HTML + CSS is the canonical pair: markup and stylesheet, because they go to two places in a project. No build step.
- React is one typed .tsx, such as PricingComponent.tsx; where it imports a stylesheet, Copy CSS hands that over too.
- Vue and Svelte are one single-file component each, styles unscoped so your
--sdf-*overrides still reach them. - Terminal is markup, then a
<style>block: the shape the designer's code panel takes in one paste. - A component that does not ship the picked build says so on its card instead of disappearing.
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.
A component, opened up. Found from anywhere.
A component's page is a header row over one view that fills the window. Preview renders it from the same files you copy, isolated the way your own page would isolate it; Code shows each file exactly as it will be copied.
- The main button is Copy for Terminal; the menu beside it copies any other file, or opens Import to add the component to a Terminal site.
- The view and the build ride in the address, so a link opens on the file you were reading.
- The bar's Search components field opens the ⌘K palette on every screen, scoped to All, Components, Templates, Tools, Go to, Actions. Tab walks the scopes; recent picks come first.
- Search, category (13), collection and build live in the address too, so a filtered library view can be shared or reloaded.
Built to one set of rules. Restyled by tokens.
SDF is the set of rules every component is built to, so the library reads as one system and you can extend it without fighting the source. The cascade is the whole customisation model: no config files, no theme objects, no !important.
-
Class names that say what they target
Every class is sdf-{block}__{element}--{modifier}, so none collides with the generic names already on your site.
-
Variants as modifiers
Classes such as --primary, --dark, --featured and --compact work the same in every build but React, which may take a prop.
-
Semantic markup, structured data
Sections, articles, nav; buttons for actions, links for navigation. The pricing tier carries schema.org Offer and the FAQ carries FAQPage.
-
WCAG AA as the target
Visible focus, 4.5:1 for body text and 3:1 for large, keyboard use, ARIA for tabs and menus, prefers-reduced-motion in every stylesheet. The last two versions of Chrome, Edge, Firefox and Safari.
-
30 shared tokens
--sdf-* custom properties for colour, type, radius and easing, each read with a fallback. 42 of 186 components read at least one; 36 also read 244 tokens named after them. 26 ship a --dark modifier.
-
The Attributes reference
Every token, class convention and state hook (is-open, :focus-within, aria-expanded, aria-selected="true", <details open>), counted from the component files themselves. Each row copies.
Into Terminal, three ways. Pinned to a site.
Terminal is Stacklumen's site designer, and every part of the component system has a door into it. Copy for Terminal hands over one block for the code panel. Import pins a set of components to a site's shelf, where the designer places them again and again. A template opens as a whole new site.
- Pick a site, switch components on, and Save to site; they appear under Insert → Marketplace.
- Saving is a diff: switching one off removes it from the shelf, and pages that use it keep it.
- Agents pin and unpin over MCP with the same ids, custom components included.
Import
Component Studio. Your own beside the library.
The Studio puts the library, an artboard and a generator side by side. Pick an entry and it goes on the artboard, sandboxed, at 375, 768 or 1280 pixels in Select, Preview or Code. Generate writes a typed, accessible starter scaffold in the library's conventions; it calls no AI model, and the copy is recorded as coming from the Studio.
- The library column searches as you type, narrows to React builds, and lists what the workspace picked up recently.
- A custom component is the workspace's own: a name, a category, markup and CSS. An agent creates one, forks a library component into one, and edits it with whole fields or exact find-and-replace edits.
- Limits
- 500 custom components per workspace, 256 KB of markup and of CSS each, both sanitised on the way in.
- Ids
- custom:<uuid>, which pin_components takes beside library slugs.
- Previews
- Served from their own route with a sandboxing policy, so a component’s markup never runs with the app’s origin.
Agents use the same catalog. So will the CLI.
Baselumen speaks MCP over HTTP. An agent signs in, or carries a bl_ token from Agents & API
keys, and works on the library the way a person does: it searches, fetches a build, saves custom components
and pins them to a Terminal site. A fetch through MCP is a copy, recorded as one.
- 14 tools for components and templates, 5 of them write: search_components, get_component, list_templates, get_template, list_design_tokens, list_custom_components, get_custom_component, create_custom_component, update_custom_component, fork_component, list_sites, get_site_pins, pin_components, unpin_components.
components:readto search, fetch and list;components:writeto create, fork, edit and pin. A token can be narrowed to one client.- The
baselumenCLI is in active development and not released yet:add,list,search,templates,tokens,initandbaselumen mcpon the same catalog. Until it ships, any MCP-capable agent reaches it with a token.
The free set, and the full library.
Browsing, the live previews and the HTML + CSS of every component are open to every plan. The plan decides the rest: the React, Vue and Svelte builds, template downloads, the Studio, and anything fetched through MCP or the CLI.
-
Free
The free set in every build: 24 components chosen as a starter kit, from the bar and the hero to the form and the footer, and the Meridian and Kestrel templates.
-
Pro and Agency
Every component in every build, every template, MCP and the CLI.
-
Today
Baselumen is in private alpha: billing is not switched on, so a signed-in account uses all of it, and nothing is charged.
The smaller pieces. Each one in the app today.
-
A build a component lacks
Pick a build a component does not ship and its card says so, rather than leaving the grid. 1 component ships in React only.
-
The collections menu
Narrows the grid to the SDF base or one collection, with counts that add up to what is on screen: SDF base 98 · Northwind 27 · Bricklumen 33 · Foliotype 28.
-
The Libraries menu
Components, Templates, the Marketplace, Component Studio, Custom components and Import, under one item in the bar.
-
Updates to what you copied
When components your workspace copied change, the bar says so, and copying them again picks up the fixes.
-
What a header tells you
The category, the collection outside the SDF base, Free for the free set, and the weight of the framework-free pair (8.8KB for sdf-pricing).
-
Tabs that never wrap
The category tabs fold whatever does not fit into More and unfold again as the window grows. There are 13 categories.
How it connects. One account, every system.
- The template system 12 whole Astro sites from the same system, previewed page by page and opened in Terminal as a new site.
- The design system Print-accurate artboards in millimetres, vector tools, and a push to a Terminal site’s assets.
- The tool system Converters and generators that run in the browser, and graders that audit a live page and hand back a report.
- The platform One app, one account and one plan for the components, the templates, the designer and the tools.
- Terminal Stacklumen’s site designer, where pasted blocks, pinned shelves and templates become published pages.
Take the library into your next build.
Every component in every build, the templates, and the tools to fetch them from anywhere.
Private alpha: billing is not switched on