Context
SO4 is adopting GMX's visual identity: a dark, violet-navy palette (#090A14 page,
#171827 cards), the electric #2D42FC brand blue, tight-tracked grotesque display
type, hairline 0.5px borders, and 180ms transitions. The token foundation (GMX
reference palette as --color-gmx-*, landing font stacks, text-heading-* /
btn-landing utilities) already exists in packages/ui/src/styles/globals.css —
see §8 of 001_theme_update.md. The ThemeProvider still
toggles a .dark class on <html>, but no .dark token block exists today, so
this issue (re)introduces the dark theme with GMX-derived values. The light theme
stays as-is. TTHoves (GMX's font) is paid software we cannot ship — the approved
stand-in is Archivo via @fontsource-variable/archivo, already wired as
--font-landing-sans; Space Mono (@fontsource/space-mono) covers code/mono
accents. Full rationale and every token value: docs/gf_3/001_theme_update.md.
Reference tailwind config:
landing/tailwind.config.ts.
Scope
- Define the
.dark block in packages/ui/src/styles/globals.css using the mapping
table in 001_theme_update.md §8.2 (surfaces, text roles, border, primary, ring,
accent, sidebar, chart aliases) — semantic tokens referencing the gmx-* palette.
- Make the landing page route (
apps/web/src/routes/index.tsx and
apps/web/src/ui/landing/*) always render the dark palette regardless of the
user's theme setting (GMX's landing is dark-only), without leaking the override
into app routes.
- Switch the landing font to
var(--font-landing-sans) (Archivo) and apply the
text-heading-* / text-subheadline / text-description / btn-landing
utilities in place of ad-hoc landing type styles; retire landing-local font
overrides in apps/web/src/styles/landing.css.
- Rebalance trading-state
subtle/border token variants so they read correctly on
the new dark surfaces (values stay in the existing hue families — see §8.2 note).
- Update
DESIGN.md: document the dark theme's return and its GMX derivation
(house rule — token changes and DESIGN.md updates land in the same PR).
- Add the landing typography and
btn-landing to the /gallery page, then
regenerate visual-regression baselines
(bun run test:e2e -- design-system-visual --update-snapshots) and include the
reviewed diffs in the PR.
Acceptance criteria
Out of scope
- Landing page section structure (that is GF3-002) and final copy (GF3-003).
- A GMX-aligned light theme — deliberately not derived this round.
- Replacing Geist inside the app routes; Archivo is landing-scoped for now.
Context
SO4 is adopting GMX's visual identity: a dark, violet-navy palette (
#090A14page,#171827cards), the electric#2D42FCbrand blue, tight-tracked grotesque displaytype, hairline 0.5px borders, and 180ms transitions. The token foundation (GMX
reference palette as
--color-gmx-*, landing font stacks,text-heading-*/btn-landingutilities) already exists inpackages/ui/src/styles/globals.css—see §8 of
001_theme_update.md. TheThemeProviderstilltoggles a
.darkclass on<html>, but no.darktoken block exists today, sothis issue (re)introduces the dark theme with GMX-derived values. The light theme
stays as-is. TTHoves (GMX's font) is paid software we cannot ship — the approved
stand-in is Archivo via
@fontsource-variable/archivo, already wired as--font-landing-sans; Space Mono (@fontsource/space-mono) covers code/monoaccents. Full rationale and every token value:
docs/gf_3/001_theme_update.md.Reference tailwind config:
landing/tailwind.config.ts.Scope
.darkblock inpackages/ui/src/styles/globals.cssusing the mappingtable in
001_theme_update.md§8.2 (surfaces, text roles, border, primary, ring,accent, sidebar, chart aliases) — semantic tokens referencing the
gmx-*palette.apps/web/src/routes/index.tsxandapps/web/src/ui/landing/*) always render the dark palette regardless of theuser's theme setting (GMX's landing is dark-only), without leaking the override
into app routes.
var(--font-landing-sans)(Archivo) and apply thetext-heading-*/text-subheadline/text-description/btn-landingutilities in place of ad-hoc landing type styles; retire landing-local font
overrides in
apps/web/src/styles/landing.css.subtle/bordertoken variants so they read correctly onthe new dark surfaces (values stay in the existing hue families — see §8.2 note).
DESIGN.md: document the dark theme's return and its GMX derivation(house rule — token changes and DESIGN.md updates land in the same PR).
btn-landingto the/gallerypage, thenregenerate visual-regression baselines
(
bun run test:e2e -- design-system-visual --update-snapshots) and include thereviewed diffs in the PR.
Acceptance criteria
pixel-unchanged (baseline diffs limited to dark +
/galleryadditions)./trade,/pools,/earn,/referrals,/faucetstill honor the user's theme.bun run check:tokenspasses.(98%/108%), and negative tracking from
001_theme_update.md§4.bun run typecheckandbun run testpass; gallery shows the new utilities.Out of scope