Reference
Stock themes
Set `theme: <name>` in your `kazam.yaml`. The seven rainbow themes pick up a muted, earth-toned accent on top of the neutral dark base (or a light base via `mode: light`). Readable content, quiet brand color.
ROYGBIV
Rainbow set
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;"> <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;"> <div style="height:64px;background:#BB7777;"></div> <div style="padding:14px 16px;"> <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">red</div> <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#BB7777</div> <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: red</code> </div> </div> <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;"> <div style="height:64px;background:#BB8C66;"></div> <div style="padding:14px 16px;"> <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">orange</div> <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#BB8C66</div> <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: orange</code> </div> </div> <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;"> <div style="height:64px;background:#B8A866;"></div> <div style="padding:14px 16px;"> <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">yellow</div> <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#B8A866</div> <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: yellow</code> </div> </div> <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;"> <div style="height:64px;background:#7A9878;"></div> <div style="padding:14px 16px;"> <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">green</div> <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#7A9878</div> <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: green</code> </div> </div> <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;"> <div style="height:64px;background:#7897B8;"></div> <div style="padding:14px 16px;"> <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">blue</div> <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#7897B8</div> <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: blue</code> </div> </div> <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;"> <div style="height:64px;background:#8A7FBB;"></div> <div style="padding:14px 16px;"> <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">indigo</div> <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#8A7FBB</div> <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: indigo</code> </div> </div> <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;"> <div style="height:64px;background:#AB7FBB;"></div> <div style="padding:14px 16px;"> <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">violet</div> <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#AB7FBB</div> <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: violet</code> </div> </div> </div>
Neutral
Base themes
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;"> <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;"> <div style="height:64px;background:#899878;"></div> <div style="padding:14px 16px;"> <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">dark</div> <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#899878 · sage accent on #121113</div> <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: dark</code> </div> </div> <div style="background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px;overflow:hidden;"> <div style="height:64px;background:#222725;"></div> <div style="padding:14px 16px;"> <div style="font-size:15px;font-weight:600;color:var(--snow);margin-bottom:4px;">light</div> <div style="font-family:'SF Mono',monospace;font-size:12px;color:var(--muted);">#222725 accent on #F7F7F2 paper</div> <code style="display:inline-block;margin-top:8px;font-size:11px;background:var(--surface-strong);padding:2px 6px;border-radius:4px;color:var(--snow);">theme: light</code> </div> </div> </div>
Usage
Apply a theme
# kazam.yaml
name: My Site
theme: violet # any rainbow color, or dark/light
mode: light # optional - flips rainbow themes onto light base
texture: grid # pairs with any theme
glow: accent # picks up the active accent
depth: soft # flat | soft (default) | lifted
depth controls how panels (cards, callouts, boxes, stats, tables, code) sit on the page. flat is a hairline border only. soft, the default, layers a faint top tint and a low shadow so panels read as resting on the background. lifted adds an accent top edge and a hover lift for interactive pages. Any page can override it with its own depth:. Print and export always render flat.
mode only affects the rainbow themes (red / orange / …). theme: dark and theme: light are self-contained and ignore it. Need a custom accent outside the stock set? Override any theme token directly with colors: - the named theme is just a starting point.
# kazam.yaml - your brand color on top of the dark base
theme: dark
colors:
accent: '#14B8B8'
accent_soft: 'rgba(var(--accent-rgb), 0.08)'
Motion
Entrance motion, opt in per page
Any component can carry animate: with fade_up, fade_in, slide_left, slide_right, or stagger. Nothing moves until the page sets motion: true. Then each component eases in the first time it scrolls into view; stagger on a grid, columns, section, box, card_grid, or stat_grid steps its children in 80ms apart.
Hosts can force motion on for a presentation view regardless of the page flag. Motion never plays in print, in export screenshots, or for readers who set prefers-reduced-motion.
title: Launch review
shell: standard
motion: true
components:
- type: header
animate: fade_up
title: Launch review
- type: grid
animate: stagger
columns: 3
children:
- component: { type: box, title: Build, body: Green. }
- component: { type: box, title: Deploy, body: Green. }
- component: { type: box, title: Verify, body: Pending. }
Next up
Once your theme looks right, the last step is shipping it. Any static host works - copy-paste recipes for the handful most people pick.