Documentation
Two Systems — One Vision
Mark is the design system; Accent is the CMS. They are built from the same partials — so the reference below documents one set of pieces, read two ways.
The reason
Most design systems are a second copy of the site.
Two artifacts describing the same thing, maintained by different people, drifting a little every week.
A documentation site renders its own version of a button. The product renders another. They agree on the day they are written and disagree forever after, because nothing forces them to be the same object.
Here they are the same object. Every specimen on these pages is the partial rendering itself, with the demo data written in its own frontmatter. There is no second copy to keep honest — change the partial and the documentation changes, because the documentation was never a description in the first place.
The same block goes to the CMS. A partial declares its fields once, and that one declaration is what the docs read to build a contract table and what the editor reads to build a form. An author gets exactly the controls the component has, because there is nowhere else for them to come from.
The concept
Three moves on the engine.
Mark sits on Bootstrap. Every piece here does one of three things to it, and the class name records which — so you can always tell whose behaviour you are looking at.
Adopt
Take the engine’s component as it stands. The class keeps its plain name, because the mechanism is not ours and pretending otherwise helps nobody.
Re-default
Keep the mechanism; change what it does when you ask for nothing. The carousel ships still and steerable — motion is a thing you request, not a thing you switch off.
Replace
Build it when the engine has none. An mk- prefix says the mechanism is Mark’s own — the rail and the card carousel are scroll-snap, not a carousel library.
The rule underneath
The bare default is the mechanism, plus the way to drive it.
A component with no options should already be finished. Not a starting point waiting for a variant to rescue it, and not a showcase running every feature it owns — the useful thing, and the controls to use it.
So the carousel’s default is arrows and nothing else. It does not auto-advance, because motion nobody asked for is a decision made on the reader’s behalf. It does show arrows, because a slider you cannot steer is a puzzle. Everything beyond that — indicators, crossfade, captions, autoplay — is something you ask for by name.
The same rule explains the utilities. There is a small curated layer of them, and one law: a utility names a role, never a value. Nothing here is styled by spelling a colour into the markup, which is why a theme can rebind the whole palette at runtime and no page needs editing.
How it is stacked
Four layers, each built from the one below.
What it adds up to.
Every one of these renders its own documentation.
- Partials
- 50
- Layers
- 4
- Field contract
- 1
- Build steps to adopt
- 0
Start reading
Every component, rendered from its own demo data.
The documentation is the system running. Pick a layer and watch it render itself.