Bookable service
Discovery call
A demo card built from primitives. Phase 2 turns this shape into a real section type.
Free · 30 min
Book nowPhase 1 — token system + primitives
Mecsto Sites is becoming visible.
The three-layer token cascade now drives every color, spacing, type size, radius, and shadow on this page. Switch your OS to dark mode and reload — the same tokens flip cleanly.
Typography
Heading · display
Heading · page
Heading · section
Heading · block
Text · lg — body-lg semantic level.
Text · base — the default body size for paragraphs.
Text · sm — secondary tone for supporting copy.
Text · xs — tertiary tone for captions and metadata.
primary
secondary
tertiary
brand
success
warning
error
Color system
Surfaces
surface · base
surface · elevated
surface · accent
surface · inverse
Brand
brand · primary
brand · primary-hover
brand · primary-active
brand · accent
brand · on-primary
Status
status · success
status · warning
status · error
Spacing
Stack with each gap
gap=xs
gap=sm
gap=md
gap=lg
gap=xl
gap=item
gap=block
Responsive Grid (1 → 2 → 4 columns)
Cell 1
Stretches across breakpoints via the Grid primitive.
Cell 2
Stretches across breakpoints via the Grid primitive.
Cell 3
Stretches across breakpoints via the Grid primitive.
Cell 4
Stretches across breakpoints via the Grid primitive.
Image primitive
Renders through Next.js Image with a token-driven radius and accent placeholder. Cloudflare Images optimization sits on top in Phase 3.
Rich text & links
Sample rich content
The RichText primitive renders pre-sanitized HTML with prose-style typography sourced from the same token tree as the rest of the page. Use it for blog post bodies, listing descriptions, FAQ answers, and merchant-authored long-form content.
What it carries
- Headings, paragraphs, links, lists, inline
code, and emphasis. - Server-side sanitization is the upstream contract — see the public view models doc.
Read more in the architecture docs.
Section instance override
This section overrides its tokens.
Same primitives as the rest of the page — Container, Stack, Heading, Text, CTA — but the SectionFrame supplies a small allowlisted bundle of CSS variable values that scope only to this subtree. The page background and primary text colors flip; everything else cascades from the resolved theme.
Mecsto Sites · Phase 1 showcase · No sections, no merchant data, no fetches.