Open Mafold

Agent rules

Most Mafold UI is written by agents. These rules keep every one of them on the same tokens, so what they build looks like Mafold without anyone fixing it after.

Give them to an agent

These rules apply whenever you write UI for Mafold: the app (web and phone), a card sent with {% mafold/html %}, a Mafold mini-app, or a page on a Mafold domain. Tokens and examples: https://mds.mafold.com

curl -o AGENTS.md https://mds.mafold.com/agents.md

Load the tokens

  • Web, cards and mini-apps: <link rel="stylesheet" href="https://mds.mafold.com/mds.css">. Every --mf-* token and .t-* type style is then defined, for light and dark.
  • Inside a card, the twelve colours (--mf-bg --mf-bubble --mf-float --mf-card --mf-text --mf-muted --mf-subtle --mf-border --mf-accent --mf-on-accent --mf-error --mf-success) are already injected and follow the reader's theme. The stylesheet adds the rest.
  • Code that can't read CSS: https://mds.mafold.com/mds.json holds the same values.

Color: tokens only

  • Never write a hex, rgb() or a named colour. Every colour is a token: surfaces --mf-bg (ground), --mf-card (cards), --mf-float (floating chrome), --mf-bubble (filled fields, incoming bubbles); ink --mf-text, --mf-muted, --mf-subtle; lines --mf-border; state --mf-error, --mf-success.
  • Quiet fills (hover, pressed, chips) are --mf-fill, --mf-fill-2, --mf-fill-3, never a lighter copy of some colour.
  • The accent is the reader's own choice. Use --mf-accent with --mf-on-accent for anything written on it, and --mf-accent-50 … --mf-accent-900 for tints. Small marks on light surfaces (a dot, a hairline) use --mf-accent-strong.
  • Charts use --mf-chart-1 … --mf-chart-6 in that order, never cycled. Charts with slots 4 or 6 carry visible labels.
  • Dark mode is automatic. Never write @media (prefers-color-scheme) or a second palette. If a pair looks wrong in dark, pick a different token.

Type: named styles only

  • Pick a whole style: font: var(--mf-type-body) (plus letter-spacing: var(--mf-type-body-tracking) for titles), or the class .t-body. Never set font-size, font-weight and line-height separately.
  • Styles: display 40 · title-1 30 · title-2 24 · title-3 20 · lead 18 · headline 17 · prose 16 · callout 16 · body 15 (the message size) · subhead 14 · footnote 13 · caption 12 · caption-2 11 · code 13 mono, with -medium / -semibold variants where listed on the site.
  • No half-pixel sizes (12.5, 13.5 …) and no weights outside 400 / 500 / 600 / 700.

Shape and depth

  • Radius: --mf-radius-xs 4 · sm 6 · md 8 · lg 10 · xl 12 · 2xl 14 · 3xl 16 · 4xl 20 · 5xl 24 · 6xl 28. Round is --mf-radius-full, never 99 or 999.
  • Spacing is the 4px grid: --mf-space-1 (4px) … --mf-space-16 (64px).
  • Floating chrome is glass: background: var(--mf-glass-bg) with backdrop-filter: blur(var(--mf-blur-glass)) saturate(1.7) for one-line pills, --mf-blur-panel for panels that cover half the screen.
  • Shadows are --mf-shadow-pill, --mf-shadow-card, --mf-shadow-card-hover.

Icons

  • Bare glyphs (lucide, stroke 2), one saturated colour each. Never a tinted square or circle behind an icon.
  • Row icons of 16–24px may use the diagonal gradient from the accent to one hue from --mf-hue-*, offset 0 → 1, never a hard stop. Large icons, banners, titles and big buttons stay one flat colour.

Components

  • Before building a control, look for it on the site and reuse its measures: switch 44 × 26, text field 48 tall (40 compact) with a 14px radius, message bubble 18px radius with a 4px tail corner, unread badge 16 tall.
  • One solid button per screen at most (--mf-solid with --mf-on-solid).