Design System

One system. Both sites. Edited in one place.

KenKen and the KenKen Federation are built from the same tokens and the same components. Change a token here, or in app/globals.css, and every page on both properties follows. No find-and-replace, no drift.

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

Muted

--muted

Faint

--faint

Brand accent

Brand

--brand

Brand strong

--brand-strong

Brand bright

--brand-bright

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 ArKKade of games.

font-sans · Hanken Grotesk (body)

The interface font. Clean, legible, quietly modern.

.eyebrow / .hand-underline

Section eyebrow

Make it pop

Displaytext-[clamp(2.5rem,6vw,4.6rem)]

Heading 2clamp 1.9 to 2.75rem

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 ArKKade 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

125M

games played

100k

daily

Sam FJan 18, 20268 min read

Blog card for the Journal

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 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

6×

8×3

2−

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.