Skip to content

design-system: palette is dark-only with no light mode or color-scheme, and contrast is unverified #62

Description

@joelpeace48-cell

Problem

app/globals.css defines a dark-only palette, hardcoded on :root:

:root {
  --bg: #070b14;
  --surface: #0f1727;
  --text: #eaf2ff;
  --muted: #9bb1d3;
  --accent: #59c2ff;
}

There is no prefers-color-scheme handling anywhere in the file, and no
color-scheme declaration. Two consequences:

  1. Visitors who prefer light get dark regardless — including in contexts where
    dark is genuinely worse, such as printing a compliance page or presenting on
    a projector in a bright room.
  2. Because color-scheme is not set, browser-rendered UI (form controls,
    scrollbars, autofill) renders in light chrome against the dark page.

The token names are also literal rather than semantic (--bg, --accent-2),
which makes a second theme awkward to introduce cleanly.

What to do

  • Rename to semantic tokens: --surface, --surface-raised, --text-primary,
    --text-muted, --border, --accent.
  • Keep dark as the default — it suits the product — but define the full light
    palette under @media (prefers-color-scheme: light), redefining only token
    values
    , never component rules.
  • Add color-scheme: dark light so browser UI matches.
  • Optional explicit toggle persisting the choice, with no flash of the wrong
    theme on first paint.
  • Verify every text/background pair against WCAG AA (4.5:1 body, 3:1 large) in
    both themes. --muted: #9bb1d3 on --surface: #0f1727 is the pair most
    likely to fail and it is used for body copy across most pages.

Acceptance criteria

  • Semantic token layer replaces the literal names
  • Light palette under prefers-color-scheme: light, tokens only
  • color-scheme declared so browser UI matches the page
  • No flash of incorrect theme on load
  • Every pair passes AA in both themes, with measured results recorded

Notes

Fix contrast at the token layer rather than per component, otherwise the next
component reintroduces the failure. Related: the typography issue covering the
Inter font that is declared but never loaded.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    GrantFox OSSIssue tracked in GrantFox OSSThird CampaignCampaign: Third Campaignarea:design-systemTokens, theming, a11ydifficulty:mediumFamiliar patterns; touches a few files or conceptspriority:highNeeded for the next milestonetype:designUX, visual, or interaction design

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions