A style pack is how a site looks: typography, color, layout, motion. It’s the literal dimension of a playbook — when a style pack is active it’s authoritative, and the agent themes everything to it rather than reinventing the brand.

​
What a style pack ships

FileRole
style.cssThe canonical stylesheet — palette tokens, type scale, focus ring, motion guard, button system, decor. sitekit run inlines it verbatim into every page.
style.jsonThe declaration — palette definitions (light and dark), variant axes, motion guards, any required sections.
design.mdThe guide the agent reads — how to use the pack’s vocabulary when authoring a page.
Because the CSS is inlined verbatim, every page built against a pack inherits the same buttons, cards, and motion by construction — not by the agent’s memory of them.

​
The twelve bundled packs

sitekit style list      # everything available, across all three tiers
PackThe look
editorialMagazine-grade typography (Fraunces + Inter), fluid layouts, glass-and-grain decor, a scroll-reveal motion layer. The default.
brutalistRaw and monospace-dominant — exposed grid, hard borders, square buttons, no decoration, no motion.
windows-95A faithful homage to the Windows 95 desktop: teal canvas, silver 3D-bevel chrome, navy title bars, the real MS Sans Serif.
curve-classicA Web 1.0 skeuomorphic finance terminal — periwinkle desktop, beveled silver windows, IBM Plex Mono throughout.
kotaA London-studio look: monochrome Swiss type at enormous, tight sizes, with one iridescent violet→teal→magenta gradient.
bugster”Terminal on paper” — warm cream, Geist Mono headlines, a single lime accent, flat boxed cards with corner markers.
fivepathwaysWarm editorial financial-advisory — a display serif, soft pastel bands, teal-mint pill CTAs, hand-drawn “pathway” trails.
cognitumDark-first edge-AI — a deep blue-black slate, glassy blur cards, a glowing cyan primary, motion-rich scroll reveals.
amazonMarketplace utility — dense white-on-grey, navy chrome, warm yellow and orange action pills, near-zero motion.
netflixCinematic streaming — pure black, bold white type, exactly one red, poster-row hovers, restrained motion.
stripePremium fintech and developer-platform — immaculate white and navy ink, the indigo “blurple”, a flowing aurora gradient.
jackmcdadeMaximalist anti-boring — a polychrome tropical-pop palette, chunky bouncy display type, offset-shadow pills. Loud and playful.
Several packs were captured from real sites. They port visual atoms — palette, type, button and card language — not a brand’s logo, wordmark, or imagery, and substitute free fonts for commercial ones (each pack’s design.md says which). Author neutral content; swap in licensed fonts if you hold them.

​
Light and dark

Most packs declare both a light and a dark palette. When a playbook turns on dark mode, the agent wires the toggle and sitekit verifies that the active pack actually declares both palettes. See Playbooks → Dark mode.

​
Capture your own

You can capture a style pack from an existing site — a live URL, a screenshot, a bundle of screenshots, or a screencast (including how the page moves): 
sitekit style capture <name> --url https://example.com
sitekit style capture <name> --screenshot ./home.png
sitekit style capture <name> --screencast ./walkthrough.mp4
sitekit scaffolds the pack and gathers the evidence; your agent does the extraction, guided by the capture skill. The result lands in your workshop, ready for sitekit run --style=<name>.

​
Author your own

sitekit style author <name>
This scaffolds a pack in your workshop (~/.sitekit/styles/), installs the authoring skill, and opens a preview workspace so your agent can draft, preview, and verify it. Workshop packs shadow bundled ones on a name collision — use @scope/name to namespace yours.

Playbooks

How style composes with voice, shape, and valence.

Shapes & tiers

The structural dimension that pairs with any style.