-
Notifications
You must be signed in to change notification settings - Fork 0
Design Palette
Reference for colors, typography, and layout principles across the Proton
Pulse webui (https://www.proton-pulse.com) and the Decky plugin UI. Keep
this in sync with site.css / app.css in the proton-pulse-web repo
and the equivalent inline styles in the plugin -- if you tweak a color
in code, update the swatch table here too.
Dark, technical, gaming-adjacent. The site sits on top of compatibility data for Linux/Steam Deck users, so the chrome should feel like it belongs next to a terminal and the Steam UI rather than a generic SaaS dashboard.
Two visual concerns drive every color choice:
- Distinctness. Functional surfaces (rating tiers, confidence, source pills) must read as their own thing at a glance. Never let a confidence pill share a hue with a rating badge -- that reads as one tile instead of two facts.
- Restraint. Bright accent colors are signals, not decoration. The default surface is dark blue-grey; saturated color only fires when there's something worth pointing at.
Backgrounds layer from darkest at the page level to slightly lighter on cards and panels:
| Token | Value | Use |
|---|---|---|
--bg-top |
#0b1116 |
top of page gradient |
--bg-bot |
#131c26 |
bottom of page gradient |
--s1 |
#1a2431 |
card / panel surface |
--s2 |
#22303f |
hover state on cards |
--border |
#243340 |
hairline borders, dividers |
--border2 |
#2f4153 |
stronger borders |
--muted |
#7d92a8 |
secondary text / labels |
--text |
#c8d4e0 |
primary body text |
--strong |
#e8f4ff |
titles, emphasized text |
The site has one primary accent (cyan-blue) used for links, focus rings, and confidence signals; a secondary green for positive actions like "install" / "high confidence"; and a small set of tier colors that exist only for rating badges.
| Token | Value | Use |
|---|---|---|
--accent |
#66c0f4 |
links, focus, primary brand cyan |
--accent-hi |
#aedcff |
hover/active state on accent elements |
--accent-soft |
rgba | tinted backgrounds for active selections |
--green-hi |
#beee11 |
positive accent (rare, currently used for legends) |
--gold |
#ffc83d |
warning / gold-tier UI marker |
--red |
#ff5566 |
error state |
These belong to per-report rating badges only. Never use these for confidence, source pills, or anything other than a rating tier. Confusing the two is the single most common visual bug in the codebase.
| Tier | BG | Text |
|---|---|---|
| Platinum | #b4c7dc |
#111 |
| Gold | #c8a050 |
#111 |
| Silver | #8fa0b0 |
#111 |
| Bronze | #b07040 |
#fff |
| Borked | #c85050 |
#fff |
| Pending | #3a4a5a |
#c8d4e0 |
The "install" green #5ba32b is also used for the Verified Steam Deck
badge -- a strong positive signal that doesn't overlap with any tier
color above.
Confidence percentages render in a cyan family at any value so the pill can never collide with a rating tier color. Brightness drops as confidence drops -- the number still does the work, the color just flags "this is confidence, not a tier badge."
| Confidence range | BG color | Text |
|---|---|---|
| 80-100% | #66c0f4 |
#0a1a24 |
| 60-79% | #4a90b8 |
#0a1a24 |
| 40-59% | #3a6680 |
#e8f4ff |
| 0-39% | #4a5a6a |
#e8f4ff |
The helpers confColor(s) and confTextColor(s) in app.js produce
these (input is the 0-10 scale; multiply your pct/10 if you have a
0-100 number).
| Token | Stack | Use |
|---|---|---|
--font-display |
'Oxanium', 'Inter', system-ui, sans-serif |
titles, headings |
--font-body |
'Inter', system-ui, sans-serif |
body text |
--mono |
'JetBrains Mono', 'IBM Plex Mono', monospace |
code, IDs, numbers |
Headings and section titles in --font-display with text-transform: uppercase and tight letter-spacing. Body in --font-body. Anything
numeric or ID-like (app IDs, client IDs, percentages, counts) in
--mono so it stays scannable in tables and stat strips.
- Clean over clever. Sparse layouts beat dense ones. If a section feels crowded, cut a row -- don't shrink the font.
- One signal per surface. A card has one rating badge, one confidence pill, one source attribution. If something needs to live on a card, it competes for one of those slots, not all of them.
- Group by function, separate by surface. Per-report data lives on its card. Per-game aggregate lives in the game-header tile. Don't duplicate the same number across both surfaces -- pick the right one.
- Borders are joins, not decoration. A border-top / border-left on an embedded section signals "this is a child of the surface above" -- use it when nesting; skip it for floating elements.
- Don't pull a color from the rating-tier table for a non-tier surface
- Don't add a fourth accent color "just for this one thing" -- pick from the palette above or argue for a real addition in PR review
- Don't use bright accent backgrounds on large surfaces (only on small badges / pills / focus states)
- Don't mix mono and display fonts in the same line of text
- Don't ship a feature that uses a hex value that isn't in this file or
a
var(--token)