Kahoot Brand Design System Deep-Dive

1. Brand Overview

Kahoot is energy in a bottle. It's loud without being messy. Everything about their visual language screams participation, play, and immediacy — exactly what you’d expect from a platform built to make quizzes feel like games.
But Kahoot is not just “fun for fun’s sake.” The design hints at a tuned, commercially aware product aimed at teachers, students, companies running training, and event organizers. It’s gamified learning with business polish under the hood.

When you load https://kahoot.it/ you’re met with high-contrast elements, blunt typography, and unapologetic color. Their purple identity is the anchor, but the actual UI leans heavily on grayscale and high-saturation accents for clarity and speed. This is smart — purple is brand signal, but interaction cues need contrast and familiarity in UI contexts.

Their design philosophy here:

Make everything legible at a glance (quizzes move fast).
Keep spacing tight enough to fit on a projector or mobile, but open enough to prevent cognitive overload.
Reserve animation and transitions for functional state changes, not decoration.

One interesting thing — the site isn’t drowning in illustrations or mascots. That’s a choice. They know the Kahoot game screen itself is the experience. The surrounding UI is restrained so the game remains the loudest thing in the room.

And, they tread carefully between "child-friendly" and "corporate safe." Bold bright colors alongside Montserrat give it friendliness; even, flat shadows and disciplined radii give it credibility for enterprise use. Kahoot could have gone wild with rounded, bubbly cartoon UI — they didn’t. Respectable move. This is a gaming service that can sit inside a corporate training day without embarrassment.

2. Color System

They didn’t settle for just one purple. The extracted data shows multiple purples, plus greens, blues, oranges, reds, and yellows — each in multiple tonal steps — because Kahoot's visuals need to handle correct/incorrect states, varied themes, and accessibility across bright screens.

2.1 Primary Colors

The functional “primary” in UI is #1368ce (RGB 19,104,206) — a bright, medium-deep blue used for interactive states like focus outlines and acceptance actions. The brand identity primary is #46178f (Purple 500 in tokens) — deeper, playful, and distinctive. Blue is clarity, purple is emotion.

They nailed the job split: Blue makes buttons obvious; purple makes the brand memorable. Competitors like Quizlet lean on one color for both brand and UI actions (often causing contrast issues). Kahoot smartly separates them.

2.2 Complete Palette

Color Name / Token	Hex	Role	Usage
`--colors-accessPass-purple-500`	#1B0250	Dark purple	Premium Access Pass identity
`--colors-purple-500`	#46178f	Brand core purple	Primary brand identity surfaces
`--colors-purple-700`	#25076b	Deeper purple	Background, overlay strength
`--colors-purple-300`	#864cbf	Lighter purple	Secondary brand accent
`--colors-green-300`	#66bf39	Bright green	Correct answer feedback
`--colors-green-700`	#106b03	Dark green	Success confirmations
`--colors-accessPass-gold-500`	#B78D00	Gold midtone	Premium Access Pass
`--colors-accessPass-gold-700`	#947100	Dark gold	Premium tier headers
`--colors-yellow-300`	#ffc00a	Bright yellow	Secondary feedback, playful accents
`--colors-yellow-500`	#ffa602	Mid yellow	Active answer highlight
`--colors-yellow-700`	#d89e00	Deep yellow	Warnings /
`--colors-blue-300`	#45a3e5	Light blue	Links hover, secondary actions
`--colors-blue-700`	#0542b9	Deep blue	Strong backgrounds in blue themes
`--colors-business-700`	#083c8f	Corporate blue	Business package contexts
`--colors-business-500`	#1150b2	Mid corporate blue	Business identity accents
`--colors-teal-500`	#0aa3a3	Teal mid	Calm accent, alternative themes
`--colors-teal-300`	#33CCCC	Light teal	Playful blue-green accents
`--colors-orange-500`	#eb670f	Mid orange	Incorrect answer feedback
`--colors-orange-300`	#f5a23d	Light orange	Warm accents
`--colors-orange-700`	#db3c00	Deep orange	Error / negative states
`--colors-red-300`	#FF3355	Light red	Immediate error cues
`--colors-red-700`	#c60929	Dark red	Severe alerts
`--colors-status-error`	#e21b3c	Error semantic	Validation errors
`--colors-status-success`	#26890c	Success semantic	Positive confirmation
`--colors-grey-0`	#ffffff	Pure white	BG, text
`--colors-grey-300`	#f2f2f2	Light neutral	UI surfaces
`--colors-grey-400`	#e9e9e9	Light neutral	Card BG, dividers
`--colors-grey-500`	#cccccc	Mid grey	Borders
`--colors-grey-600`	#b2b2b2	Mid-dark grey	Placeholder text
`--colors-black`	#000000	Black	Text, high-contrast icons

