Design Components & Context Hub

[!TIP] For machine-parseable token values, see tokens.json.

Brand Color Hierarchy

Source: TimelyCare Brand Color Hierarchy, April 9, 2026

Tier	Colors	Usage
Primary	Navy	Anchor layouts, backgrounds, headers — the most dominant brand color. Conveys trust, credibility, institutional strength.
Secondary	Sky, Berry	Complement Navy in marketing and digital. Highlight key content or sections. Add warmth and approachability.
Tertiary	Dark Berry, Orange, Yellow	Add energy and emphasis. Use sparingly for accents, calls-to-action, and data visualization.
Neutral	Cream, Light Blue, Black, Grey	Create balance, readability, and space. Use for backgrounds and typography.

Lead with Navy → Support with Sky and Berry → Accent with Tertiary → Balance with Neutrals

[!NOTE] "Dark Berry", "Berry", "Sky", "Light Blue", "Orange", and "Yellow" are named stops within their parent tonal scales — not separate scales. See the annotated palette tables below.

Primitive Color Tokens

Primitive tokens define the full tonal range of each brand color. These are the raw color values that semantic tokens alias into. Each family has an 11-step scale (50–950) with a designated main stop.

Source: Default.tokens.json → "timelycare colors"

Primary

tc-navy

Main stop: 700 (#16538E)

Step	Hex	Notes
50	`#F2F7FD`
100	`#E4EEFA`
200	`#C2DCF5`
300	`#8CC0ED`
400	`#4FA0E1`
500	`#2884CF`
600	`#1A67AF`
700-main	`#16538E`
800	`#164776`
900	`#16385B`
950	`#102741`

Secondary

tc-sky

Main stop: 400 (#2DADCC) — "sky"

Step	Hex	Notes
50	`#EEFBFD`
100	`#D5EFF5`	light blue
200	`#B0E6F1`
300	`#7AD3E6`
400-main	`#2DADCC`	sky
500	`#209ABA`
600	`#1E7C9C`
700	`#1F647F`
800	`#215369`
900	`#204659`
950	`#102D3C`

tc-berry

Main stop: 800 (#8A163E) — "berry"

Step	Hex	Notes
50	`#FFF1F3`
100	`#FEE5E8`
200	`#FDCED6`
300	`#FBA6B4`
400	`#F8748C`
500	`#F04367`
600	`#DD2151`
700	`#C01A49`
800-main	`#8A163E`	berry
900	`#691130`	dark berry
950	`#4B061C`

Tertiary

tc-orange

Main stop: 600 (#F57600) — "orange"

Step	Hex	Notes
50	`#FFF9EC`
100	`#FFF2D3`
200	`#FFE2A5`
300	`#FFCC66`	yellow
400	`#FFAB32`
500	`#FF910A`
600-main	`#F57600`	orange
700	`#CC5902`
800	`#A1450B`
900	`#823A0C`
950	`#461B04`

tc-sage

Main stop: 600 (#4F7247)

Step	Hex
50	`#F6F8F5`
100	`#EAF1E7`
200	`#D4E2D0`
300	`#B1CBAA`
400	`#86AB7D`
500	`#5B7F52`
600-main	`#4F7247`
700	`#415B3A`
800	`#354A31`
900	`#2D3D2A`
950	`#152013`

Neutral

tc-cream

Main stop: 50 (#FCF5ED)

Step	Hex
50-main	`#FCF5ED`
100	`#F9EBDB`
200	`#F2D5B6`
300	`#E9B788`
400	`#E09257`
500	`#D97536`
600	`#CA5F2C`
700	`#A84926`
800	`#873B25`
900	`#6D3321`
950	`#3A1810`

tc-light-sand

Main stop: 50 (#F9F6F3)

Step	Hex
50-main	`#F9F6F3`
100	`#F0EBE4`
200	`#E6DDD3`
300	`#CCB9A5`
400	`#B69981`
500	`#A78168`
600	`#9A705C`
700	`#815C4D`
800	`#694C43`
900	`#564038`
950	`#2D201D`

tc-gray

Main stop: 950 (#000000) — "black"

Step	Hex	Notes
50	`#F9F9FA`
100	`#F4F4F5`
200	`#E5E6E6`
300	`#D3D4D4`
400	`#A3A3A3`
500	`#646565`	grey
600	`#525353`
700	`#404040`
800	`#262727`
900	`#191A1A`
950-main	`#000000`	black

Semantic Color Tokens

Semantic tokens map UI roles to specific primitive values. Each token has a light and dark mode value. The alias column shows which primitive the value comes from.

Source: color.semantic in tokens.json

Core UI

Token	Light	Dark	Light Alias	Dark Alias
primary	`#16538E`	`#4FA0E1`	tc-navy/700-main	tc-navy/400
primary-foreground	`#F9F9FA`	`#191A1A`	tc-gray/50	tc-gray/900
secondary	`#F4F4F5`	`#262727`	tc-gray/100	tc-gray/800
secondary-foreground	`#191A1A`	`#F9F9FA`	tc-gray/900	tc-gray/50
accent	`#E4EEFA`	`#16538E`	tc-navy/100	tc-navy/700-main
accent-foreground	`#16538E`	`#F9F9FA`	tc-navy/700-main	tc-gray/50
accent-border	`#C2DCF5`	`#8CC0ED`	tc-navy/200	tc-navy/300
destructive	`#DC2626`	`#F87171`	red/600	red/400
destructive-foreground	`#FFFFFF`	`#FFFFFF`	base/white	base/white
ring	`#A3A3A3`	`#646565`	tc-gray/400	tc-gray/500

Surface & Layout

Token	Light	Dark	Light Alias	Dark Alias
background	`#F9F6F3`	`#000000`	tc-light-sand/50	tc-gray/950-black
foreground	`#000000`	`#F9F9FA`	tc-gray/950-black	tc-gray/50
card	`#FFFFFF`	`#191A1A`	base/white	tc-gray/900
card-foreground	`#000000`	`#F9F9FA`	tc-gray/950-black	tc-gray/50
popover	`#FFFFFF`	`#262727`	base/white	tc-gray/800
popover-foreground	`#000000`	`#F9F9FA`	tc-gray/950-black	tc-gray/50
muted	`#F0EBE4`	`#262727`	tc-light-sand/100	tc-gray/800
muted-foreground	`#646565`	`#A3A3A3`	tc-gray/500	tc-gray/400
border	`#D3D4D4`	`#404040`	tc-gray/300	tc-gray/700
input	`#D3D4D4`	`#404040`	tc-gray/300	tc-gray/700
input-bg	`#FFFFFF`	`#191A1A`	base/white	tc-gray/900

Chart

Token	Light	Dark	Light Alias	Dark Alias
chart-1	`#16538E`	`#2884CF`	tc-navy/700-main	tc-navy/500
chart-2	`#2DADCC`	`#B0E6F1`	tc-sky/400-sky	tc-sky/200
chart-3	`#F57600`	`#FFAB32`	tc-orange/600-orange	tc-orange/400
chart-4	`#8A163E`	`#DD2151`	tc-berry/800-berry	tc-berry/600
chart-5	`#4F7247`	`#86AB7D`	tc-sage/600-main	tc-sage/400

Sidebar

Token	Light	Dark	Light Alias	Dark Alias
sidebar-background	`#FFFFFF`	`#191A1A`	base/white	tc-gray/900
sidebar-foreground	`#646565`	`#F9F9FA`	tc-gray/500	tc-gray/50
sidebar-primary	`#191A1A`	`#16538E`	tc-gray/900	tc-navy/700-main
sidebar-primary-foreground	`#F9F9FA`	`#F9F9FA`	tc-gray/50	tc-gray/50
sidebar-accent	`#E4EEFA`	`#16385B`	tc-navy/100	tc-navy/900
sidebar-accent-foreground	`#16538E`	`#E4EEFA`	tc-navy/700-main	tc-navy/100
sidebar-accent-hover	`#F4F4F5`	`#262727`	tc-gray/100	tc-gray/800
sidebar-accent-hover-foreground	`#646565`	`#F9F9FA`	tc-gray/500	tc-gray/50
sidebar-border	`#D3D4D4`	`#404040`	tc-gray/300	tc-gray/700
sidebar-ring	`#A3A3A3`	`#525353`	tc-gray/400	tc-gray/600