The design system

A generic, reskinnable design system written in Simple CSS, plus the application shell that uses it. Everything is compiled by MMO\client\SCSCompiler — no sass, no node, no build step outside php.

These pages are the exhaustive listing: every class the system paints, every variant of it, and the html that produces it. Each specimen shows the live thing and its source together, so what you copy is what you saw.

How to read a specimen

Every example on these pages is an <mmo-specimen>. The example itself is the element's own light dom, shown through a slot — so it is painted by the document's stylesheet, which is the only place these classes exist — and the code panel is that same markup read back, which is why the two can never disagree.

and its html, under it

Control	What it does
	cycles the ground: surface, the page ground, then ink — what looks right on white can vanish on ink
	folds the html away, or brings it back
	copies the html

Use it in a page of your own the same way — it takes label, note, ground, layout (row, column, grid, block) and code:

<mmo-specimen label="Tones" note="one filled recipe, six hues"> <button class="primary">Save</button> <button class="error">Delete</button> </mmo-specimen>

The pages

Page	Compiled from	What it lists
Tokens	`src/styles/tokens.scs, dark.scs`	colour, space, radius, type, weight, line, shadow, motion, z, layout
Typography	`src/styles/core.scs`	headings, text, links, code, lists, details, figures, focus
Buttons	`src/styles/parts/buttons.scs`	tones, shapes, sizes, states, groups
Forms	`src/styles/parts/forms.scs`	the control box, every input type, validity, form layouts
Tables	`src/styles/parts/tables.scs`	the document table, the data grid, tools, pager, empty state
Lists	`src/styles/parts/lists.scs`	lists, menus, trees, toc, breadcrumbs, pagers
Chrome	`src/styles/parts/chrome.scs`	cards, panels, widgets, tabs, tags, callouts, overlays, toasts, loading
Utilities	`src/styles/utilities.scs`	flex, fractions, layout helpers, text, tones, print
Prose	`src/styles/parts/prose.scs`	the long-form column
Marketing	`src/styles/parts/landing.scs`	hero, bands, stats, features, steps, plans, faq, footer
Editorial	`src/styles/parts/blog.scs`	blog hero, chips, post cards, newsletter, article, rail
For elements	`src/styles/lib.scs, controls.scs`	every @fn and @style a shadow root uses

Two entry points

And the difference matters. A shadow root never sees the document's css, but it does inherit its custom properties: the document declares the tokens once, and an element only references them.

	compiled into	emits `:root` tokens	used by
`styles.scs`	`{bin}/mmo.client.css`	yes	the document, once
`shadow.scs`	inlined in each element	no	every element `<style>`

The cascade

The order of styles.scs is the cascade: tokens, then element defaults, then components, then the utilities that must be able to win over a component.

@import "shadow.scs"; // tokens + lib + controls -- no output, just declarations @import "dark.scs"; // the dark overrides @import "compat.scs"; // the --mmo-color-* / --mmo-size-* names the sass system used @import "core.scs"; // reset and element defaults @import "parts/buttons.scs"; @import "parts/forms.scs"; @import "parts/tables.scs"; @import "parts/lists.scs"; @import "parts/chrome.scs"; @import "parts/prose.scs"; @import "parts/landing.scs"; @import "parts/blog.scs"; @import "utilities.scs"; // last: a utility has to be able to win over a component

Reskinning

One map, usually one line. Everything else — buttons, links, focus rings, charts, the active menu item, the dark theme — is expressed in terms of $color.brand and friends, so it follows. See Tokens.

@let $brand = (s50: #EEF3FF, s100: #DCE6FF, … s500: #2F62F0, …);

Themes

The dark overrides are written once and emitted twice: under [data-theme="dark"], and inside @media (prefers-color-scheme: dark) guarded by :not([data-theme="light"]) — the three states a viewer can be in. <mmo-app> stamps data-theme on <html> and remembers the choice in localStorage.themeMode.

Check both Switch the theme with the button at the bottom of the rail and read any of these pages again: every specimen is painted by the document stylesheet, so all of them follow.

The application shell

The shell is <mmo-app>, and the template is the host's class, so switching it is a css decision and never a re-render:

class	shape	demo
`admin`	rail, breadcrumb, page tabs, page header, content, side panel, status bar	Admin shell
`landing`	sticky translucent header, hero, sections, large footer	Landing page
`blog`	sticky header, content column, sticky rail, footer	Blog index

Further

Simple CSS — the language these files are written in, and the compiler that reads them.
For elements — the lib:: and controls:: libraries an element carries into its own shadow root.
Custom elements — the components that are elements rather than classes.