Moodkit
by grinner.io
01 — Pick a style
A style sets fonts, palette, radius, spacing and motion. Everything stays editable.
{{ frameLabel }}
{{ styleCrumb }}
Start over? You can undo it.
New Studio plan is live

Make the web feel beautiful again.

Grin is the site studio for teams who sweat the details. Motion, type and color ship exactly the way you designed them.

+1,995
Loved by 2,000 makers
Built for studios founders makers brands
Heading{{ mbHead }}
Aa
Bb Cc Dd 0123{{ mbBody }} for body text
Corner radius{{ mbRad }}
Accent · {{ mbAcc }}
beautiful
{{ ch.label }}{{ ch.hex }}

Trusted by 2,400 studios and the brands they build for

{{ l.t }}
Features

Everything moves the way you meant it to.

Motion, type and color live in one system, so the site you approve is the site that ships.

01 — Motion

Motion that's built in, not bolted on.

Entrances, hovers and scroll moments are settings, not scripts.

✓Scroll entrances
✓Card and button hovers
✓Animated backgrounds
02 — Type
Aag

Type that sets the tone.

Heading, body and accent faces with sizes that scale with every screen.

03 — Color

Ten roles. Zero guesswork.

04 — Speed

From brief to live in days.

Design100%
Build82%
Launch64%
05 — Responsive

Every screen, sorted.

Columns, gaps and order set per screen size.

06 — Access

Readable by everyone.

Your text on your background, checked live against 4.5:1.

{{ ratioTB }}

Watch Grin in action

1:32
{{ w }}✦
{{ w }}✦
Proof

Numbers that make clients grin.

2,400+
Sites shipped by studios on Grin
98
Average mobile PageSpeed score
4.9/5
Average client rating
11d
From brief to launch, on average
Testimonials

Loved by people who notice kerning.

“

Grin turned our brand book into a live site in eleven days. Clients keep asking who animated it.

Maya OkaforCreative Director, Northwind Studio
★★★★★

The type controls alone saved us a week of back-and-forth with developers.

Jonas WeberFounder, Halcyon
★★★★★

Our first agency site with a 98 on mobile. With all the motion left in.

Priya RamanHead of Web, Oakbridge
Pricing

Simple pricing. No surprises.

Solo

For one site, done properly.
{{ pSolo }}/month
Choose Solo
✓1 site
✓Every motion preset
✓Email support
Most popular

Studio

For teams shipping every month.
{{ pStudio }}/month
Choose Studio
✓5 sites
✓Client handoff specs
✓Priority support

Agency

For studios running many brands.
{{ pAgency }}/month
Choose Agency
✓Unlimited sites
✓White-label handoff
✓A named partner
FAQ

Questions, answered.

Still curious? Write to hello@grin.studio and a real person replies within a day.

{{ f.a }}

( 09 )
Grin — 2026

Grin, Grin, Grinner.

Built for you and me.

We use analytics to improve Moodkit. No ads, no selling data.
Analytics?
{{ menuTitle }}
Choose what to include. Copy spec and Export PDF share these choices. Copy JSON always gives the full spec (derived colors follow the checkbox).
{{ exportCount }}
{{ toast }}
Moodkit · Style spec {{ pr.date }}
Design tokens only. Layout, copy and imagery are decided by the builder.
Style · {{ pr.kind }}
{{ pr.style }}
{{ pr.mood }}
Palette
{{ pr.palette }}
{{ w.label }} {{ w.hex }}
Aa {{ t.role }}{{ t.family }} · {{ t.w }}
Color roles
{{ r.label }} {{ r.slug }} {{ r.hex }}
Contrast
{{ k.label }}{{ k.ratio }}{{ k.badge }}
Typography
{{ t.role }}{{ t.src }}
{{ t.family }}
{{ t.line }}
Fluid type scale · 320px → 1440px
{{ pr.scaleNote }}
{{ k.name }}{{ k.role }}{{ k.range }}{{ k.css }}
Heading levels
{{ x.el }}{{ x.slot }}{{ x.range }}{{ x.font }}lh {{ x.lh }}{{ x.ls }}{{ x.tt }}
Shape & spacing
{{ s.k }}{{ s.v }}
Motion brief
{{ s.k }}{{ s.v }}
Grinner build map
{{ s.k }}{{ s.v }}
theme.json
{{ pr.theme }}