SynkronyXr PWA Theme and Typography Design

Objective

Define the canonical visual system for SynkronyXr web products, starting with ERO. The UI must remain dark-mode native, high-contrast, and legible in high-glare outdoor usage.

1. Global Color System

Define these CSS variables in app/src/styles/global.css under :root.

—main-stage-black: #09090b;
—backstage-grey: #18181b;
—strobe-white: #fafafa;
—route-cyan: #00e5ff;
—clash-magenta: #ff007a;
—sunset-orange: #ff5c00;
—gridline-grey: #333338;

Base defaults:

body background: var(—main-stage-black)
body text: var(—strobe-white)

2. Typography Standard

Primary platform typeface is Plus Jakarta Sans.

Headings h1-h6: Plus Jakarta Sans with weights 600-800.
Body, labels, helper text: Plus Jakarta Sans with weights 400-500.
Numeric telemetry and compact code-like indicators may optionally use a monospace fallback.

Google Fonts embed (or self-hosted equivalent) should include at least weights 400, 500, 600, 700, 800.

3. Component Styling Rules

Data cards and schedule blocks use —backstage-grey backgrounds.
Primary actions use —route-cyan with a restrained glow effect.
Clash and overlap states must use —clash-magenta only.
Borders, separators, and table gridlines use —gridline-grey.
Connectivity or transitional states use —sunset-orange.

4. Accessibility and Responsiveness

Minimum text contrast should meet WCAG AA for body text.
Tap targets should maintain mobile-friendly sizing.
Typography scale should remain readable from 320px wide devices through desktop widths.

5. Implementation Targets

app/src/styles/global.css
app/src/pages/index.astro
shared UI components under app/src/components (as introduced)