Marketing sections
Source: src/styles/parts/landing.scs — the blocks a
<mmo-app class="landing"> page is assembled from. See them at full width on the
landing demo.
One ground carries the whole identity: the ink band, identical in both themes. Everything else is paper and hairlines. Spending the boldness in one place is what keeps a page from looking like a template with six competing accents.
The hero
The glow is a background rather than a positioned layer, so the hero needs no
overflow: hidden — which is what lets .shot hang past the bottom edge
onto the next section. .hero::before adds a fine grid, masked out before it reaches the
edges: structure, not decoration.
The design system that compiles itself
One token file, one stylesheet, no node and no build step: a theme is written in Simple CSS and compiled by php.
With a shot
Bands
A .band is one section of the page: generous vertical padding, and a .band-in
that caps the content at the layout measure and centres it. .alt switches to the quiet
ground with a hairline above and below; .tight halves the padding.
Everything follows one map
Change the brand ramp and the buttons, links, focus rings, charts and the dark theme follow.
The logo strip
Figures
Big-number tiles, because on this page the figures are the argument. The hairline between them
is the grid gap showing through, so the row reads as one object rather than three cards. A figure
without its source is an assertion, which is what .sources is for.
the scs compiler's own suite, green on every build
no dart binary, no node, no build step to install
the prelude an element pays, instead of the whole palette
Source: tests/scs, September 2026.
Features
One token file
The semantic layer is emitted as custom properties; components only ever reference it.
The same recipes
A control looks the same whether it was written in a page or inside a shadow root.
Dark, three ways
Explicit dark, explicit light, and the default where only the system has an opinion.
Steps
Numbered only because the content really is a sequence: each step consumes what the previous one produced. On a page whose blocks are merely a list, drop the numbers.
-
01
Declare
Write the tokens
One
@themeblock becomes the--mmo-*variables the whole system reads. -
02
Compose
Use the library
@use lib::surface,@use controls::button— the same fragments on both sides of the shadow boundary. -
03
Ship
Compile
One css file, one source map, no build step outside php.
Pricing
Exactly one plan is lifted, and it is lifted by a border and a shadow, not by a second accent colour.
Solo
0 € / monthOne project Community support
Team popular
39 € / monthUnlimited projects Shared design tokens Priority support
Enterprise
On askSelf-hosted Audit and training
Questions
.faq is a narrow column of <details>: the element defaults already make
each one a surface with its own chevron.
Does it need node?
No. The lexer, parser, evaluator and emitter are php, so a stylesheet compiles anywhere the framework runs.
Can I keep my sass?
A package that carries sass of its own configures its own load path; nothing in mmo.client is sass any more.
How do I reskin it?
One map in tokens.scs.
The closing band
Start with the tokens
Everything else follows from them.
The footer
Responsive
- below 900px: bands and the hero lose half their padding, a step becomes two columns instead of three, the footer becomes two columns and the logo strip tightens;
- below 560px: the footer becomes one column and the closing band loses more padding.