Official Brand Guidelines · v1.0

Cremior — Brand Guidelines

scroll for the scoop

A Little Cone of Happiness

02Color

Four flavors on the menu.

The palette comes straight from the parlor: deep roasted brown, bright strawberry pink, soft cream, and a whip of light pink on top.

  • Cremior Brown

    --cremior-brown

  • Cremior Pink

    --cremior-pink

  • Cream

    --cremior-cream

  • Light Pink

    --cremior-lightpink

CMYK values are screen-derived approximations — confirm with your print vendor.

The house mix

How much of each flavor goes in the cone.

03Typography

Loud, round & friendly.

Two voices, one sundae. Baloo 2 does the shouting — fat, bouncy headlines that echo the hand-lettered logo. Nunito handles the small talk, keeping menus and long reads soft and easy. That's the official pairing; no substitutions, no skimping.

Baloo 2

Display — headlines, buttons, big feelings

400500600700800

Nunito

Body — menus, labels, long reads

Tagline style

A Little Cone of Happiness

  • Hero--text-heroBaloo 2 800

    Scoop

  • Display--text-displayBaloo 2 800

    Waffle cone

  • Title--text-titleBaloo 2 700

    Double dip delight

  • Heading--text-headingBaloo 2 700

    Served with a smile, always

  • Body--text-bodyNunito 500

    Every cone starts with slow-churned cream and ends with a little happiness.

  • Tagline--text-headingNunito 800 italic

    A Little Cone of Happiness

Variable weight 400 → 800 · scroll to churn

Creamy

04Buttons & UI

Pill-shaped, please.

Every interactive element is a pill. Hovers spring with --ease-scoop, presses squash, and nothing sharp ever ships.

Three flavors of button

Live demos — hover for the spring.

Primary

The one action that matters. One per screen — make it count.

  • bg--accent
  • text--cremior-cream

Secondary

The sturdy support act. Solid ink, happy to stand next to the star.

  • bg--fg
  • text--bg

Outline

The quiet third option. A 3px ring of currentColor that fills on hover.

  • bgtransparent
  • text--fg

Five states, all live

These are real buttons. Go on, poke them.

  • Rest

    Calm, flat, pill-shaped. No shadow until you say hello.

  • Hover

    Lifts 3px, grows 4%, lands with --ease-scoop.

  • Press

    Squashes to 96% — like a thumb in soft serve.

  • Focus

    3px accent ring, 2px offset — tab to try.

  • Disabled

    40% opacity, no spring. Even pills need a day off.

Smaller hardware

Copy chip

Click it — the value hops onto your clipboard and the chip flips to “Copied!” for a beat.

Pill tags
New flavorSeasonalStaff pick

Static labels: 2px border, --radius-pill, no hover games.

Radius rules

  • --radius-pill

    Interactive. Buttons, chips, anything you press.

  • --radius-scoop

    Cards and other big, cozy surfaces.

  • --radius-chip

    Tiny hardware — chips, swatches, little labels.

If a corner feels sharp, it’s wrong.

05Shape & Motion

Everything melts like soft serve.

Motion is squashy, never snappy. Corners are scooped, never sharp. If it moves, it lands like a scoop on a cone — with a little wobble.

Corner radii

999px

Pill

--radius-pill

32px

Scoop

--radius-scoop

20px

Scoop Small

--radius-scoop-sm

12px

Chip

--radius-chip

The easing lab

Scoop

--ease-scoop

Hovers & pops — lands with a springy wobble

Melt

--ease-melt

Reveals — fast start, long soft landing

Swirl

--ease-swirl

Color flips & loops — perfectly symmetric

House style

Hover or press the cone

The swirl always lands softly.

  1. 1Overshoot a little, always
  2. 2320ms is the house tempo
  3. 3Reduced motion = every animation has a still ending

06The Swirl

Sprinkle it everywhere.

The soft-serve swirl is our confetti. Toss it onto patterns, stickers, app tiles and cup lids — anywhere the brand could use one more little scoop of joy.

confetti mode: on

  • App icon

    Home screen, but sweeter.

  • cremior.com

    Favicon

    Tiny tab, big flavor.

  • Sticker

    Slap it on the cup lid.

  • Pattern

    Repeat until sprinkled.

Cremior