Join the waitlist

Moodkit · A free tool by Grinner

Website color palette and font pairing tool

Pick a style and get colors, fonts, sizes and spacing that work together. Check the contrast, then export it straight into WordPress.

Open Moodkit
See how it works

Free

12 palettes

Exports theme.json

Moodkit in grinner.io colors: a live site preview beside the style cards
VOLTAGEGAZETTEHUSHAFTERHOURSPLAYGROUNDBILLBOARDELECTRIC LIMEOXBLOOD PRESSINDIGO NIGHTHI-VIS YELLOWVOLTAGEGAZETTEHUSHAFTERHOURSPLAYGROUNDBILLBOARDELECTRIC LIMEOXBLOOD PRESSINDIGO NIGHTHI-VIS YELLOWVOLTAGEGAZETTEHUSHAFTERHOURSPLAYGROUNDBILLBOARDELECTRIC LIMEOXBLOOD PRESSINDIGO NIGHTHI-VIS YELLOW

The problem

Colors that clash. Fonts that fight.

A palette from one tool, fonts from another, sizes from a guess. Nothing is tested together, so the button text fails contrast and the headings look off on a phone.

The fix

One style, everything matched.

Moodkit starts from a style, so colors, fonts, sizes, corners and spacing are chosen together. Change any part and the live preview updates.

The same bakery homepage in one matched Moodkit style, with a button that passes contrast
A bakery homepage with clashing colors and fonts and a button that fails contrast

Six styles

Pick a style. Get everything.

Each style sets fonts, palette, corners, spacing and a motion feel. Tap or point at one to see the same page in it.

  1. VoltageClash DisplayElectric LimeLoud color, heavy type, a little swagger.
  2. GazettePlayfair DisplayOxblood PressSerif-led and unhurried, like a good print magazine.
  3. HushGeneral SansPaper & InkQuiet, precise, lots of air. The work does the talking.
  4. AfterhoursSpace GroteskIndigo NightDark, glowing, technical. Built for screens at night.
  5. PlaygroundBricolage GrotesqueFeather GreenRound, bouncy and friendly. Joy is a feature.
  6. BillboardBebas NeueHi-Vis YellowCondensed caps, hard edges, poster energy.

How it works

Three steps to a whole brand.

Moodkit step 1, the style cards, with Voltage and the Blaze Violet palette

STEP 01

Pick a style

Each style sets fonts, palette, corners, spacing and a motion feel. Or press Surprise me.

Moodkit step 2, Blaze Violet palette roles with contrast scores

STEP 02

Tune it live

Swap the palette, try a font pairing, set the type scale. The contrast check suggests a fix when text is hard to read.

Moodkit export options

STEP 03

Export it

Copy a share link, the spec, JSON or theme.json, or save a PDF. Grinner imports it into your WordPress in one step.

12

palettes, each with named roles

44

fonts to pair

4.5:1

contrast, checked for every text pair

What you get

A brand kit, not just a palette.

12 palettes

Ready-made palettes with named roles, from background and text to four accents.

Contrast checked

Text pairs are checked against 4.5:1, with a suggested fix when one falls short.

Font pairings that work

One-click pairings for headings, body and accent words. Every one stays editable.

Fluid type scale

Sizes that grow smoothly from 320 to 1440px wide, with the exact values in the spec.

Ready for WordPress

Export theme.json, or import your style in Grinner and it sets colors, sizes, spacing and fonts for you.

Easy to share

Send a link, or a PDF spec your client or developer can follow.

Compare

Moodkit next to generic tools.

Moodkit

Palette tools

Font pairing sites

Colors and fonts

Both, together

Mostly colors only

Mostly fonts only

Live website preview

Yes

Some, often on paid plans

Some, often on paid plans

Contrast check with a fix

Yes

Rare

No

Fluid type scale

Yes

Not listed

Not listed

WordPress theme.json

Yes

Not listed

Not listed

Price

Free

Free to $3 a month

Free to $10 a month

Colors and fonts

Moodkit

Both, together

Palette tools

Mostly colors only

Font pairing sites

Mostly fonts only

Live website preview

Moodkit

Yes

Palette tools

Some, often on paid plans

Font pairing sites

Some, often on paid plans

Contrast check with a fix

Moodkit

Yes

Palette tools

Rare

Font pairing sites

No

Fluid type scale

Moodkit

Yes

Palette tools

Not listed

Font pairing sites

Not listed

WordPress theme.json

Moodkit

Yes

Palette tools

Not listed

Font pairing sites

Not listed

Price

Moodkit

Free

Palette tools

Free to $3 a month

Font pairing sites

Free to $10 a month

FAQ

Fair questions.

Yes. Moodkit is free to use in your browser.

No. The share link, spec and PDF work for any project. For a WordPress block theme, export theme.json. With the free Grinner plugin, paste your style into the Moodkit tab and it applies it in one step.

Google Fonts and Fontshare. When Grinner imports a style, it downloads the Google fonts to your site with only the weights you use. Fontshare fonts you add yourself.

Yes. Moodkit has Undo, Redo and Start over, and the import in Grinner is one entry in WordPress’s Revisions.

Only if you allow it. It asks before using analytics, with no ads and no selling of data.

Yes. Give GrinBot your style and it builds your site with it. Or skip Moodkit and let GrinBot choose.

Find your style.

Free, in your browser. Nothing to install.

Open Moodkit
Or let GrinBot choose