Open Mafold

Installation

MDS is a stylesheet and a JSON file, both generated from one source. Pick the door that fits what you are building.

One file defines every token for light and dark, plus the .t-* type classes. No build step, no runtime.

<link rel="stylesheet" href="https://mds.mafold.com/mds.css">

Then write with tokens only:

.card {
  background: var(--mf-card);
  color: var(--mf-text);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius-3xl);
  padding: var(--mf-space-4);
  font: var(--mf-type-body);
}
.card h3 { font: var(--mf-type-headline); }
.card .meta { font: var(--mf-type-caption); color: var(--mf-muted); }

In a card

Cards already receive the twelve colours and follow the reader’s theme. Link the stylesheet for type, radius, spacing and the accent ramp; the injected colours win where both define one.

{% mafold/html %}
<link rel="stylesheet" href="https://mds.mafold.com/mds.css">
<div style="background: var(--mf-card); border-radius: var(--mf-radius-3xl); padding: var(--mf-space-4)">
  <p class="t-headline" style="margin: 0; color: var(--mf-text)">Deploy finished</p>
  <p class="t-footnote" style="margin: 4px 0 0; color: var(--mf-muted)">2 min · 0 errors</p>
</div>
{% /mafold/html %}

As data

Native code, scripts and agents that can’t read CSS get the same values, with the light and dark sets side by side.

curl https://mds.mafold.com/mds.json

Theme and accent

With no choice made, the system setting decides the scheme. To pin one, set data-theme on <html>. The front-of-house skin is data-skin="front", on the page or on any subtree.

<html data-theme="dark">        <!-- or "light"; omit to follow the system -->
<section data-skin="front">     <!-- cream ground, same token names -->

The accent is three variables: the colour, the ink that sits on it, and the stronger mark for small details on light surfaces. Set all three; every --mf-accent-* step is mixed from the first.

:root {
  --mf-accent: #8b5cf6;
  --mf-on-accent: #ffffff;        /* charcoal #1D1C1B on pale accents */
  --mf-accent-strong: #8b5cf6;    /* pale accents: 78% accent + 22% charcoal */
}

Changing a token

Tokens live in mafold-design-system/tokens/tokens.ts in the Mafold monorepo. Edit the value there and regenerate: the stylesheet, the JSON and this site all follow. A test fails if the generated files are stale, or if the product values stop matching what the web and phone apps render.

cd mafold-design-system
pnpm tokens      # writes src/styles/tokens.css, public/mds.css, public/mds.json
pnpm test        # generated files current, product values equal to web + phone