KenKen Design System

Try it

Make it yours, live

Type, primary color, and section texture are live controls. Changes save to your browser and apply to every page, and sync across open windows on this address, so you can drive a demo from a second tab.

Live controls

Type, color, and texture are saved to this browser and applied to every page. Open a second window on the same address and it updates there too.

Heading type

Primary color

Section texture

BadgeHeading accenta link
/* app/globals.css — one source, everything derives */
:root {
  --brand: #D81E5B;                                    /* change this one value */
  --brand-strong: color-mix(in srgb, var(--brand) 76%, #000);
  --brand-soft:   color-mix(in srgb, var(--brand) 12%, var(--surface));
  /* every gradient, glow, border and photo tint reads --brand */
}

Foundations

Color tokens

Warm neutrals plus a single accent. Every token swaps automatically in dark mode, so components never hardcode a hex.

Surfaces

Background
--bg
Surface
--surface
Surface 2
--surface-2
Line
--line

Text

Ink
--ink
Body
--body
Faint
--faint

Brand accent

Brand
--brand
Brand strong
--brand-strong
Brand soft
--brand-soft
Brand line
--brand-line

Chrome (always-dark bands)

Chrome
--chrome
Chrome text
--chrome-text
Chrome muted
--chrome-muted

Foundations

Typography

Bricolage Grotesque for expressive display, Hanken Grotesk for UI and body. Two grotesques on a display-vs-text contrast axis.

font-display · Bricolage Grotesque

Puzzles That Make You Smarter

font-sans · Hanken Grotesk (lead)

A daily math puzzle loved by millions, plus a full Arcade of games.

font-sans · Hanken Grotesk (body)

The interface font. Clean, legible, quietly modern.

.eyebrow / .hand-underline

Section eyebrow

Make it pop

Page title (h1)text-h1 · clamp(2rem, 4.4vw, 3.35rem)
Section (h2)text-h2 · clamp(1.75rem, 3.2vw, 2.5rem)
Heading 3text-xl / text-2xl
Bodytext-base / text-lg
Smalltext-sm

Foundations

Radius, shadow, spacing

Corner radius

12px · CTA--radius-cta
16px
20px
Circleavatars only

12px is the standard for every button-shaped control, on the site and inside the game. It is one token, --radius-cta, so the whole system moves together. Only true circles keep a full radius: avatars, color swatches, list dots, and radio marks.

Elevation

shadow-sm
shadow-md
shadow-lg

Spacing scale

8px
16px
24px
40px

Components

Buttons and badges

One pill shape, four variants, three sizes. Badges share the accent.

SoftSolidTagOutlineGold

Components

Cards and content blocks

The building blocks of every marketing section.

Feature card

An icon tile, a title, and a supporting line. Used across benefit grids.

Game card

A linked, hover-lift card for the Arcade with icon, arrow, and tags.

NumberMedium
Dana Reyes

“The most addictive logic puzzle in years.”

Base card

The neutral container with a border and soft shadow.

200+
publications
500 Million+
puzzles played
1 Million+
students weekly
Jan 18, 20268 min read

Blog card

Image, meta row, title, excerpt, and a category badge.

Strategy

Components

Pricing and accordion

Best Value

Yearly

Best value

$39.99/year
  • Daily puzzles
  • Ad-free experience
  • Expert level puzzles
  • Leaderboard access
Get Yearly Access
Yes. Every element on this page is the exact component the sites ship.

Components

KenKen visuals

The board and cage tiles that make the brand unmistakable.

3−1
3+
6×
5+
8×3
2−
7+
4

MiniBoard

CageTile

Components

Section heading

Eyebrow

A centered section heading

With an eyebrow badge and a serif subtitle. The default rhythm for a new section.