Style guide

Foundations

Colour palette, type scale, and how theming works.

Palette

Tokens map to Tailwind utilities via @theme (--color-grass → var(--c-grass)), so bg-grass / text-fg / border-line resolve through a live var(). Hex below is read live from the current theme. grass, ice, mesa, stone and gold are shared across themes; the neutrals plus grass-hi / wood shift between dark and light.

Surfaces & ink

bg #…

bg-bg

Page background (behind the checker)

surface #…

bg-surface

Header, sidebar, wells

surface-2 #…

bg-surface-2

Insets, inputs, code

card #…

bg-card

Cards & panels

fg #…

text-fg

Primary text / headings

body #…

text-body

Prose body copy

muted #…

text-muted

Secondary / captions

faint #…

text-faint

Faintest text

line #…

border-line

All chunky borders

divider #…

border-divider

Soft heading underline

rowline #…

border-rowline

Table / infobox rows

Accents & biomes

grass #…

bg-grass

Primary action / brand

grass-hi #…

text-grass-hi

Links, active state

gold #…

text-gold

Featured / season badge

wood #…

bg-wood

Panel banners

wood-l #…

text-wood-l

Labels on dark panels

ice #…

text-ice

Ice biome accent

mesa #…

text-mesa

Mesa biome accent

stone #…

text-stone

Stone / neutral accent

Typography

Two families: Silkscreen (pixel) for every heading, label and button, and Nunito Sans for body copy. Base font size is 17px on <html>.

Silkscreen · var(--font-pixel)

Aa Bb 123

Headings, badges, buttons, section labels. Runs large - size it down per use.

Nunito Sans · var(--font-sans)

Aa Bb 123

The quick brown fox builds a redstone farm at spawn.

Role	Class	Size	Sample
Page title	`.pixel`	26-30px	Spawn
Section heading	`.section-h / prose h2`	17px	Features
Sub heading	`prose h3`	14px	Design
Micro-label	`.pixel-label`	10px	Navigate
Badge / tag	`.mc-badge`	8px	Featured
Button	`.mc-btn`	10px	Explore
Body copy	`.prose`	16.5px / 1.75	Built over many months.

Theming & Conventions

How theming works

One palette, three --c-* blocks in main.css: :root / [data-theme="dark"] (default), [data-theme="light"], and a prefers-color-scheme: light block for visitors who haven't chosen.
@theme keeps the var() reference in generated utilities, so flipping data-theme re-themes live.
The toggle writes localStorage('slab-theme'); a pre-paint script in baseof.html applies it before first paint to avoid a flash.

Do & don't

Never hardcode hex in templates - use bg-* / text-* / border-* so both themes stay in sync. To retune a colour, edit all three --c-* blocks.
Hard corners only - no rounded.
Hard offset shadows, never blur. Depth scale: mc-card 4px → mc-panel 8px → mc-frame 12px.
Chunky border-line borders (2 / 3 / 4px); stepped hover transitions (steps(2)); image-rendering: pixelated on sprites, maps and images.

Adding a new component

Define it in the @layer components block of main.css, compose with @apply + tokens (not raw hex), keep the mc-/feature-prefix naming, then run npm run css to rebuild app.css. Because @source "../../layouts" scans the templates, any utilities you use are picked up automatically.