# algoRay Design System

Source of truth for values: `styles/tokens.css`. Logo: `assets/logo.svg`.
Hand-written from the logo palette (not from an AnimatedWebs style reference).

## Principles
1. **Follow the Ray.** One beam of green light is the only bright thing on a dark stage. Green means "light/signal"; use it sparingly so it keeps meaning.
2. **Algo → Ray.** Mono, grid and noise = structure ("algo"). Smooth, glowing, round = clarity ("Ray").
3. **Soft geometry.** The logo has round terminals and no sharp corners. Match it.
4. **Motion has a job.** Reveal, guide, or reward. Everything respects `prefers-reduced-motion`.

## Colour
| Token | Value | Use |
|---|---|---|
| `--ar-green` | `#54C762` | Primary accent, CTAs, the ray, focus ring |
| `--ar-green-bright` | `#7BE88A` | Glow cores, hover |
| `--ar-green-deep` | `#2E8F3E` | Pressed, large UI (4.75:1) |
| `--ar-grey` | `#626262` | Logo grey, decorative only. 3.2:1 on stage, never body text |
| `--ar-bg` | `#0B0D0C` | Page stage |
| `--ar-surface-1/2` | `#121614` / `#1A1F1C` | Cards, panels |
| `--ar-line` / `-strong` | `#262D29` / `#36403A` | Borders, grid lines |
| `--ar-text` | `#EEF2EE` | Body and headings (17.2:1) |
| `--ar-text-muted` | `#9AA39C` | Secondary text (7.5:1) |
| `--ar-text-faint` | `#6F776F` | Captions, large only (4.2:1) |
| `--ar-on-green` | `#0B0D0C` | Text on green (9.0:1) |

Rules: no green body text on grey surfaces; no more than one green focal element per viewport, plus the ray; never put the grey logo mark on the dark stage. Use the light-on-dark logo variant below.

## Logo on dark
The grey `#626262` and "algo" wordmark are too dim on `#0B0D0C` (3.2:1). On the dark stage, recolour `#icon-r` and `#word-algo` to `--ar-text-muted` or `--ar-text`, keep `#icon-a` and `#word-ray` green. Do this with CSS (`#word-algo { fill: var(--ar-text) }`) on the inlined SVG.

## Typography
- **Display:** Outfit (rounded geometric, close to the wordmark). Tight tracking `-0.03em`, leading `0.95`, sizes `--ar-text-2xl` / `--ar-text-hero`.
- **Body:** Manrope, `--ar-text-base`, leading 1.6.
- **Mono:** JetBrains Mono for labels, counters, "algo" details. Uppercase with `--ar-tracking-label`.
- Load via Google Fonts with `display=swap`; preload the display weight used in the hero.

## Shape and space
Radii 8 / 16 / 28 / pill. 8px spacing base; sections use `--ar-space-section`; content max width 1280px with fluid gutter.

## Effects
`--ar-shadow-glow` for beam and focused elements; `--ar-ray-gradient` for lines and sweeps. Keep glows on the ray, CTAs and active cards only.

## Motion
- Reveal: `--ar-ease-out`, 400-900ms, stagger 60ms.
- Pinned/scrubbed: `--ar-ease-inout`.
- Beam sweeps: `--ar-ease-ray`, 1600ms.
- Reduced motion: durations collapse to ~0 via tokens; also stop particles and parallax in JS.

## Accessibility
Focus ring is 2px green with 3px offset on every interactive element. All text pairs above meet WCAG AA against `--ar-bg`, except `--ar-text-faint`, which is large-text only.