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

Open
opened 2026-05-29 14:33:20 +00:00 by coilysiren · 0 comments
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
P3
and removed
P2
labels 2026-05-31 07:01:32 +00:00
Sign in to join this conversation.
No labels
icebox
P0
P1
P2
P3
P4
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
coilysiren/website#42
No description provided.