Color Standardization Design

Problem

The site uses three accent colors (neon, teal, ice) without consistent semantic rules. Neon appears on both headings and hover states, teal is used for both links and active nav items, and ice is underutilized. Users can’t reliably tell what’s clickable vs what’s decorative.

Color System Rules

ColorVariableHexRoleUsage
Neon--color-neon#39ff14EmphasisPage titles, hero headings, brand name, category labels
Teal--color-teal#00e5a0InteractiveLinks, buttons, clickable cards — resting state
Ice--color-ice#80d4ffActive/SelectedCurrent nav item, selected filter, active tab
Muted--color-muted#7a9ab5SecondaryTimestamps, metadata, labels
Text--color-text#e8f0f8ContentBody text, subheadings (hierarchy via font size/weight)

Interaction States

Resting:    teal
Hover:      teal → neon
Active:     ice
Disabled:   muted

Key Principles

  1. Neon never means clickable. If you see neon at rest, it’s a heading or brand element.
  2. Teal always means clickable. Any teal element at rest is interactive.
  3. Ice means “you are here.” Active nav, selected filter, current page indicator.
  4. Hover confirms interactivity. Teal elements shift to neon on hover as feedback.
  5. Subheadings use text color. Font size and weight create hierarchy, not accent color.

Changes Required

1. Subheadings: ice → text

Ice is no longer decorative — it’s reserved for active/selected states. Subheadings rely on font size/weight for hierarchy.

FileElementCurrentNew
app/src/pages/about.astro3 section subheadingstext-icetext-text
app/src/pages/[collection]/[...id].astroArticle descriptiontext-icetext-text
app/src/pages/[collection]/[...id].astroPost content <h2>text-icetext-text
app/src/components/CollectionGrid/CollectionGrid.astroCollection subtitletext-icetext-text
app/src/components/Chat/Chat.astroChat panel headingtext-icetext-text

2. Active/selected states: teal → ice

Active/selected state now uses ice to distinguish from interactive teal.

FileElementCurrentNew
app/src/layouts/BaseLayout/BaseLayout.astroNav link activedata-active:text-tealdata-active:text-ice
app/src/components/ProjectTree/ProjectTree.astroSidebar active itemdata-active:text-tealdata-active:text-ice
app/src/components/ProjectTree/ProjectTree.astroActive badgegroup-data-active:bg-teal/15 group-data-active:text-tealgroup-data-active:bg-ice/15 group-data-active:text-ice
app/src/components/CollectionGrid/CollectionGrid.astroActive category filterbg-teal/15 text-teal border-tealbg-ice/15 text-ice border-ice
app/src/components/CommandPalette/CommandPalette.astroSelected rowcolor: var(--color-teal)color: var(--color-ice)

Breadcrumb links are clickable — they should be teal at rest, neon on hover (currently reversed).

FileElementCurrentNew
app/src/pages/[collection]/[...id].astroCollection breadcrumb linktext-neon hover:text-tealtext-teal hover:text-neon
app/src/pages/[collection]/[...id].astroCategory breadcrumb linktext-neon hover:text-tealtext-teal hover:text-neon

4. Primary buttons: neon bg → teal bg

Buttons are interactive — they follow teal at rest, neon on hover.

FileElementCurrentNew
app/src/layouts/BaseLayout/BaseLayout.astroMobile chat FABbg-neon hover:bg-tealbg-teal hover:bg-neon
app/src/pages/login.astroSubmit button (inline)background:#39FF14background:#00e5a0 (+ hover neon)

5. Login page: inline hex → CSS variables

The login page uses inline hex values that match existing CSS variables. Convert to use the theme system for consistency.

6. No changes needed (already correct)

  • Page headings using neon (emphasis)
  • Default link color teal in BaseLayout.css (interactive)
  • Link hover → neon in BaseLayout.css (hover feedback)
  • Card eyebrow/category labels using neon (emphasis)
  • Category filter buttons (inactive) using teal (interactive)
  • Card tags using teal border/text (interactive)
  • Gradient text using neon → teal (decorative)

Out of Scope

  • Live window widget colors (self-contained system with time/weather dynamics)
  • Card placeholder colors (generative, domain-specific)
  • Error color (#ff4444 on login — could be formalized later)