Let's begin
Everything you need to start with MDS on one page: what it is, how to load it, how agents use it, and where colour and type come from.
Why MDS
One source
Every colour, size, radius and shadow is written once, in tokens/tokens.ts. The CSS and JSON on this site are generated from it, never typed by hand.
Built for agents
Agents write a lot of Mafold UI: cards, mini-apps, the app itself. They read one rules file and the same --mf-* names cards already use, so they stop inventing values.
Dark mode by default
Components read meanings (bg, card, text, border), not colours. The scheme flips them: data-theme on <html>, or the system setting when nothing is chosen.
One accent, re-tinted
People pick their accent in Appearance. Every accent step on this site is mixed from that one value, so changing it re-tints the whole system.
Two skins, one vocabulary
The product skin and the cream front of house map onto the same names. A component never asks which skin it is in; data-skin decides.
Measured against the app
A test holds the product values byte-equal to what mafold-web and the phone app render today. Component pages show the app's version beside the reference style.
Installation
MDS is one stylesheet. Link it and every --mf-* token and .t-* type style is there, in light and dark.
<link rel="stylesheet" href="https://mds.mafold.com/mds.css">Native code and agents that can’t read CSS get the same tokens as data:
curl https://mds.mafold.com/mds.jsonAgent rules
Claude Code, Codex and the agents that send cards all follow one rules file: tokens only, named type styles, the radius scale, bare glyph icons. Drop it next to the code they work on.
curl -o AGENTS.md https://mds.mafold.com/agents.mdWhat's inside
From the app
Avatar, badge, button, message bubble, pill, spinner, switch, text field and typing dots, measured from what the app ships today. Each page puts the app's version beside the reference style.
New in MDS
The segmented control and 4 charts: activity rings, active days, bar chart, radial score. Mafold had none, so they follow the reference style, on Mafold tokens.
Color
Colour is semantic: text, surfaces, borders and charts each read a token, so dark mode is automatic. The accent ramp below is mixed from one value. Pick a swatch and it re-tints this whole site.
Typography
Type ships as named styles that set size, weight, line height and letter spacing together, so text is picked whole and never assembled from parts.
.t-title-1.t-title-2.t-headline.t-body.t-caption-semiboldLayout and chart styles follow BoardUI. Every line of code here is Mafold’s own.