Components, templates, design and tools for agentic work Private alpha · free for now

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

Components
186
HTML + CSS
185
React
186
Vue
185
Svelte
185
Terminal
185

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

Build 185 components 186 components 185 components 185 components 185 components
  • 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.

The library’s Copy as picker: one card, every build. Switching it changes what every card hands over, not which library you are in. The drawing is the Baselumen component library with the sdf-stat-strip card and its source. Choosing React, Vue, Svelte or Terminal changes the card's copy button to Copy HTML and Copy CSS, Copy React, Copy Vue, Copy Svelte, Copy for Terminal, and the code beside it to that build's file.

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

Collection
Import: switch components on for a Terminal site, and Save to site puts them on its designer shelf. Saving is a diff, so switching one off takes it off the shelf. The drawing is Baselumen's Import screen saving to the site Northline Dental: collection pills counting what is picked of each collection's 186 components in all, a grid of component cards each with an include switch, and a save bar that says how many components are selected and whether there are unsaved changes. Saving shows a note that the components are on the site's shelf in the Terminal designer, under Insert, Marketplace, Imported from Baselumen.

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:read to search, fetch and list; components:write to create, fork, edit and pin. A token can be narrowed to one client.
  • The baselumen CLI is in active development and not released yet: add, list, search, templates, tokens, init and baselumen mcp on 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.

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