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)