# Moodkit — Brand Kit Builder by grinner.io

Build: 2026-11-07.1

> Moodkit is a free, browser-based brand kit builder for designers. Pick a style, tune color palettes, typography and motion on a live landing-page preview, then export a developer-ready spec (plain text, PDF, JSON and a WordPress theme.json). Made by grinner.io, the team behind Grinner, a free WordPress plugin for animations, effects and layouts.

URL: https://grinner.io/moodkit/
Price: free. No account, no sign-up, nothing stored on a server.

## What it does
- 6 styles, each a complete mood: Voltage (bold), Gazette (classic), Hush (minimal), Afterhours (dark), Playground (playful), Billboard (editorial). A style sets fonts, palette, corner radius, spacing and motion feel; everything stays editable.
- 72 color palettes, 12 per style, labeled Go bold, Go easy and Go unique. Every palette passes 4.5:1 text contrast.
- The Library set: 25 more palettes for light sites, made from the design library of GrinBot (grinner.io's site builder): a light page with colour and dark sections. Each one also passes 4.5:1 text contrast.
- 10 color roles plus primary-link: primary, secondary, background, surface, border, text, accent-1, accent-2, accent-3, accent-4, primary-link. A custom color picker edits any role; contrast is checked live with a one-click Fix.
- 44 fonts from Google Fonts and Fontshare (heading, body and accent roles), 8 one-click font pairings, and a 1, 2 or 3 font-family switch.
- Fluid type scale from 320px to 1440px screens (Hero heading, Display, Section heading, Card heading, H4–H6, Lead, Body, Small, Tiny, Mega), with exact CSS clamp() values and a heading-level map for h1–h6.
- Shape and motion: corner radius, button shape, spacing density, and a motion feel (Still, Calm, Smooth, Springy).
- Live preview on desktop, tablet and mobile, a full-view mode, and a mobile layout with a bottom sheet.
- Undo/redo, Surprise me, and Keep my colors.

## Exports
- Copy spec: plain-text style guide (design tokens only: layout, copy and imagery are left to the builder).
- Export PDF: the same content as a printable spec sheet.
- Copy JSON: the full spec, schema "moodkit/1" (style, palette, colors, contrast, typography, shape, motion, build map, themeJson, links).
- theme.json: WordPress palette, font families, fluid font sizes and element styles, ready for block themes.

## Links and data for agents
- Exact share link: https://grinner.io/moodkit/#s=<base64url JSON> (restores every setting).
- Readable pre-filled link: https://grinner.io/moodkit/?style=voltage&palette=acid-plum&heading=Syne&body=DM+Sans
  Parameters: style, palette, heading, heading-weight, heading-size, heading-min, line-height, heading-spacing, case (none|uppercase), scale, body, body-weight, body-size, body-min, body-line-height, body-spacing, accent, accent-weight, accent-effect (none|color|marker|underline|gradient), fonts (1|2|3), radius (0–40), buttons (match|pill), spacing (compact|comfortable|airy), motion (still|calm|smooth|springy), background (animated|solid), hero-bg, cta-bg, any color slug as 6-digit hex without # (e.g. primary=FF7139), device, layout. Invalid values fall back to the style's defaults.
- Full library: https://grinner.io/moodkit/moodkit-data.json?v=2026-11-07.1 (styles with defaults, palettes, pairings and fonts). Every item has a status: only "approved" items are on the page; "pending" items are proposals waiting for review and do not work in links yet.

Examples:
- https://grinner.io/moodkit/?style=gazette
- https://grinner.io/moodkit/?style=afterhours&palette=deep-space&motion=calm
- https://grinner.io/moodkit/?style=hush&heading=Syne&body=DM+Sans&primary=1E2BFF

## Related
- Grinner (free WordPress plugin): https://grinner.io/
- Everything the preview shows can be built in WordPress with Grinner block settings, no custom code. Each export includes a Grinner build map.