Skip to content

Brand kit

The small system behind this site. Flat candy colors, thick ink outlines, a soft chunky display face and springs on everything.

Logo

gummi
gummi

Color

  • Cream

    #FFF6E9 · var(--cream)

    Page background

  • Grape

    #6B4BFF · var(--grape)

    Primary accent, focus rings

  • Strawberry

    #FF5A7A · var(--strawberry)

    Calls to action, highlights

  • Lime

    #C6F432 · var(--lime)

    Active states, success

  • Ink

    #1B1B1F · var(--ink)

    Text, every outline, shadows

  • Tangerine

    #FF9F1C · var(--tangerine)

    Support color, sparingly

Type

Display · Fraunces, SOFT 100, WONK 1

Aa Gg

Squishy, warm, a bit wonky. Hover the hero letters to inflate them.

Body · Plus Jakarta Sans

Aa Gg

Designed by Tokotype in Jakarta, a nice nod to home. Clean, friendly and very readable at small sizes.

  • Megaclamp(5rem, 22vw, 20rem)
  • Heroclamp(3rem, 9vw, 8.5rem)
  • Displayclamp(2.5rem, 6vw, 5.5rem)
  • Titleclamp(1.9rem, 3.6vw, 3.25rem)

Stickers & doodles

Fresh!
Made in
Bandung
100%
chewy

Cursor states

  • Default
  • →Link
  • dragDrag
  • viewView
  • playPlay

The cursor follows on a spring and stretches in the direction you move.

Buttons & motion

Every transition is a spring with overshoot (CSS: cubic-bezier(.34, 1.8, .64, 1)). Nothing moves linearly except the marquee. With reduced motion turned on, springs are switched off and the physics scenes settle instantly.