VOTD — Color Style Guide

Full audit of every color in the codebase, mapped to constants/theme.ts tokens. Brand tiles included as a reference. Rogue hardcoded values flagged for cleanup.

Build 52 · Audit date March 28, 2026
Orange Family — Full Spectrum
All named orange/peach/amber tokens plotted by lightness (L%). Gradient bar spans ORANGE_DARK (L38%) → ORANGE_LIGHT (L96%).
ORANGE_DARK #A5411E L38% ORANGE #C85014 L43% VOTD top #E0782D L53% PEACH_DARK #D3794A L56% share (old) #E8873A L57% PEACH #E6A586 L71% PEACH_LIGHT #F7D0B4 L84% PEACH_CREAM #FFE9D6 L92% ORANGE_LIGHT #FFF1EA L96% L38% L96% ← lightness →
Brand Palette — Original Tiles (Reference)
Source of truth for intent. Codebase tokens below are the implementation.
Primary Oranges & Darks
#C85014
#E6A586
#F7D0B4
#A5411E
#EFD7C8
#FFE9D6
Navy & Blush
#363D58
#DBB6B1
#F2D9D8
Amber Ramp
#D3794A
#ECAF73
#FFE5C8
Neutrals Ramp
#000000
#201F1E
#5D554D
#95877C
#D2C7BD
×2
#F7F4F2
#FAF9F8
#FFFFFF
Primary UI (Sheet 3)
#A5411E
#C25200
#FFF1EA
#EDEBE9
#F1F0EE
#F8F5F2
Secondary / Topic Colors
#FF9B21
#8AD29F
#546A7B
#996F9A
#E6E0DB
#697613
#61C07A
#BDC667
#363D58
#5C415D
#D2C7BD
Skin & Hair (avatars only)
#997699
#D4A181
#F7D0B4
#583E23
#BE6E46
#EFC88B
Quick Reference — Color by UI Role
Text
NEAR_BLACK — headings, body copy
GRAY — subheadings, captions
WARM_MID_GREY — placeholder, muted labels
DARK_GREY — tertiary text, timestamps
Backgrounds
OFF_WHITE — default screen bg
WARM_GREY — panel / section fills
ORANGE_LIGHT — tinted badge / hover
LOCKED_CARD — locked tally CTA bg
WHITE — cards, modals, sheets
Borders & Dividers
BEIGE — card borders, input underlines
STONE — secondary card borders
TALLY_NO — subtle borders, NO bar
Interactive / CTA
ORANGE — primary buttons, links, active
ORANGE_DARK — pressed state
ORANGE_LIGHT — ghost button fill
Vote Tally
ORANGE — YES bar fill
TALLY_NO — NO bar fill
LOCKED_CARD — locked state bg
VOTE_NOW_TINT — Vote Now resting fill
Semantic / Status
ERROR_RED (#C0392B) — form errors, destructive actions
ERROR_RED_DARK (#A93226) — pressed / high-contrast error
ERROR_RED_TINT (rgba 10%) — VoteCard urgent countdown bg
ERROR_RED_MID (rgba 55%) — VOTD overlay urgent badge bg
ERROR_RED_STRONG (rgba 60%) — vote-item sticky bar urgent bg
SUCCESS — vote confirmed, form success
VERIFIED — verified user badge
AMBER — pending / phone-verified badge
FEEDBACK_URGENT — urgency indicator
Topic Badges (accent only)
PURPLE_DARK — civic / community
SLATE — government / policy
GREEN — health / environment
OLIVE — environment / nature
NAVY — data viz, map fills
Overlays & Scrims
rgba(0,0,0,0.45) — modal backdrop
rgba(0,0,0,0.18) — card shadow, light overlay
VOTE_NOW_TINT — Vote Now button fill
Insights Breaker — Violet
PURPLE_DARK — line stroke, dot fill, text, badge bg, race YES bar
BREAKER_BG — card wash (PURPLE at 13%)
BREAKER_TINT — sparkline area fill, NO race bar
BREAKER_FILL_LIGHT — bell curve fill
BREAKER_STROKE — bell curve stroke
BREAKER_MARKER — distribution marker fill
Rogue Hardcoded Values
Live scan — updated after neutral + purple sweep. 46 values across 26 rows remaining.
Color Count File(s) Replace With Action
#201F1E
 34× votd.tsx, VoteCard, verify-otp, address-setup, feed, onboarding + 6 more Import NEAR_BLACK — old value before hue realignment Replace
#C0BCB8
 12× index.tsx, profile.tsx, votd.tsx MID_GREY — replaced (L69%, dist 21→4) ✓ Done
#B5AFA9
 8× votd.tsx, VoteCard, profile.tsx MID_GREY — replaced (L69%, dist 18→7) ✓ Done
#C7B8AB
 6× votd.tsx, index.tsx, vote-item.tsx MID_GREY — replaced (L69%, dist 23→6) ✓ Done
#B0AAA4
 4× FeedbackWidget.tsx MID_GREY — replaced (L69%, dist 49→11) ✓ Done
#9A908A
 3× index.tsx, votd.tsx, profile.tsx WARM_MID_GREY — dist 9 Replace
#8A8480
 1× FeedbackWidget.tsx WARM_MID_GREY — dist 11 Replace
#C8B8A8
 1× votd.tsx MID_GREY — replaced (L69%, dist 25→8) ✓ Done
#C0B8B0
 1× onboarding.tsx MID_GREY — replaced (L69%, dist 25→8) ✓ Done
#B0A89E
 1× profile.tsx MID_GREY — replaced (L69%, dist 53→18) ✓ Done
#B8A898
 1× ProposeVoteModal.tsx MID_GREY — replaced (L69%, dist 52→16) ✓ Done
#C0392B + #D93B3B + #D93025
 17× VoteCard, verify-otp, profile, address-setup, ProposeVoteModal, FeedbackWidget, my-votes Added ERROR_RED, ERROR_RED_DARK, ERROR_RED_TINT, ERROR_RED_MID, ERROR_RED_STRONG — all instances replaced across 8 files ✓ Done
#5A9E6F
 1× profile.tsx Add SUCCESS token Add token
#4A90D9
 1× profile.tsx Add VERIFIED token Add token
#1A6FB0
 1× FeedbackWidget.tsx Add FEEDBACK_URGENT token Add token
#E6920A + #E8860A
 3× profile.tsx, FeedbackWidget.tsx Consolidate with AMBER or add BADGE_PENDING Review
#E8873A
 2× vote-item.tsx, votd.tsx ORANGE or AMBER — check context Review
#E0782D
 4× VOTDOverlayCard.tsx, VOTDOverlayCard.pre-duotone.tsx Close to ORANGE — review overlay card context Review
#D0703E + #B54819
 2× SharePoster.tsx ORANGE_DARK / PEACH_DARK Replace
#16A085–#7B5EA7 (16 values)
 ~80× vote-item.tsx, VOTDOverlayCard.tsx, VOTDOverlayCard.no-scroll.tsx, VOTDOverlayCard.pre-duotone.tsx Extract to lib/topicColors.ts — single map, imported by all four files Add token
#7A7370
 2× votd.tsx Between GRAY and WARM_MID_GREY — review context Review
#3D2040
 1× votd.tsx Darker than PURPLE_DARK — collapse or add PURPLE_DEEP Review
#F7D0B4
 2× votd.tsx PEACH_LIGHT exact match — import the token Replace
#D6E8F5
 1× vote-item.tsx Pale blue — not in brand palette. Intentional or stray? Review
#FFD700
 1× onboarding.tsx Gold/star color — not in brand palette. Review. Review
#0A7EA4
 1× themed-text.tsx Teal link color — not in brand palette. Add token or replace? Review
#201F1E
NEAR_BLACK (old)		 34× votd.tsx, votd.legacy.tsx, onboarding.tsx, and others Replaced with updated NEAR_BLACK (#231D1A) ✓ Done
#5D554D
DARK_GREY (old)		 7× votd.tsx, votd.legacy.tsx, profile.tsx Replaced with DARK_GREY ✓ Done
#605E5C
GRAY (old)		 9× votd.tsx, votd.legacy.tsx, feed.tsx Replaced with GRAY ✓ Done
#95877C
WARM_MID_GREY (old)		 17× votd.tsx, votd.legacy.tsx, vote-item.tsx Replaced with WARM_MID_GREY ✓ Done
#D0C8BF
TALLY_NO (near)		 1× votd.tsx Replaced with TALLY_NO ✓ Done
#D2C7BD
TALLY_NO (old)		 1× votd.tsx Replaced with TALLY_NO ✓ Done
#E8E0D8
STONE (near)		 1× votd.tsx Replaced with STONE ✓ Done
#EBE0D3
BEIGE (near)		 2× votd.tsx, votd.legacy.tsx Replaced with BEIGE ✓ Done
#E3D8CB
BEIGE (near)		 1× votd.legacy.tsx Replaced with BEIGE ✓ Done
#EDEBE9
WARM_GREY (old)		 3× votd.tsx Replaced with WARM_GREY ✓ Done
#F0EDEA
WARM_GREY (near)		 1× votd.tsx Replaced with WARM_GREY ✓ Done
#E8F5E9
WARM_GREY (near)		 1× votd.legacy.tsx Replaced with WARM_GREY ✓ Done
#FAF9F8
OFF_WHITE (old)		 2× votd.tsx Replaced with OFF_WHITE ✓ Done
#FFF8F2
OFF_WHITE (near)		 1× votd.legacy.tsx Replaced with OFF_WHITE ✓ Done
#D4C4AD
TALLY_NO (near)		 3× votd.legacy.tsx Replaced with TALLY_NO ✓ Done
#5C415D
PURPLE_DARK		 32× votd.tsx, votd.legacy.tsx Replaced with PURPLE_DARK (incl. SVG stroke/fill attributes) ✓ Done
rgba(153,111,154,0.13)
BREAKER_BG		 ~4× votd.tsx Replaced with BREAKER_BG ✓ Done
rgba(92,65,93,0.18)
BREAKER_TINT		 ~4× votd.tsx Replaced with BREAKER_TINT ✓ Done
rgba(92,65,93,0.1)
BREAKER_FILL_LIGHT		 ~3× votd.tsx Replaced with BREAKER_FILL_LIGHT ✓ Done
rgba(92,65,93,0.3)
BREAKER_STROKE		 ~4× votd.tsx Replaced with BREAKER_STROKE ✓ Done
rgba(153,111,154,0.5)
BREAKER_MARKER		 ~3× votd.tsx Replaced with BREAKER_MARKER ✓ Done
rgba(92,65,93,0.5)
BREAKER_TEXT		 ~3× votd.tsx Replaced with BREAKER_TEXT ✓ Done
#FF9B21
AMBER		 4× votd.legacy.tsx Replaced with AMBER ✓ Done
#E6E0DB
STONE (old)		 ~3× multiple files Replaced with STONE ✓ Done
#F7D0B4
PEACH_LIGHT		 1× onboarding.tsx Exact match — replaced with PEACH_LIGHT ✓ Done
Brand Oranges
Primary action color — dominant across all UI
Orange
#C85014
ORANGE
Primary CTA, links, active states, tally YES fill. Most-used brand color.
Orange Dark
#A5411E
ORANGE_DARK
Pressed states, high-contrast contexts. "Following" color on brand sheet.
Orange Light
#FFF1EA
ORANGE_LIGHT
Tint background, hover fill, Vote Now resting state, badge backgrounds.
⚠ Rogue Orange
#E8873A
no token
Found in votd.tsx + vote-item.tsx. Not in brand tiles. → Replace with ORANGE or AMBER.
Warm Neutral Ramp
All tokens aligned to H22° — orange-brown family. See archive for before/after comparison.
Near Black
#231D1A
NEAR_BLACK
Body text, headings. Primary text color.
Dark Grey
#624D41
DARK_GREY
Secondary text, muted labels, timestamps.
Gray
#6A5B53
GRAY
Captions, subheadings, placeholder text.
Warm Mid Grey
#9F8475
WARM_MID_GREY
Input placeholders, muted icons, tertiary labels.
Mid Grey
#BEACA2
MID_GREY
Secondary borders, disabled states, inactive UI elements. Fills gap between WARM_MID_GREY and TALLY_NO.
Tally No
#D3C4BB
TALLY_NO
NO bar fill in tallies. Also used for subtle borders.
Beige
#EBDAD1
BEIGE
Card borders, input underlines, dividers. Most-used border color.
Stone
#EADED7
STONE
Secondary card backgrounds, light borders.
Warm Grey
#F3EFED
WARM_GREY
Panel backgrounds, section fills.
Locked Card ⚠
#F0EAE5
LOCKED_CARD (proposed)
Locked tally CTA card. votd.tsx + vote-item.tsx. Needs a token.
Off White
#FAF7F5
OFF_WHITE
Default screen background.
White
#FFFFFF
WHITE
Cards, modals, sheet surfaces.
⚠ Neutral sprawl: the codebase contains ~10 near-identical warm neutrals that don't map to tokens — #EDEBE9, #F0EDEA, #F0EAE3, #E8E0D8, #E8E4E0, #C8B8A8, #C7B8AB, #D0C8BF, #B0A89E. All should collapse to BEIGE, WARM_GREY, TALLY_NO, or the new LOCKED_CARD token during the rogue sweep.
Semantic Colors
Status, feedback, and verification states — error token family added in build 84
Error
#C0392B
ERROR_RED ✓
VoteCard, verify-otp, profile, my-votes — all tokenized.
Error Alt (retired)
#D93B3B → ERROR_RED
ERROR_RED ✓
address-setup, ProposeVoteModal — consolidated into ERROR_RED.
⚠ Success
#5A9E6F
SUCCESS (proposed)
Vote confirmed, form success. Hardcoded in profile.tsx.
⚠ Verified
#4A90D9
VERIFIED (proposed)
Verified user badge in profile.tsx. Not in brand tiles — consider whether this aligns with brand direction.
⚠ Feedback Urgent
#1A6FB0
FEEDBACK_URGENT (proposed)
FeedbackWidget urgency. Changed from green to blue in build 52. Needs a token.
⚠ Pending Badge
#E6920A
no token
Phone-verified badge in profile.tsx. Close to AMBER (#FF9B21) — consider consolidating.
Topic Category Colors
16 topics — H68°→290° (olive→purple). Derived from brand anchors: OLIVE, GREEN, SLATE, NAVY, PURPLE. Aliases: TRANSPORTATION=INFRASTRUCTURE, HEALTH=PUBLIC_HEALTH, SAFETY=CRIMINAL_JUSTICE, LAND_USE=HOUSING.
Agriculture
#92A136
TOPIC_AGRICULTURE
OLIVE hue
Business Regulation
#438C31
TOPIC_BUSINESS_REGULATION
Parks Community
#317731
TOPIC_PARKS_COMMUNITY
Environment
#40A060
TOPIC_ENVIRONMENT
GREEN hue
Labor
#398465
TOPIC_LABOR
Taxes Spending
#308876
TOPIC_TAXES_SPENDING
Infrastructure
#36758C
TOPIC_INFRASTRUCTURE
Defense
#556B7C
TOPIC_DEFENSE
= SLATE
Foreign Policy
#365278
TOPIC_FOREIGN_POLICY
Public Services
#3B4D78
TOPIC_PUBLIC_SERVICES
Government Reform
#363D59
TOPIC_GOVERNMENT_REFORM
= NAVY
Criminal Justice Safety
#413D6C
TOPIC_CRIMINAL_JUSTICE
Housing
#5B447E
TOPIC_HOUSING
Public Health
#70498D
TOPIC_PUBLIC_HEALTH
Education
#8E49AB
TOPIC_EDUCATION
PURPLE family
Energy
#713D7B
TOPIC_ENERGY
Insights Breaker — Violet Tints
Component-specific — all hardcoded in votd.tsx, need tokenizing. Base colors: PURPLE_DARK (#5C415D) and PURPLE (#996F9A)
Purple Dark
#5C415D
PURPLE_DARK
Line stroke, dot fill, text, badge bg, YES race bar. Used ~25× as raw hex — token exists but isn't imported.
⚠ Breaker BG
rgba(153,111,154,0.13)
BREAKER_BG (proposed)
Card wash. Base: PURPLE (#996F9A).
⚠ Breaker Tint
rgba(92,65,93,0.18)
BREAKER_TINT (proposed)
Sparkline area fill, NO race bar. Base: PURPLE_DARK.
⚠ Breaker Fill Light
rgba(92,65,93,0.1)
BREAKER_FILL_LIGHT (proposed)
Bell curve fill. Base: PURPLE_DARK.
⚠ Breaker Stroke
rgba(92,65,93,0.3)
BREAKER_STROKE (proposed)
Bell curve stroke. Base: PURPLE_DARK.
⚠ Breaker Marker
rgba(153,111,154,0.5)
BREAKER_MARKER (proposed)
Distribution marker fill. Base: PURPLE (#996F9A).
Color Reference Archive
Color Reference Archive
Defined in theme.ts but not imported anywhere in the app. Safe to keep for future illustration, marketing, and Wear OS use — but not part of active UI.
Retired tokens — zero imports, removed from active palette
ORANGE_MID
#C25200
H25° L38% — sheet 1 primary orange variant. Never imported. Removed.
Neutral Ramp — Before / After (hue realignment to 22°)
Before
After
Near Black
#201F1E — H30°
Near Black
#231D1A — H22°
Dark Grey
#5D554D — H30°
Dark Grey
#624D41 — H22°
Gray ⚠ cool drift
#605E5C — H30°
Gray
#6A5B53 — H22°
Warm Mid Grey
#95877C — H26°
Warm Mid Grey
#9F8475 — H22°
Tally No ⚠ pinkish
#D2C7BD — H29°
Tally No
#D3C4BB — H22°
Beige
#EDEBE9 — H33°
Beige
#EBDAD1 — H22°
Stone ⚠ near-neutral
#E6E0DB — H27°
Stone
#EADED7 — H22°
Warm Grey ⚠ H40° cool
#F1F0EE — H40°
Warm Grey
#F3EFED — H22°
Off White
#FAF9F8 — H30°
Off White
#FAF7F5 — H22°
Orange
Orange Mid
#C25200
ORANGE_MID
Sheet 1 primary orange. Very close to ORANGE — 0 imports.
Neutrals — 0 imports
Near White
#F7F4F2
NEAR_WHITE
Defined in theme.ts. 0 imports — OFF_WHITE covers this range.
Banner BG
alias → ORANGE
BANNER_BG
Alias for ORANGE in theme.ts. 0 direct imports — components use ORANGE directly.
Banner Text
alias → WHITE
BANNER_TEXT
Alias for WHITE in theme.ts. 0 direct imports.
Topic Accent Tokens — 0 imports in app code (topic color maps use raw hex instead)
Purple
#996F9A
PURPLE
Lighter civic / community variant. Used as base for BREAKER_BG rgba — token itself never imported.
Slate
#546A7B
SLATE
Government / policy topic badge. 0 imports.
Navy
#363D58
NAVY
Data viz, map fills. 0 imports.
Green
#61C07A
GREEN
Health / positive topics. 0 imports.
Olive
#697613
OLIVE
Environment / nature. 0 imports.
Olive Light
#BDC667
OLIVE_LIGHT
Lighter olive tint. 0 imports.
Peach, Amber & Blush Ramp — Illustration / Marketing
Amber
#FF9B21
AMBER
Warm yellow-orange. Used as raw hex in votd.legacy — token not imported.
Amber Mid
#ECAF73
AMBER_MID
0 imports.
Amber Light
#FFE5C8
AMBER_LIGHT
0 imports.
Peach Dark
#D3794A
PEACH_DARK
3 refs in VOTDOverlayCard + SharePoster. Banner graphics, illustration terracotta.
Peach
#E6A586
PEACH
0 imports.
Peach Light
#F7D0B4
PEACH_LIGHT
2 refs in votd.legacy only.
Peach Pale
#EFD7C8
PEACH_PALE
0 imports.
Peach Cream
#FFE9D6
PEACH_CREAM
0 imports.
Blush Mid
#DBB6B1
BLUSH_MID
0 imports.
Blush Light
#F2D9D8
BLUSH_LIGHT
0 imports.