Swatch guide

Color and font guide

Verified against timeblok.work and ptos.timeblok.work on Nov 8, 2026. Click any hex to copy it.

Core palette

Name	RGB	Variable	Use
Primary green	rgb(7, 116, 79)	--primary	Buttons, links, logo green, key shapes
Deep green	rgb(9, 63, 47)	--secondary-foreground	Dark bands, footer, headings on sand
Cream	rgb(239, 242, 233)	--background	Page background
Sand	rgb(254, 239, 200)	--secondary / --accent	Badges, highlights, soft accents
Mint	rgb(240, 249, 245)	--blok-card	Blok cards and quiet surfaces
Ink	rgb(10, 10, 10)	--foreground	Headlines and body
White	rgb(255, 255, 255)	--card	Cards, inputs
Border	rgb(226, 231, 218)	--border	Dividers and card outlines
Muted text	rgb(46, 46, 46)	--muted-foreground	Secondary text

Headline gradient

linear-gradient(135deg, #258CF4, #0BC184). Last line of a hero headline.

Status

Name	RGB	Variable
Success	rgb(41, 163, 122)	--success
Warning / amber	rgb(250, 181, 5)	--warning
Destructive	rgb(220, 40, 40)	--destructive

Skills palette (PTOS)

Name	RGB	Variable
Focus	rgb(60, 131, 246)	--tb-focus
Collab	rgb(7, 185, 213)	--tb-collab
Growth	rgb(16, 183, 127)	--tb-growth
People	rgb(249, 116, 21)	--tb-people
Manage	rgb(137, 90, 246)	--tb-manage

Regulation badges

Name	Hex	RGB
L Licensed		rgb(220, 40, 40)
P Partly regulated		rgb(250, 181, 5)
N Not regulated		rgb(41, 163, 122)

Chart and app colors

Name	Hex	RGB
Chart 2		rgb(103, 58, 182)
Chart 3		rgb(238, 121, 43)
Chart 4		rgb(210, 45, 100)
Chart 5		rgb(38, 128, 217)
Block planned (app)		rgb(71, 140, 209)
Flexible (app)		rgb(124, 59, 237)

Blok status badges

Name	RGB	Use
Open	rgb(14, 165, 233)	Backend: open, posted
Requested	rgb(99, 102, 241)	Backend: claimed
Approved	rgb(59, 130, 246)	Backend: accepted
Active	rgb(245, 158, 11)	Backend: checkin, in_progress
Awaiting review	rgb(249, 115, 22)	Backend: awaiting_review
Awaiting pay	rgb(20, 184, 166)	Backend: awaiting_pay, settled_zero
Paid	rgb(34, 197, 94)	Backend: paid
Disputed	rgb(239, 68, 68)	Backend: disputed
Cancelled	rgb(107, 114, 128)	Backend: cancelled

Badge recipe: color mixed 16 percent into the card color, border 48 percent.

Triage, feed and heat map

Name	RGB	Use
Sky: messages, active	rgb(14, 165, 233)	Messages, Active Bloks, Unfilled
Amber: claims, verify	rgb(245, 158, 11)	Claims, Verify, Open TimeBloks
Red: disputes	rgb(239, 68, 68)	Dispute triage and feed
Emerald: payments	rgb(16, 185, 129)	Paid, held, released; bar gradient end
Fuchsia: reviews	rgb(217, 70, 239)	Activity feed review events
Heat map, low	rgb(112, 219, 169)	Lowest non-zero cell
Heat map, high	rgb(36, 143, 93)	Highest count cell
Heat text, light mode	rgb(2, 44, 34)	Numbers on heat map
Heat text, dark mode	rgb(236, 253, 245)	Numbers on heat map

Optimizer, Blok state, flexible

Name	RGB	Variable
Optimizer	rgb(138, 44, 226)	--optimizer
Optimizer soft	rgb(235, 222, 247)	--optimizer-soft
Optimizer card	rgb(250, 246, 253)	--optimizer-card
Optimizer line	rgb(204, 181, 227)	--optimizer-line
Block planned	rgb(71, 140, 209)	--block-planned
Block in progress	rgb(250, 181, 5)	--block-in-progress
Block complete	rgb(41, 163, 122)	--block-complete
Block missed	rgb(215, 66, 66)	--block-missed
Flexible	rgb(124, 59, 237)	--flexible

Project and planner client colors

Name	RGB	Variable
Project 1	rgb(7, 116, 79)	--project-1
Project 2	rgb(103, 58, 182)	--project-2
Project 3	rgb(238, 121, 43)	--project-3
Project 4	rgb(210, 45, 100)	--project-4
Project 5	rgb(38, 127, 217)	--project-5
Client 1	rgb(41, 163, 122)	--planner-client-1
Client 2	rgb(245, 159, 10)	--planner-client-2
Client 3	rgb(13, 162, 231)	--planner-client-3
Client 4	rgb(165, 66, 215)	--planner-client-4
Client 5	rgb(226, 54, 112)	--planner-client-5
Client 6	rgb(241, 113, 39)	--planner-client-6
Client 7	rgb(36, 168, 157)	--planner-client-7
Client 8	rgb(102, 92, 214)	--planner-client-8

Dark mode

Name	Hex	RGB
Background		rgb(14, 27, 22)
Card		rgb(21, 35, 30)
Blok card		rgb(29, 53, 45)
Primary		rgb(27, 152, 110)
Secondary		rgb(43, 59, 54)
Border		rgb(48, 65, 59)
Foreground		rgb(236, 239, 231)
Muted text		rgb(207, 212, 196)
Success		rgb(57, 172, 134)
Warning		rgb(234, 181, 46)
Destructive		rgb(211, 69, 69)

Safe pairings (WCAG contrast)

Sample	Text	Background	Ratio
TimeBlok			17.49:1
TimeBlok			10.52:1
TimeBlok			5.80:1
TimeBlok			5.80:1
TimeBlok			11.91:1
TimeBlok			10.43:1
TimeBlok			17.34:1
TimeBlok			5.41:1
TimeBlok			19.80:1
TimeBlok			15.22:1
TimeBlok			13.99:1
TimeBlok			10.74:1
TimeBlok			9.03:1
TimeBlok			4.86:1

Fonts

Urbanist (Google Fonts, open license). Fallback: system sans.

Use	Size	Weight
Hero headline	64 to 104 px	700
Section title	36 to 56 px	700
Card title	20 to 24 px	700
Button	16 px	700
Kicker and labels	12 to 14 px, uppercase	700 to 800

timeblok-tokens.css

:root{
  --background:#EFF2E9; --foreground:#0A0A0A; --card:#FFFFFF;
  --primary:#07744F; --primary-foreground:#FFFFFF;
  --secondary:#FEEFC8; --secondary-foreground:#093F2F;
  --accent:#FEEFC8; --muted:#E7EBE0; --muted-foreground:#2E2E2E;
  --blok-card:#F0F9F5; --border:#E2E7DA; --ring:#07744F;
  --success:#29A37A; --warning:#FAB505; --destructive:#DC2828;
  --gradient-headline:linear-gradient(135deg,#258CF4,#0BC184);
  --radius:.625rem; --font-sans:"Urbanist",ui-sans-serif,system-ui,sans-serif;
}
.dark{
  --background:#0E1B16; --foreground:#ECEFE7; --card:#15231E;
  --primary:#1B986E; --secondary:#2B3B36; --muted-foreground:#CFD4C4;
  --blok-card:#1D352D; --border:#30413B; --ring:#1B986E;
}