@tikkaroo/design
Design system
Outback Warm. Every token and component used by the app and this site. Toggle the theme to check both modes. Rules live in design/DESIGN.md.
Brand
Colour
Semantic tokens. Use bg-*, text-*, border-* with these names.
canvas
Page background
surface
Cards, panels
surface-2
Sunken, hover
line
Borders
line-strong
Input borders
fg
Text
fg-muted
Secondary text
fg-subtle
Placeholders
accent
Primary action
accent-text
Accent as text
accent-soft
Selection, tint
success
Resolved, live
success-soft
Success tint
warning
Pending, notes
warning-soft
Warning tint
danger
Errors
danger-soft
Error tint
inverse
Always-dark panel
Themes
Personal colour themes in the app. Alternative --tk-* values; see DESIGN.md §2a.
Outback Warm
Red-earth ochre on warm paper. The original.
AAlightlowest accent button 4.65:1
AAdarklowest accent button 5.37:1
Eucalypt
Sage greens and cool bark greys.
AAlightlowest warning 5.24:1
AAdarklowest danger 5.98:1
Ocean
Deep-water blue on crisp white.
AAlightlowest warning 5.24:1
AAdarklowest accent button 5.55:1
Dusk
Twilight violet, soft lavender greys.
AAlightlowest warning 5.24:1
AAdarklowest accent button 5.76:1
Desert Rose
Dusty rose with a warm pink glow.
AAlightlowest warning 5.24:1
AAdarklowest danger 5.98:1
Ghost Gum
Quiet monochrome. Ink on bone.
AAlightlowest warning 5.24:1
AAdarklowest danger 5.98:1
Type
Geist and Geist Mono
Display large 72
Display 56
Display small 40
Page title 24
Panel title 18
Reading text 16. Plain-spoken, warm and brief.
UI text 14 is the default for product interfaces.
Meta 12, for timestamps and hints
Eyebrow label · mono 11
Buttons
One primary per view.
Forms
We'll never share it.
Password must be at least 8 characters.
Switches apply immediately; no save button.
Badges, avatars, keys
Tabs
Callouts
Heads up
Connect your support email
Gmail access expired
Cards and empty states
Current plan
Free trial
Your trial ends on 26 November. No card needed until then.
Inbox zero. Nice work.