The canvas
Select, drag and type on the page itself, with a hundred steps of undo. Motion holds still here, so you design the finished frame.
Behaviour built in. The rest is yours.
The Stacklumen design system is what every Terminal site is built from: components, styles and a library of templates. A menu opens, folds and closes the way it should, and what goes inside it is yours. You set styles visually, edit in the designer or in StackIDE, and every page ships as plain HTML and CSS.
Where you work
Same edits
The design system
Built from it
What ships
- The canvas Select, drag, type
- StackIDE HTML and CSS
- A repository Read, never run
- Agents Over MCP
- Templates And the library
Your site One source
- Components
- Behaviour built in
- Content
- Anything inside
- Styles
- Breakpoints, states
- Variables
- Light, Dark, modes
- Collections
- From the CMS
- Motion
- Interactions, states
- Custom code
- Embeds, sandboxed
- The canvas Holds still
- Preview Runs, sandboxed
- Published site HTML and CSS
- GitHub Files, pull requests
- Design tokens CSS and JSON
Every panel edits the same site. Nothing drifts apart.
The canvas, the inspector, StackIDE and everyone else in the site work from one source, so they always agree.
The inspector
Style one element, a class or a combination of classes, at any breakpoint and in any state. Styles cascade down from Desktop.
Classes and variables
Reusable classes, and named colours, sizes and fonts with Light, Dark and modes of your own.
Components
Save a section once and every placement follows your edits. Props let one placement differ without unlinking it.
Code in StackIDE
The page as HTML and its styles as CSS, in a folder on your computer. What you save becomes the same edits the canvas makes.
Together, live
Everyone in a site edits it at once. Changes merge as they arrive, so two people on different things never overwrite each other.
Preview
The page as publishing renders it, with interactions, motion, dark mode and forms running, in a sandboxed frame.
Publish
The saved site becomes static pages, served as a snapshot. Recent deployments are kept, and any of them can be restored.
Fixed where it works. Free where it’s yours.
A component fixes only the parts its behaviour runs on: a menu’s button and the drawer it opens, a tab and its panel, a form and its send button. Everything inside them is yours, any element HTML allows, styled any way you like.
- Navigation bars
- The bar, its menu button and the drawer it folds into on a phone. The logo, links and buttons inside are yours.
- Dropdowns and mega menus
- A toggle and the panel it opens, closing on Escape, a click outside or a link. The panel holds anything a page can.
- Tabs and accordions
- Each tab keeps its panel and each question the answer it opens. What a panel or an answer says is up to you.
- Dialogs and lightboxes
- An open button and the dialog it opens. The dialog holds any content, other components included.
- Sliders
- A track and its slides. Each slide holds whatever you put in it.
- Forms
- A form and the button that sends it, with every submission kept in the site’s Forms page. The fields, the layout and the wording are yours.
- Sections, cards and containers
- Plain containers that hold any element HTML allows, so a layout is never limited by the component it sits in.
- Styles
- Every part takes your classes and your styles, at any breakpoint and in any state, set in the inspector.
Motion is part of the page. Still while you design.
Interactions, states and scripts belong to the element they act on, set in the inspector. They travel with it wherever it goes: a copy, a component, a publish.
Interactions
A trigger — a click, a hover, the page loading, or an element scrolling into view or past — and an effect on one element or many: show, hide or toggle it, toggle a class or an attribute, play an entrance or an animation, scroll to it or follow a link. Menus and panels close on Escape, a click outside or a link, and can take turns in a group.
Entrances
Fades, slides from any side, scales and pops, each with its own duration, delay and easing, and staggered across a set. Run one once or every time, and reverse a hover when the pointer leaves.
States and transitions
Hover, focus and active styles for an element or a whole class, eased by transitions you set in the inspector.
Keyframe animations
A site’s keyframe animations, written by hand or brought in by an import, are tables you edit stop by stop, each stop with its own easing. The inspector shows where each one plays on the page, including those tied to scrolling.
Where each one runs
| On the canvas | In Preview | On the published site | |
|---|---|---|---|
| Entrances | Not played, so you see the element as it settles | Play | Play, and appear at once for visitors who ask for less motion |
| Keyframe animations and transitions | Held still, so you design the finished page | Play | Play |
| Interactions | A click selects; nothing triggers. A closed panel opens while you select it | Run | Run |
| Scripts | Listed and edited in the inspector, never run | Run in a sandboxed frame | Run with the page |
| Custom code | Drawn in a frame with its scripts switched off | Runs in a sandboxed frame | Runs with the page |
One site. Plain HTML and CSS out.
What leaves Terminal is built from the same site, so Preview and the live site agree, and a file in a repository says what the canvas says.
Live
The published site
Plain HTML and CSS, with only the script interactions and forms need: static pages, collection item pages and a sitemap, minified, with fonts and the first image loaded early. Served as a snapshot you can roll back.
Live
Preview
The same build in a sandboxed frame, before anything is live, at any width and in any mode.
Live
Files on GitHub
A push writes the site’s pages as HTML and its styles as CSS to a linked repository, as one commit.
Live
Design tokens
Variables leave as CSS custom properties or design-token JSON, every mode included.
In progress
Framework exports
The same site exported as a component project for the common frameworks, with its tokens beside it.
Bring a codebase in. Send your edits back.
Link a repository and import its pages. They land as the design system’s own elements: sections you can select, text you can retype, classes you can restyle.
-
Read
Pick the pages you want. The repository is read from GitHub, in one download when that is quicker, and only the files those pages use are kept. Nothing in it is built or run, and each stage shows as it goes.
-
Compare
When the repository names its website, each page is checked against what that site serves, so the words that land are the words visitors see.
-
Translate
Pages, layouts and components become sections and elements. Styles land in the site’s stylesheet, content folders become collections, and images move into Assets.
-
Keep the motion
Keyframe animations, transitions and hover styles come across, and utility classes become plain CSS. Accessible menus and tabs and common scroll reveals become built-in interactions, and the site’s own scripts come in as scripts you can read and edit.
-
Propose it back
Edits to pages read from source go back as a pull request: the smallest change to the file and line each element came from.
What the import could not bring in, such as a script too large to carry, is listed in its report with the file it came from.
Safe by construction. Not by review.
The design system decides what a page can hold, so whatever arrives, from a person, an import or an agent, passes through the same rules.
- An allowlist, not a blocklist
- A page holds only the elements and attributes the design system allows. Inline event handlers are never among them.
- Agents work the way people do
- An agent places a component, fills it and styles it with the same edits the designer makes. Raw code needs a key that allows it, and every style value is checked before it is stored.
- Custom code stays out of the editor
- On the canvas, embedded code is drawn in a frame with its scripts switched off, and a page’s scripts are only listed in the inspector. Scripts run only in Preview’s sandboxed frame and on the published site, never in a site card’s thumbnail.
- A sandboxed Preview
- Preview renders in a frame with no access to the editor, your session or your workspace. Staging links serve under a sandbox policy too.
- Interactions change state, not code
- An interaction can show, hide, toggle a class or an allowed attribute, animate, scroll or follow a link. It cannot add a script or an event handler to the page.
- Clean drawings
- Imported SVG is cleaned as it comes in, so a drawing cannot carry script.
A site saved by an earlier designer Brought up to date as it loads Opens in today’s designer
A save made over a newer one Held until you choose which to keep
How we handle your data, sign-in and hosting is on the security page.
Designed and built here. Every layer of it.
The components, the library, the designer, repository import and publishing are designed and built by Stacklumen. Your editable site stays in your workspace on our servers; what ships to visitors is the finished pages, nothing more.
- The components
- Navigation, menus, tabs, dialogs, sliders and forms, each with its behaviour built in and room for anything inside.
- The library
- Templates built from the same components, installed only into a workspace entitled to them.
- The designer
- The canvas, the inspector and live editing, with StackIDE on your desktop, all working on the same site.
- Repository import
- Reads a repository’s pages, styles, scripts and content without running any of it.
- Publishing
- Turns a site into Preview and the published pages, minified and ready to serve.
There is nothing new to learn: you work on the canvas, in HTML and CSS in StackIDE, or through an agent.
Still being built
See the design system at work.
Open Terminal and start a site, or link a repository and watch its pages land as something you can edit. The documentation covers every panel.