theme fixture · ten sections on theme.css at :root, no site chrome · tests paste third-party themes over this page

Fixture

Ten sections, one contract, any theme.

Every value below comes from theme.css, or from whatever is pasted over it.

PrimarySecondary
$ npx shadcn@latest add https://moonarc.dev/r/theme.json✓ theme.css✓ 28 sections recoloureddone in 0 ms

28

sections

102

primitives

67

at zero bytes

01

Tokens

shadcn names with fallbacks.

var(--card, var(--ma-panel))
02

Brand

One colour, a scale derived.

--ma-brand
03

Tones

surface · muted · ink · brand.

01

Copy on the left, a visual on the right.

The visual is a card in the card colour; the copy dims through opacity so it survives every tone.

Read on →
visual-0

02

And the other way round.

Rows alternate by default; media="left" or "right" pins them.

visual-1

Sample plans

Starter

$0/yr$0/mo

For one project

  • Three projects
  • Community support
Start

Plus

$120/yr$12/mo

For a growing team

  • Unlimited projects
  • Priority support
Subscribe

Business

$290/yr$29/mo

For larger teams

  • Everything in Plus
Contact sales

The featured quote spans two columns and splits word by word.

A. PersonRole

A shorter one.

B. Person

And one more, for the third column.

C. PersonRole

Three steps

  1. Install

    One command adds the integration and the tokens.

  2. Theme

    Set --ma-brand, or paste a theme.

  3. Compose

    Sections, with tone and density as props.

Questions

The default tone paints nothing; this page's ground is the theme's background.

Is the default tone transparent?

Yes. A section paints a ground only when tone is set.

Does a pasted theme win?

Yes: :root beats :where(:root).

Stay in the loop

A real form with native validation.

No spam.

A brand-toned panel.

The CTA is the brand tone by default: the primary colour, with its foreground.

PrimarySecondary

npx astro add moonarc