Living document

TrackCheck
Design System

The visual language behind TrackCheck — colors, typography, components, and motion. One reference, deliberately opinionated.

v1.0.0Based on TC-026Dark-first

Color System

Canonical palette, dark-first tokens, and WCAG contrast ratios.

Primary brand color

TrackCheck Green

#18bd63

oklch(0.69 0.17 160)

Green 500

100

200

300

400

600

700

800

Dark theme surface tokens

--background#25262d

Page background

--card#2e2f38

Elevated surfaces, cards

--sidebar#21222a

Sidebar, header bar

--muted#363740

Subtle backgrounds

--border#3d3e48

Dividers, outlines

--foreground#f2f2f2

Body text

--muted-foreground#989898

Secondary text

--accent#2d3b33

Active nav, selection

Semantic colors

Success

12 / 14 events tracked

#18bd63

Warning

Schema drift detected

#d4a017

Error

Missing required property

#e54d2e

Info

GA4 sync scheduled 14:30 UTC

#4a82d5

WCAG contrast ratios

Preview	Foreground	Background	Ratio	Level
Aa	`#f2f2f2`	`#25262d`	15.2 : 1	✓ AAA
Aa	`#989898`	`#25262d`	5.4 : 1	✓ AA
Aa	`#18bd63`	`#25262d`	5.9 : 1	✓ AA
Aa	`#ffffff`	`#18bd63`	2.7 : 1	⚠ AA large only
Aa	`#d4a017`	`#25262d`	7.1 : 1	✓ AAA
Aa	`#e54d2e`	`#25262d`	4.8 : 1	✓ AA

Canonical Note — Chrome Extension

The extension currently ships an Indigo palette (#6366F1) which diverges from the brand green canonicalized here. This is a known divergence, tracked for resolution in TC-017. Documented intentionally for transparency.

Typography

Inter for product UI. JetBrains Mono for code, tokens, and event names.

Type scale

Track your events
Display36 / 700
Know what's firing
H130 / 700
Event Coverage Overview
H224 / 600
Schema Drift Detected
H320 / 600
Required property missing
H418 / 600
GA4 event tracking ensures your analytics data reflects real user behavior.
Body14 / 400
Event synced at 14:30 UTC
Small13 / 400
Last updated Jan 14, 2026
Caption12 / 400
page_view · purchase · scroll_depth
Code13 / 400 mono

AaInter

Regular400

Medium500

Semibold600

Bold700

{ }JetBrains Mono

page_view

{ "value": 42 }

// event property

Letter spacing

Default body text

tracking: 0

Event Schema

tracking: 0.05em

Display headline

tracking: -0.015em

Iconography

Lucide icon family. 1.5px stroke, 20px default size, consistent metaphors.

Semantic icons

Success

#18bd63

Warning

#d4a017

Error

#e54d2e

Info

#4a82d5

Core library

lucide-react

activity

bar-chart

bell

clock

database

eye

file-text

filter

plus

settings

trash

user

zap

arrow-right

Size guide

Small · 16px

Default · 20px

Large · 24px

Components

Interactive, live demos. These are the real primitives used in production.

Buttons

Sizes

States

Form inputs

Work email

We'll never share your email.

Event name

This field is required.

Property key

✓ Available

Managed by admin

Cards

Event details

Default

Last synced 2 hours ago. 14 events tracked, 0 drifting.

Event details

Elevated

Last synced 2 hours ago. 14 events tracked, 0 drifting.

Event details

Interactive

Last synced 2 hours ago. 14 events tracked, 0 drifting.

Badges & tags

TrackedDriftingMissingInfoDraft

Alerts

Event schema validated

All 14 events match their expected property shape.

2 events have schema drift

checkout_start is firing without currency. Review diff to resolve.

GA4 connection failed

Credentials have expired. Reconnect your analytics property.

Sync scheduled for 14:30 UTC

Your next automated drift check will run in 2 hours.

Spacing & Layout

4-point scale. Consistent rhythm across cards, sections, and layouts.

Spacing scale

space-1 · 4px
Micro spacing, icon-to-label gap
space-2 · 8px
Tight internal padding
space-3 · 12px
Default internal padding
space-4 · 16px
Section spacing, card padding
space-6 · 24px
Section gap, between cards
space-8 · 32px
Page section gap
space-10 · 40px
Major layout sections
space-16 · 64px
Page-level vertical rhythm

Border radius

4px

6px

8px

12px

16px

full

Breakpoints

Mobile

375px

Tablet

768px

Desktop

1280px+

Motion

Purposeful animation only. Communicates state, orients spatially, or signals feedback.

Principles

Duration · fast

150msHover, button press

Duration · standard

250msSection reveals

Duration · slow

400msPage transitions

Easing · standard

ease-outEntering viewport

Easing · interactive

ease-in-outUser-driven

Easing · exit

ease-inLeaving viewport

Section reveal

fadeInUp · 350ms

page_view

Tracked · 2s ago

Interactive hover

scale 1.02 · 150ms

Stagger

60ms between

item_click
add_to_cart
checkout_start

Rule. Motion must either (a) communicate state change, (b) guide spatial orientation, or (c) provide feedback to user interaction. Animation for decoration is prohibited.

Voice & Tone

Direct. Specific. Technical without condescension. Help users act, don't apologize.

Sounds like · doesn't sound like

Event checkout_start is missing currency.

Oops! Something went sideways 🙃

12 of 14 events tracked. 2 drifting.

We found some issues with your events!

Reconnect GA4 to resume sync.

Please try to reconnect your account again.

Error messages

Generic

Something went wrong.

Specific

Event 'page_view' is missing required property 'page_title'. This will cause data gaps in your GA4 reports. Add the property to your event schema.

Generic

Sync failed.

Specific

GA4 sync failed because credentials expired 3 days ago. Reconnect in Settings → Integrations.

Terminology

Correct	Avoid
`Event`	Hit
`Property`	Parameter
`Tracked`	Captured
`Schema drift`	Event mismatch
`Flow`	Funnel
`Coverage`	Implementation rate

Writing rules

Sentence caseVerb-first CTAsMax 3-word buttonsSecond person ("you")

TrackCheckDesign System

TrackCheck
Design System