rippr/docs/design/stitch-export/design-system-rippr-neon.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Rippr	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant #131314 #131314 #3a393a #0e0e0f #1c1b1c #201f20 #2a2a2b #353436 #e5e2e3 #b9ccb2 #e5e2e3 #313031 #84967e #3b4b37 #00e639 #ebffe2 #003907 #00ff41 #007117 #006e16 #b9f1ff #00363f #00e0ff #005f6d #fff8f4 #442b10 #ffd5ae #7a5b3c #ffb4ab #690005 #93000a #ffdad6 #72ff70 #00e639 #002203 #00530e #a5eeff #00daf8 #001f25 #004e5a #ffdcbd #e7bf99 #2c1701 #5d4124 #131314 #e5e2e3 #353436	display-telemetry headline-lg headline-md body-lg body-md label-caps display-telemetry-mobile fontFamily fontSize fontWeight lineHeight letterSpacing JetBrains Mono 64px 700 64px -0.04em fontFamily fontSize fontWeight lineHeight Sora 32px 600 40px fontFamily fontSize fontWeight lineHeight Sora 24px 600 32px fontFamily fontSize fontWeight lineHeight Inter 18px 400 28px fontFamily fontSize fontWeight lineHeight Inter 16px 400 24px fontFamily fontSize fontWeight lineHeight letterSpacing JetBrains Mono 12px 500 16px 0.1em fontFamily fontSize fontWeight lineHeight JetBrains Mono 48px 700 48px	sm DEFAULT md lg xl full 0.125rem 0.25rem 0.375rem 0.5rem 0.75rem 9999px	unit container-margin gutter stack-sm stack-md stack-lg 4px 20px 12px 8px 24px 48px

Brand & Style

The design system centers on a high-performance, dark-mode aesthetic tailored for real-time activity tracking. The brand personality is kinetic, precise, and undistracted. It utilizes a Minimalist-Technical style, stripping away non-essential chrome to focus entirely on telemetry and movement.

The visual narrative is driven by a "HUD" (Heads-Up Display) concept: information is layered over the user's environment or activity maps using subtle glassmorphism and high-contrast data points. The emotional response should be one of focus and momentum, making the user feel like a precision instrument.

Colors

The palette is dominated by Pitch Black (#0A0A0B) to preserve OLED battery life and minimize ocular strain during night activities.

• Primary (Electric Neon): Used exclusively for active states, completion goals, and primary "Go" actions.
• Secondary (Cyan Telemetry): Reserved for secondary data streams, such as cadence or heart rate, to provide visual separation from primary distance/time metrics.
• Surface Strategy: Backgrounds use deep charcoal. Overlays use a semi-transparent version of the surface color with a 20px background blur to create the HUD effect.

Typography

The typography system uses a functional split: Sora for UI headers and brand moments, Inter for standard interface text, and JetBrains Mono for all numerical data and telemetry.

• Data Legibility: All numeric values must use the monospaced font to prevent "jumping" layouts during real-time updates.
• Visual Hierarchy: Use label-caps for units (e.g., KM/H, BPM) placed immediately adjacent to large telemetry displays.
• Scale: On mobile devices, telemetry data should prioritize width; if values exceed 5 digits, scale the font size down dynamically to fit the viewport width minus margins.

Layout & Spacing

This design system employs a Fluid HUD Grid. Elements are anchored to the corners of the screen to keep the center clear for maps or camera feeds.

• Grid Model: A 6-column grid for mobile, 12-column for desktop.
• Padding: Use a generous 20px "Safe Zone" margin on all edges of the screen to ensure interactive elements are reachable and not clipped by hardware notches or rounded device corners.
• Density: High density for data readouts (8px spacing between related metrics) and low density for navigation/settings (24px+ spacing) to prevent accidental taps during motion.

Elevation & Depth

Depth is expressed through translucency rather than shadows.

1. Level 0 (Base): Pure black (#0A0A0B).
2. Level 1 (Substrate): Dark charcoal (#161618) with 0% transparency.
3. Level 2 (HUD Panels): Surface color at 60% opacity with a backdrop-filter: blur(20px).
4. Level 3 (Modals): Surface color at 80% opacity with a subtle 1px inner border in a low-opacity white (10%) to define the edge against dark backgrounds.

Shadows should be avoided entirely to maintain the "lightweight" digital feel.

Shapes

The shape language is Technical-Precision.

• Corners: Use 0.25rem (4px) as the base radius for all containers to maintain a sharp, engineered appearance.
• Interactive Elements: Buttons and inputs follow the same 4px rule.
• Progress Indicators: Use sharp, non-rounded ends for progress bars to emphasize a "segmental" or "digital" look.
• Iconography: Use 2px stroke weights with squared-off ends to match the monospaced typographic theme.

Components

Buttons

• Primary: Solid Electric Neon background with Black text. No rounding beyond the base 4px.
• Ghost: 1px Neon border with transparent background. Text matches border color.
• Telemetry Toggle: Small, square buttons using monospaced labels.

Cards & HUD Panels

• All cards use the Level 2 Elevation (Glassmorphism).
• Remove all drop shadows. Use a 1px stroke of #FFFFFF at 10% opacity for definition.

Data Inputs

• Underlined style only (no bounding box) for a lighter footprint.
• Active state changes the underline to the Primary Neon color.
• Use JetBrains Mono for all numeric input fields.

Progress & Gauges

• Circular Gauges: Use thin 4px strokes. The "track" should be 5% opacity white; the "fill" should be the Primary Neon.
• Pulse: Active heart rate or GPS signals should use a "scanning" animation—a vertical line moving across the element—rather than a standard fade.

Navigation

• A bottom-anchored, floating "Dock" with a glassmorphic background.
• Active icons are highlighted with a single Neon pixel-dot underneath.