Pipeline redesign: the Bold tokens in app.css #1193

New issue

Open

opened 2026-11-01 14:17:37 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-11-01 14:17:37 +00:00

Owner

Replace the palette in assets/css/app.css @theme with the Bold one, so every page takes it on in its current layout.

What

Light tokens:
- ground #F3F4F6
- surface #FFFFFF
- hairline #E4E7EC
- ink #111318
- muted #5B6472
- primary #2B54E8 (hover #1F3FB8), primary tint #E8EDFD
- attention #F5B83D
- rail #111318, rail item #C9CED6, active #232834, rail hairline #2A2F3A
Six stage colours, each as bar / chip background / chip text:
- Draft: #8A94A6 / #EEF0F3 / #3A404C
- Applied and Acknowledged: #5B82FF / #E8EDFD / #1F3FB8
- Screening: #A78BFA / #F1ECFE / #5B34C7
- Interviewing: #F5B83D / #FDF3DC / #7A4D00
- Offer: #34D399 / #DDF7EC / #05663F
- Ended: #3A404C / #F1F2F4 / #5B6472
--radius from 8 px to 10 px (chips 6 px). Every rounding derives from it since #292.
Dark and high-contrast variants of every token, from the spec issue.

Acceptance

Only tokens change: no template edits in this PR.
test_stylesheet and the contrast checks pass in light, dark and high contrast.
The screenshots show the new colours in the old layout.

Depends on #1192.

🤖 Generated with Claude Code

Part of #1191. Design: the redesign canvas, https://claude.ai/artifact/CTfX5t4BQiVq9cH97XFvcZ (private to the maintainer until shared). Each screen has three artboards: *today*, *polished* and *bold*; this milestone builds **bold**. (the opening artboard *Two design languages* holds the palette.) Replace the palette in `assets/css/app.css` `@theme` with the Bold one, so every page takes it on in its current layout. ## What - **Light tokens:** - ground `#F3F4F6` - surface `#FFFFFF` - hairline `#E4E7EC` - ink `#111318` - muted `#5B6472` - primary `#2B54E8` (hover `#1F3FB8`), primary tint `#E8EDFD` - attention `#F5B83D` - rail `#111318`, rail item `#C9CED6`, active `#232834`, rail hairline `#2A2F3A` - **Six stage colours, each as bar / chip background / chip text:** - Draft: `#8A94A6` / `#EEF0F3` / `#3A404C` - Applied and Acknowledged: `#5B82FF` / `#E8EDFD` / `#1F3FB8` - Screening: `#A78BFA` / `#F1ECFE` / `#5B34C7` - Interviewing: `#F5B83D` / `#FDF3DC` / `#7A4D00` - Offer: `#34D399` / `#DDF7EC` / `#05663F` - Ended: `#3A404C` / `#F1F2F4` / `#5B6472` - **`--radius` from 8 px to 10 px** (chips 6 px). Every rounding derives from it since #292. - **Dark and high-contrast variants** of every token, from the spec issue. ## Acceptance - Only tokens change: no template edits in this PR. - `test_stylesheet` and the contrast checks pass in light, dark and high contrast. - The screenshots show the new colours in the old layout. Depends on #1192. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

tiagoagueda added this to the 0.7.0 milestone

2026-11-01 14:17:37 +00:00

tiagoagueda added the

accessibility

interface

labels

2026-11-01 14:17:37 +00:00

tiagoagueda referenced this issue

2026-11-01 14:17:37 +00:00

Pipeline redesign: stage chip and stage bar components #1195

tiagoagueda referenced this issue

2026-11-01 14:17:38 +00:00