HeatCheck
OverviewKitchen sinkScreens

Design System · v0.1

The HeatCheck kitchen sink

Every primitive, semantic token, text style, and component recipe in one place — rendered from the real Chakra createSystem theme. Toggle the theme (top right) to check both color modes.

theme.tokens.colors

Color primitives

Raw 50→950 ramps. Neutral is a violet-tinted slate so the whole UI reads as one family. Components never consume these directly — they use the semantic layer below.

Violet · brand / primary

colors.violet.*

50

100

200

300

400

500

600

700

800

900

950

Magenta · accent / energy

colors.magenta.*

50

100

200

300

400

500

600

700

800

900

950

Gray · neutral (violet-tinted)

colors.gray.*

50

100

200

300

400

500

600

700

800

850

900

925

950

Emerald · success / LIVE

colors.green.*

50

100

200

300

400

500

600

700

800

900

950

Amber · warning / DRAFT

colors.amber.*

50

100

200

300

400

500

600

700

800

900

950

Red · danger / destructive

colors.red.*

50

100

200

300

400

500

600

700

800

900

950

Gauge energy stops

colors.gauge.*

Interest is intensity, not good/bad — so the gauge ramps cool/dim → vivid/hot within the brand family. The one intentional low→high hue mapping.

low

mid

high

peak

theme.semanticTokens

Semantic tokens

Purpose-named aliases that resolve per color mode. Flip the theme toggle — every tile re-resolves with zero component changes. This is the layer screens actually use.

Surfaces

bg · bg.subtle · bg.muted · bg.emphasized · bg.panel · bg.inverted

Aa

bg

page background

Aa

bg.subtle

subtle region

Aa

bg.muted

muted fill

Aa

bg.emphasized

emphasized

Aa

bg.panel

cards / panels

Aa

bg.inverted

inverted

Text & borders

fg.* · border.*

Aa

fg

primary text

Aa

fg.muted

secondary text

Aa

fg.subtle

tertiary / hints

border

border

default

border

border.muted

muted

border

border.subtle

subtle

border

border.emphasized

emphasized

Color palettes

brand · accent · danger · success · warning → solid / subtle / muted / fg
subtle
muted

brand.*

Brand · violet

subtle
muted

accent.*

Accent · magenta

subtle
muted

danger.*

Danger · red

subtle
muted

success.*

Success · emerald

subtle
muted

warning.*

Warning · amber

theme.textStyles · theme.fonts

Typography

Display face is Space Grotesk (headings, hero, gauge numerals); body/UI is Geist; numerals & code use Geist Mono. Display sizes scale fluidly with clamp().

Fonts

fonts.display

Space Grotesk

The quick brown fox 0123456789

fonts.body

Geist

The quick brown fox 0123456789

fonts.mono

Geist Mono

The quick brown fox 0123456789

Text styles

Display 2xl

display · clamp 44→80

700 · -0.04em

Display xl

display · clamp 36→60

700

Display lg

display · clamp 30→48

700

Display md

display · clamp 24→36

600

Heading xl

2xl · 24

600

Heading lg

xl · 20

600

Heading md

lg · 18

600

Body large — the quick brown fox jumps over the lazy dog.

lg · 18

400 · 1.625

Body medium — the quick brown fox jumps over the lazy dog.

md · 16

400 · 1.5

Body small — the quick brown fox jumps over the lazy dog.

sm · 14

400

Label — Active voters

sm · 14

500

Overline · section

xs · 12

600 · 0.08em · upper

Caption — your vote expires in 1:20

xs · 12

muted

7.4

gauge numeral · tnum

700

theme.tokens.spacing · radii

Spacing & radii

4px base spacing scale (Chakra default, kept 1:1). Radii lean rounder for the friendly, energetic tone.

Spacing

spacing.*

spacing.1

spacing.2

spacing.3

spacing.4

spacing.5

spacing.6

spacing.8

spacing.10

spacing.12

spacing.16

spacing.20

spacing.24

Radii

radii.*

radii.xs

radii.sm

radii.md

radii.lg

radii.xl

radii.2xl

radii.3xl

radii.full

theme.tokens.shadows · layerStyles

Elevation & surfaces

Adaptive shadows (deeper in dark mode) plus brand glow for the “vibrant where it counts” moments, and layer styles for surface recipes.

Shadows

shadows.*

shadows.xs

shadows.sm

shadows.md

shadows.lg

shadows.xl

shadows.2xl

glow.brand

Layer styles

layerStyles.*

layer-panel

Elevated panel

layer-glass

Glass

layer-brand

Brand tint

layer-outline

Outline

theme.tokens.durations · easings

Motion

Motion is tokenized, not magic numbers. Hover a tile to feel the easing; the gauge & vote feedback use easings.spring and durations.gauge.

durations: faster 100 · fast 150 · normal 200 · moderate 280 · slow 400 · slower 600 · gauge 700ms · easings: standard · spring · decelerate · accelerate

slotRecipe · gauge

The gauge

The product’s signature element and emotional centerpiece. SVG semicircle, energy-gradient fill, soft glow. Drag the slider to drive it live.

Interactive

7.0interest
010

States

2.8
9.5
No votes yet

Low · high · empty (score: null)

recipe · button

Buttons

Variants map to a Chakra variant prop; sizes to size. Destructive actions get their own visually-distinct variants.

Variants

Sizes

States & modifiers

Full width

slotRecipe · field / input / select / switch / stepper / datePicker

Forms & controls

We'll never share it.
Lowercase letters, numbers, and hyphens only.

Switch

Stepper (vote TTL)

2:00

Time field

Calendar (inline date picker)

26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
1
2
3
4
5

slotRecipe · richTextEditor

Rich text

The show-notes editor. Bold, italic, H1–H3, paragraph, bulleted, numbered and checklist, undo/redo — nothing else, so the document schema and the toolbar can never disagree. Toggle Edit to see view mode: identical typography, no chrome, so switching never reflows the notes.

Editor / view mode

recipe · badge / status

Status & badges

Show status

LiveDraftEnded

Badges

BrandAccentSuccessWarningDangerNeutralSolid

Voter count · chips · avatar

128 active voters🏈 NBA PlayoffsOn air live
GT

recipe · alert / toast / slider / countdown

Feedback & live controls

Alerts replace the old ad-hoc error text. The vote slider & countdown are the most-used voter controls.

Heads up
Changing the vote TTL only affects votes cast from now on.
You're live — voters at heatcheck.io/gradytv can vote now.
Resetting voting clears everyone's current score for this segment.
That username is already taken.
How interesting is this?8
12345678910
Your vote expires in2:00
Your vote expires in0:38
Expiring…0:09

slotRecipe · card / table / stat / topic-item

Cards, data & lists

Segment list (host)

Draft strategy for Round 2

On air

Trade deadline reactions

History table

SegmentScoreVotersVotesStarted
NBA Playoffs9.014288Jul 28, 8:14 PM
Draft strategy6.412061Jul 28, 8:31 PM
Ref controversy3.19840Jul 28, 8:52 PM
General discussion–––open

Cards, stats, tabs & empty state

7.4

Interest

128

Active voters

No segments yet

Add a segment to start scoring.

recipe · poll (deferred §13.2)

Polls

A host-initiated one-off question — multiple choice or a 1–10 rating — using the accent (magenta) palette so it reads as a distinct mode from the continuous interest gauge.

Option poll · choose

Poll · live

Who wins Sunday?

Option poll · live results

Chiefs

58%

Bills

42%

128 votes

updating live…

Rating poll · live average

7.2

average of 96 ratings