Plus semantic usage values found:

#333333 (Dark grey for text/headers)
#696969, #555555 (Secondary grayscale text)
#d8d8d8 (Light neutral)
#27455c (Muted dark blue-grey)
#3860be (Hover link color)
Transparent blacks rgba(0,0,0,0.2) / 0.22 for shadows.

2.3 Color Relationships

Notably they keep bright accent colors away from body text. This prevents typical accessibility fails. Primary buttons use blue (#1368ce) with white text — high contrast. The purple brand color is naturally lower-contrast against white, so they avoid using it for small UI text.

Red/green/yellow triplets have clear tonal separation: bright “300” shades for immediate visibility, dark “700” shades for text or strong blocks. This matters in fast-paced quiz UIs — users must immediately identify correctness without reading.

Dark mode? Not present at kahoot.it. Gray tokens would adapt well though; grey-300, grey-400 are light neutrals that would invert to dark easily.

2.4 Usage Guide

Works:

Blue 300 (#45a3e5) on grey surfaces is bright enough to pop without screaming.
Purple 500 (#46178f) paired with yellow 300 is peak “Kahoot” — fun and saturated.
Status-success (#26890c) with white text feels direct, no pastel softness.

Avoid:

Purple 500 text on grey 400 backgrounds — fails contrast.
Using multiple saturated accents in one line of UI — Kahoot uses one accent per interactive unit.
Mixing brand purple with status red or error orange — both fight for dominance.

3. Typography

3.1 Font Families

Primary: Montserrat — geometric sans. Friendly but modern.
Fallback stack: Noto Sans Arabic, Helvetica Neue, Helvetica, Arial, Bai Jamjuree — covers Latin + Arabic + Thai without visual clash.
No Google Fonts or Adobe as source — direct inclusion. No variable fonts.

Montserrat here is un-smoothed — standard font weights for clarity in projection contexts.

3.2 Type Scale

Element	Font	Size	Weight	Line Height
heading-1	Montserrat	24px	400	—
heading-1	Montserrat	16px	700	1.25
heading-1	Montserrat	16px	400	—
button	Montserrat	16px	700	1.25
button	Montserrat	16px	400	—
button	Montserrat	14.4px	700	1.00
caption	Montserrat	14px	400	1.43
caption	Montserrat	14px	500	1.43
caption	Montserrat	14px	700	1.50
caption	Montserrat	14px	600	1.50
caption	Montserrat	13.6px	400	—
caption	Montserrat	13px	400	1.08
caption	Montserrat	12.992px	400	1.50
link	Montserrat	14px	400	1.43
link	Montserrat	14px	700	1.43
link	Montserrat	13px	400	1.08
link	Montserrat	12.992px	400	1.50
link	Montserrat	12px	400	—
button	Montserrat	12px	700	1.00
button	Arial	13.3333px	400	—

3.3 Hierarchy

Montserrat’s widths keep text clean at smaller sizes — crucial for mobile game pins entry screens. Weight jumps are used instead of massive size jumps. Example: same 14px caption size appears in multiple weights (400, 500, 600, 700) to create emphasis without wrecking layout.

Headings are relatively small — top-level heading at 24px tells me: they expect game/projector UI to be the focal point, not marketing copy.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px scale — but with odd fractional sizes thrown in (11.2px, 14.4px) for optical balance.

Value	rem	Count	Notes
1px	0.06rem	3	Thin borders
2px	0.13rem	1	Divider lines
3px	0.19rem	1	Tight gaps
4px	0.25rem	15	Micro spacing
5px	0.31rem	3	Icon offset
6px	0.38rem	2	Input padding
8px	0.50rem	4	Small grid
10px	0.63rem	19	Default padding
11.2px	0.70rem	8	Optical button balance
12px	0.75rem	21	Common UI gap
15px	0.94rem	4	Inline component gap
16px	1.00rem	9	Button vertical padding
19px	1.19rem	2	Mini section gap
20px	1.25rem	3	Card spacing
25px	1.56rem	3	Larger gap
32px	2.00rem	1	Section gap
68px	4.25rem	1	Hero space

4.2 Layout

Breakpoints all over the map — smallest at 98px (language picker indicator?) and up to 1800px for ultra-wide. Multiple micro-breakpoints around 400–550px show tight adjustments for mobile form flows — vital for pin entry and login screens that appear in varied environments. Desktop adjustments at 769px, 1024px, 1280px, 1800px.

5. Visual Elements

Border Radius System

Radius	Count	Typical Elements
1px	8	Spans, tiny badges
2px	16	Buttons, basic divs
2.5px	1	Region container
3px	2	Div corners
4px	4	Inputs, forms
8px	5	Links, rounded cards
16px	2	Comboboxes, pill buttons
17px	1	Filter toggle
20px	3	Spans
50px	1	Cookie list search field
100px	2	Large pill buttons

Not shy about mixing small fixed radii with massive pills — that 100px pill radius is their playful “Kahoot” button feel.

Shadows

Mostly subtle:

rgba(0,0,0,0.2) 0px 4px 8px — soft drop for elevation.
rgba(0,0,0,0.15) 0px 2px 4px.
Combined shadow + inset for pressed effects.

Flat greys (rgb(199,197,199)) used for inner shadows — gives tactile pressed button.

Borders

Very light — 1px solids in greys (#ccc, #d8d8d8) for input outlines. Occasionally colored borders (blue #1368ce for focus, green #32ae88 for statuses) with 1px weight.

6. Components

6.1 Buttons

Two main variants observed:

Language Picker Button:

Default: bg white (#fff), text black (#000), border-radius 16px, no border
Hover: bg rgb(30,174,219), text white — fully inverts
Focus: 2px black outline + border, background same as hover, reduced opacity (0.7)

Enter Pin Form Button:

Default: bg dark grey (#333), text white, padding 0px 16px 4px, radius 4px, inset shadow for depth
Hover: same hover as language button — blue bg, white text
Active: bg #9e9e9e, shadow removed
Focus: black 2px outline, blue bg, white text

6.2 Links

Default: white text, no underline (on dark bg).
Hover: color shifts to #3860be, still no underline.

6.3 Forms

Input focus: border and bg swap to blue (#1eaedb), text shift to white — almost “button-like” focus appearance. Distinct from casual web forms — these inputs want to feel like game interactive elements.

7. Design Tokens

:root {
  /* Colors */
  --colors-accessPass-purple-500: #1B0250;
  --colors-purple-500: #46178f;
  --colors-purple-700: #25076b;
  --colors-purple-300: #864cbf;
  --colors-green-300: #66bf39;
  --colors-green-700: #106b03;
  --colors-accessPass-gold-500: #B78D00;
  --colors-accessPass-gold-700: #947100;
  --colors-yellow-300: #ffc00a;
  --colors-yellow-500: #ffa602;
  --colors-yellow-700: #d89e00;
  --colors-blue-300: #45a3e5;
  --colors-blue-700: #0542b9;
  --colors-business-700: #083c8f;
  --colors-business-500: #1150b2;
  --colors-teal-500: #0aa3a3;
  --colors-teal-300: #33CCCC;
  --colors-orange-500: #eb670f;
  --colors-orange-300: #f5a23d;
  --colors-orange-700: #db3c00;
  --colors-red-300: #FF3355;
  --colors-red-700: #c60929;
  --colors-status-error: #e21b3c;
  --colors-status-success: #26890c;
  --colors-grey-0: #ffffff;
  --colors-grey-300: #f2f2f2;
  --colors-grey-400: #e9e9e9;
  --colors-grey-500: #cccccc;
  --colors-grey-600: #b2b2b2;
  --colors-black: #000000;
  --color-333: #333333;
  --color-696969: #696969;
  --color-555555: #555555;
  --color-d8d8d8: #d8d8d8;
  --color-27455c: #27455c;
  --color-3860be: #3860be;

  /* Typography */
  --font-primary: 'Montserrat', 'Noto Sans Arabic', 'Helvetica Neue', Helvetica, Arial, 'Bai Jamjuree';
  --font-secondary: Arial;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11-2: 11.2px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-19: 19px;
  --space-20: 20px;
  --space-25: 25px;
  --space-32: 32px;
  --space-68: 68px;

  /* Border Radius */
  --radius-1: 1px;
  --radius-2: 2px;
  --radius-2-5: 2.5px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-17: 17px;
  --radius-20: 20px;
  --radius-50: 50px;
  --radius-100: 100px;

  /* Shadows */
  --shadow-soft: rgba(0,0,0,0.2) 0px 4px 8px;
  --shadow-button: rgba(0,0,0,0.15) 0px 2px 4px, rgba(0,0,0,0.25) 0px -4px inset;
  --shadow-inset-light: rgb(199,197,199) 0px 0px 12px 2px;
}

8. AI Coding Assistant Prompt

# Kahoot Design System Specification

You are a Kahoot design expert. Build UIs matching their visual language exactly.

## Brand Context
Kahoot's design balances playful saturation with corporate clarity. The UI must be fast, high-contrast, and readable on various devices — including projectors. Brand purple is for identity; functional blues, greens, and reds are for interactions and feedback.

## Color Palette
- AccessPass Purple 500: #1B0250 — Premium product identity
- Purple 500: #46178f — Main brand identity
- Purple 700: #25076b — Overlay / strong purple background
- Purple 300: #864cbf — Light brand accent
- Green 300: #66bf39 — Correct answer highlight
- Green 700: #106b03 — Success confirmation
- AccessPass Gold 500: #B78D00 — Premium branding
- AccessPass Gold 700: #947100 — Gold dark tone
- Yellow 300: #ffc00a — Bright highlight
- Yellow 500: #ffa602 — Mid yellow accent
- Yellow 700: #d89e00 — Warning
- Blue 300: #45a3e5 — Link hover, secondary action
- Blue 700: #0542b9 — Deep blue backgrounds
- Business 700: #083c8f — Corporate branding
- Business 500: #1150b2 — Mid corporate accent
- Teal 500: #0aa3a3 — Calm accent option
- Teal 300: #33CCCC — Light playful blue-green
- Orange 500: #eb670f — Incorrect answer
- Orange 300: #f5a23d — Warm accent
- Orange 700: #db3c00 — Strong error
- Red 300: #FF3355 — Error
- Red 700: #c60929 — Severe error
- Status Error: #e21b3c — Validation error
- Status Success: #26890c — Success
- Grey 0: #ffffff — Background/text
- Grey 300: #f2f2f2 — Surface background
- Grey 400: #e9e9e9 — Card background
- Grey 500: #cccccc — Borders
- Grey 600: #b2b2b2 — Placeholder
- Black: #000000 — Text/icons
- 333333: #333333 — UI text
- 696969: #696969 — Secondary text
- 555555: #555555 — Secondary text
- d8d8d8: #d8d8d8 — Neutral background
- 27455c: #27455c — Muted blue-grey
- 3860be: #3860be — Link hover

## Typography
Font: Montserrat, Noto Sans Arabic, Helvetica Neue, Helvetica, Arial, Bai Jamjuree  
Secondary: Arial  

| Element | Size | Weight | Line Height | Use |
|---------|------|--------|-------------|-----|
| H1 | 24px | 400 | — | Page titles |
| H1 small | 16px | 700 | 1.25 | Section headings |
| Button | 16px | 700 | 1.25 | Primary / secondary actions |
| Button light | 16px | 400 | — | Secondary action |
| Button small bold | 14.4px | 700 | 1.00 | Compact action |
| Caption | 14px | 400-700 | 1.43-1.50 | Secondary text |
| Link | 14px | 400-700 | 1.43 | Navigation/inline links |
| Caption small | 13px | 400 | 1.08 | Tiny labels |
| Link small | 13px | 400 | 1.08 | Tiny links |
| Button tiny | 12px | 700 | 1.00 | Mini button |
| Link tiny | 12px | 400 | — | Tiny link |

## Spacing & Grid
Base: 8px  
Scale: 1,2,3,4,5,6,8,10,11.2,12,15,16,19,20,25,32,68px  
Use exact multiples for padding, margins, and gaps.

## Border Radius
- xs: 1px — tiny badges
- sm: 2px — general buttons
- sm-med: 4px — inputs/forms
- md: 8px — cards, links
- lg: 16px — pill buttons
- xl: 50px — large search
- pill: 100px — large CTA pill buttons

## Shadows & Depth
- Soft: rgba(0,0,0,0.2) 0px 4px 8px  
- Button pressed: rgba(0,0,0,0.15) 0px 2px 4px, rgba(0,0,0,0.25) 0px -4px inset  

## Component Specifications

### Primary Button
Default: bg #fff, text #000, radius 16px, no border  
Hover: bg #1eaedb, text #fff  
Focus: 2px solid #000, bg #1eaedb, border 1px #000, opacity 0.7  
Active: no visual change except possible opacity  
Disabled: reduce opacity  

### Secondary (Enter Pin) Button
Default: bg #333333, text #fff, padding 0px 16px 4px, radius 4px, inset shadow  
Hover: bg #1eaedb, text #fff  
Active: bg #9e9e9e, no shadow  
Focus: 2px solid #000, bg #1eaedb, text #fff

### Navigation Links
Default: color #fff, no underline  
Hover: color #3860be, no underline

### Input Fields
Default: bg #fff, text #000, radius 16px, no border  
Focus: outline 2px solid #000, bg #1eaedb, text #fff, border 1px solid #000

### Cards
Surface: bg #f2f2f2, radius 8px, padding 20px, no heavy shadow

## Layout & Responsive Rules
Breakpoints: 98, 300, 400, 425, 426, 428, 450, 476, 500, 530, 550, 600, 769, 890, 896, 897, 900, 926, 1023, 1024, 1200, 1211, 1280, 1800px.

## Interaction Rules
- Transition: 150ms ease on state changes  
- Hover states: color/bg change without delay  
- Focus indicator: 2px solid high-contrast outline  

## DO
- Use only palette colors  
- Stick to 8px base spacing grid (allow 4px offsets where observed)  
- Use Montserrat for all UI text  
- Reserve purple for brand identity, not for functional cues  
- Highlight correct/incorrect answers with green/red/yellow tokens

## DON'T
- Invent new accent colors  
- Use purple for small text against light background  
- Apply shadows heavier than provided  
- Mix sharp and rounded corners within single component

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #ffffff;
  color: #000000;
  border-radius: 16px;
  border: none;
  font-weight: 700;
  font-size: 16px;
  padding: 0;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #1eaedb;
  color: #ffffff;
}
.btn-primary:focus {
  outline: 2px solid #000000;
  background: #1eaedb;
  color: #ffffff;
  opacity: 0.7;
  border: 1px solid #000000;
}

Secondary Button:

.btn-secondary {
  background: #333333;
  color: #ffffff;
  border-radius: 4px;
  padding: 0 16px 4px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: rgba(0,0,0,0.15) 0px 2px 4px, rgba(0,0,0,0.25) 0px -4px inset;
  transition: background 150ms ease;
}
.btn-secondary:hover {
  background: #1eaedb;
  color: #ffffff;
}

Input:

.input {
  background: #ffffff;
  color: #000000;
  border-radius: 16px;
  border: none;
}
.input:focus {
  outline: 2px solid #000000;
  background: #1eaedb;
  color: #ffffff;
  border: 1px solid #000000;
}


---

## 9. Summary

**TL;DR**  
Kahoot's design system mixes fun saturation with disciplined UI patterns. Brand purple is emotion, blue is function. Montserrat in tight sizes keeps it legible at speed. Spacing is mostly 8px scale, with occasional optical adjustments. Buttons have pill or block shapes depending on context, and focus states are strong, visible outlines.

**Brand Keywords**  
- playful-clarity  
- saturation-disciplined  
- speed-readable  
- gamified-corporate

Kahoot Design System: Playful Yet Corporate-Safe UI

Brand Identity

Color Palette

Typography

Design Style

Full Analysis