Brand Colors
Brand Colors
Section titled “Brand Colors”Our palette reflects our identity: bold, modern, human-centered. Inspired by Stripe (vibrant single-hero), Atlassian (multi-product harmony), and Helsinki DS (accessibility tokens).
Primary Palette
Section titled “Primary Palette”Core brand colors
| Swatch | Name | Hex | CSS Variable |
|---|---|---|---|
| Brand Blue | #4C6EF5 | --brand-primary | |
| Brand Dark | #212529 | --brand-dark | |
| Brand White | #FFFFFF | --brand-white |
Secondary Palette
Section titled “Secondary Palette”Accent & support
| Swatch | Name | Hex |
|---|---|---|
| Teal | #20C997 | |
| Orange | #FF922B | |
| Violet | #845EF7 | |
| Pink | #F06595 |
Neutrals
Section titled “Neutrals”Warm grays
| Swatch | Name | Hex |
|---|---|---|
| Warm Gray 100 | #F5F5F4 | |
| Warm Gray 300 | #D6D3D1 | |
| Warm Gray 500 | #78716C | |
| Warm Gray 700 | #44403C | |
| Warm Gray 900 | #1C1917 |
How the best brands use color
Section titled “How the best brands use color”Stripe — One hero color
Section titled “Stripe — One hero color”Stripe uses a single vibrant blue across their entire brand. Everything else is black, white, or subtle gray — instant brand recognition.
Lesson for brandk1t: Brand Blue carries the identity. Secondary colors support, never compete.
Atlassian — Product-level palettes
Section titled “Atlassian — Product-level palettes”Each Atlassian product (Jira, Confluence, Trello) has its own shade of blue. The brand-level palette unifies them. The brand blue is the anchor.
Linear — Dark-first design
Section titled “Linear — Dark-first design”Linear was designed for dark mode first. Color choices start from dark backgrounds, with lighter elements layered on top.
Accessibility
Section titled “Accessibility”| Combination | Ratio | Standard |
|---|---|---|
| Brand Blue on White | 4.6:1 | WCAG AA |
| White on Brand Blue | 4.6:1 | WCAG AA |
| Brand Blue on Dark | 5.1:1 | WCAG AA |
| Text on White | 13.5:1 | WCAG AAA |
- Brand Blue — primary actions, key accents, brand moments
- Secondary colors — variety and emphasis; max 1 per view
- Warm neutrals — backgrounds, borders, body text
- Prefer neutrals over pure black/white