Update website visual identity to the settled teal/lavender/dark palette #42

New issue

Closed

opened 2026-05-29 14:33:20 +00:00 by coilysiren · 1 comment

coilysiren commented

2026-05-29 14:33:20 +00:00

Owner

Summary

The website visual identity is out of date and needs a full pass. We have been settling the correct palette in the iconography and VTuber-pet (mascot) work, and the site does not match it. The site is still the old cool-purple on off-white system. It is missing the teal-blue the new identity uses, and its dark treatment is wrong.

Target palette (settled in the on-screen fleet work)

Live signal / accent - teal #45cdd0. The site currently has no teal token at all.
Chassis / structure - lavender #b8a4d8.
Ground - near-black #0d0a14 (hint of plum) for the dark surface.

These supersede the current _vars.scss cool-purple plus off-white tokens for the brand-facing surfaces.

Scope

Update website/src/sass/_vars.scss to the settled palette (add teal, add the correct dark, re-home the purple tokens).
Propagate through layout.scss and the brand SVGs in src/images/ so the rendered site matches.
Get the dark treatment right - the current dark is wrong.
Re-sync the canonical visual-identity reference from _vars.scss once the site lands, so the website identity and the on-screen fleet identity stop diverging.

Context

The colors are being finalized in the icon-trio and mascot line-work. This ticket is the push back up to the website so the site is the source of truth again, not a stale fork. Line-work and exact token roles will be confirmed there first, then mirrored here.

## Summary The website visual identity is out of date and needs a full pass. We have been settling the correct palette in the iconography and VTuber-pet (mascot) work, and the site does not match it. The site is still the old cool-purple on off-white system. It is missing the teal-blue the new identity uses, and its dark treatment is wrong. ## Target palette (settled in the on-screen fleet work) - **Live signal / accent** - teal `#45cdd0`. The site currently has no teal token at all. - **Chassis / structure** - lavender `#b8a4d8`. - **Ground** - near-black `#0d0a14` (hint of plum) for the dark surface. These supersede the current `_vars.scss` cool-purple plus off-white tokens for the brand-facing surfaces. ## Scope - Update `website/src/sass/_vars.scss` to the settled palette (add teal, add the correct dark, re-home the purple tokens). - Propagate through `layout.scss` and the brand SVGs in `src/images/` so the rendered site matches. - Get the dark treatment right - the current dark is wrong. - Re-sync the canonical visual-identity reference from `_vars.scss` once the site lands, so the website identity and the on-screen fleet identity stop diverging. ## Context The colors are being finalized in the icon-trio and mascot line-work. This ticket is the push back up to the website so the site is the source of truth again, not a stale fork. Line-work and exact token roles will be confirmed there first, then mirrored here.

coilysiren added the

label

2026-05-30 17:09:32 +00:00

coilysiren commented

2026-06-17 08:24:02 +00:00

Author

Owner

Backlog burndown 2026-06-17: closing low-priority (P3/P4) to bring the open count to a manageable level. Nothing lost — reopen if this resurfaces. Batch tag: burndown-2026-06.

Backlog burndown 2026-06-17: closing low-priority (P3/P4) to bring the open count to a manageable level. Nothing lost — reopen if this resurfaces. Batch tag: `burndown-2026-06`.

coilysiren

2026-06-17 08:24:03 +00:00