Brand guidelines
Politify
The canonical normalization engine for U.S. political data. Logo marks, color tokens, typography, and component samples — the same tokens the app ships with, in one place.
Logo
Paired icon + wordmark. Always keep the checkmark with the Politify name in navigation and marketing contexts.
Wordmark / Light surface
Wordmark / Dark surface
Icon / Light surface
Icon / Dark surface
Color
Design tokens resolved from CSS custom properties in globals.css — swatches re-render when you toggle the theme in the top bar.
Brand
Politify purple — buttons, links, focus rings
Text on primary surfaces
Focus ring color, matches primary
Neutrals
Page background
Primary text
Raised surfaces
Subtle fills, placeholders
Secondary text, labels
Dividers, outlines
Form field borders
Semantic
Light accent surfaces
Subtle purple accent
Errors, withdrawn status
Chart series
Primary series (purple)
Secondary (light purple)
Success / positive (green)
Attention (orange)
Info (blue)
Sidebar
Sidebar background (dark)
Active nav indicator
Hover/selected row
Typography
Inter for UI text, JetBrains Mono for IDs and code. A compact type scale tuned for data-dense surfaces.
UI / Inter
The quick brown fox
Weights: 400 Regular, 500 Medium, 600 Semi-Bold. Loaded fromnext/font/googlevia the --font-sans CSS var.
Code / JetBrains Mono
p1:porter:katherine:ca:oopfyl
Used for canonical IDs, source system chips, JSON previews, and anything that benefits from fixed-width alignment.
Type scale
Components
Real examples pulled straight from the shared component library. All of these ship in the app today.
Buttons
Badges
Status
Party
Source system
Command palette
⌘K from anywhere in the app. Try it here — typing queries the live search API, and the Navigate commands jump to any page.
Empty state
No contests yet
Error state
Failed to load
The endpoint did not respond. Try again in a moment.
Upcoming contests
Download assets
Raw SVGs from the app bundle. Right-click → save, or fetch with the URLs below.