Grav MUD Alpha · Theming

CSS
Theme Expo

Full design token reference for agency handoff — page-level @@@ overrides, grav-mud-site CSS variables, preset palettes, and live component samples. No guessing which hex Andy's allergic to.

MUD Spec Get started

— Team DC, FutureVision Labs

Copy a preset into your client .mud or extend user/themes/your-theme/css/.

How theming works

Grav MUD separates structure (fences) from skin (CSS):

1. Theme shell — user/themes/grav-mud-site/css/grav-mud.css defines :root defaults and component classes (.hero, .card, .btn, …).

2. Page tokens — @@@ block can set name, layout, and optional tokens: lines → injected as .mud-page { --accent: … }.

3. Layout mode — layout: promo | spec-doc | theme-expo adjusts spacing via data-mud-layout.

Layer	File / syntax	Job
Global CSS	`grav-mud.css`	Component shapes + default palette
Page wrapper	`@@@` … `@@@`	Per-page token overrides
Fence HTML	`::: hero`, `::: cards`, …	Semantic regions (theme-agnostic)

Token map

These keys map in the compiler (MudDesignSpec::buildTokenCss) to CSS custom properties on .mud-page:

Token key	CSS variable	Typical use
`bg`	`--bg`	Page background
`bg-card` / `panel`	`--bg-card`	Cards, panels, quote blocks
`text`	`--text`	Body copy
`muted`	`--muted`	Secondary text, eyebrows
`accent`	`--accent`	Links, primary buttons, accents
`accent-glow`	`--accent-glow`	Hover / gradient hints
`gold`	`--gold`	Badges, highlights
`teal`	`--teal`	Secondary accent
`border`	`--border`	Dividers, card edges

Page-level token override

mud

@@@
name: client-acme
layout: promo
tokens:
  bg #0f172a
  bg-card #1e293b
  text #f1f5f9
  muted #94a3b8
  accent #38bdf8
  border #334155
@@@

::: hero
mascot: none
title: Acme Corp
accent: Rebrand 2026
:::

Tokens compile to an inline <style> on .mud-page — no Twig edits required for a client palette swap.

Preset palettes (live)

Each panel is a ::: theme fence — same tokens + sample components agencies can screenshot for handoff docs.

Grav Official

Default grav-mud-site — light, Andy-blue, flagship gravmud.site look.

preset: grav-official

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

Pizza Resistance

EliteToolz.live energy — dark stone, orange accent, teal secondary.

preset: pizza-resistance

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

Midnight Ops

Dev docs / CLI sim — slate background, sky accent.

preset: midnight-ops

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

Agency CLI

Elite CLI Toolz + Agency tier — cyan on dark, gold highlights.

preset: agency-cli

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

Influencer Glam

Creator / media kit — hot pink on plum, gold highlights, purple secondary.

preset: influencer-glam

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

Kitchen Warm

Recipe & food blog — cream paper, terracotta accent, sage secondary (light mode).

preset: kitchen-warm

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

Broadcast Neon

Live stream / podcast — deep violet stage, magenta + cyan neon accents.

preset: broadcast-neon

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

WWWeed Emerald

Gemzy banner green — starry emerald promo (alpha.gravmud.site cousin).

preset: wwweed-emerald

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

Creator Red

Y0UB00b / YouTube creators — dark stage, YouTube-red accent, gold highlights.

preset: creator-red

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

Deck Terminal

PlusDeck affiliate publisher — graphite base, bioluminescent teal telemetry.

preset: deck-terminal

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

F@k3B00k Blue

Personal social parody — light feed UI, Facebook-blue accent, dislike orange.

preset: fak3book-blue

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

LinkedUP Pro

Professional network — LinkedIn-blue, clean cards, connect green accents.

preset: linkedup-pro

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

Vimmy Cinema

VIMMY-OH! / Vimeo creators — cyber tunnel blues, cyan + neon orange accents.

preset: vimmy-cinema

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

B00kz Library

B00kz / e-book authors — warm library leather, Amazon orange + Kindle navy accents.

preset: b00kz-library

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

CRE8r Wolf

CRE8r / digital creator portal — surreal forest green, orange bike glow, lake-blue highlights.

preset: cre8r-wolf

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

K3to Krazy

K3toKr@zy! / keto recipes — mint fresh light mode, avocado green, VERY KETO red punch.

preset: k3to-krazy

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

SMB2B Slate

SMB2B / small business B2B portal — slate navy, trust blue, gold CTA highlights.

preset: smb2b-slate

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

Sh0P!fy Green

Sh0P!fy / marketplace e-commerce — bag green accents, clean merchant UI (not affiliated with Shopify Inc.).

preset: sh0pify-green

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

FL!PPY! Pink

FL!PPY! / indie zine portal — hot pink carpet ink, lime flip accent, FlipZine.Live embeds.

preset: flippy-pink

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

PR!NT!FY Pop

PR!NT!FY / Printify popup POD — stone ink, Printify green + pop yellow, swag storefront at /shop.

preset: prntify-pop

bg

bg-card

text

muted

accent

teal

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

Custom (inline tokens)

Client one-off — tokens only, no preset class needed in your theme CSS.

bg

bg-card

text

muted

accent

gold

border

Eyebrow · sample

Heading Accent

Lead copy on --muted — cards, buttons, and quotes inherit these tokens.

GhostPrimary

Card surface

Uses --bg-card and --border.

Component classes

All fences emit stable class names — theme CSS targets these, not raw tags:

Core surfaces

`.hero` · `.hero-actions`

Promo band, eyebrow, split title + .accent, CTA row.

`.card` · `.cards`

Grid sections — pricing, features, services.

`.btn` · `.btn.primary`

Ghost + filled; uses --accent and hover from theme.

`.quote-block` · `.manifesto`

Pull quotes and closing pitch blocks.

`.pricing-card`

Services tiers — featured variant with badge.

`.mud-spec-*`

Spec doc panes (source | HTML preview) on /spec.

Layout modes

Layout attribute

`layout:` valueBest for

promoHome, services, marketing landers

spec-docMUD Spec reference, wide example columns

theme-expoThis page — palette grids + swatches

exposeLegacy Lone Mamber profile layouts (optional)

Agency handoff checklist

Ship a client theme

1 · Fork CSS
Copy grav-mud.css → user/themes/client-name/css/ — tweak :root or add preset class.
2 · Set tokens
Put client hex values in page @@@ block or site-wide theme YAML (Phase 2).
3 · Prove it
Duplicate this Theme Expo page with their palette — send PDF or live URL.
4 · Compile
elite mud compile in CI — same HTML Grav serves. BAZINGA optional.

Theme ≠ template soup

Grav MUD keeps Twig thin and CSS honest. Your agency sells the spec file and the skin — clients see live swatches here, not a Figma link that expires when the intern leaves.

← MUD Spec · Agency packages · FutureVision Labs

CSSTheme Expo

How theming works

Token map

Page-level token override

Preset palettes (live)

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Heading Accent

Component classes

Core surfaces

.hero · .hero-actions

.card · .cards

.btn · .btn.primary

.quote-block · .manifesto

.pricing-card

.mud-spec-*

Layout modes

Layout attribute

Agency handoff checklist

Ship a client theme

Theme ≠ template soup

CSS
Theme Expo

`.hero` · `.hero-actions`

`.card` · `.cards`

`.btn` · `.btn.primary`

`.quote-block` · `.manifesto`

`.pricing-card`

`.mud-spec-*`