# Reve — Design Language

## 1. Visual Theme & Atmosphere
Reve is a thoughtfully engineered product with a design system that reflects genuine craft. The site uses two custom proprietary fonts (ReveDisplay and ReveUI) and an 8px rhythm base — every spacing decision derived from that grid unit. The colour system is built with `light-dark()` CSS function for first-class dark mode support across a comprehensive neutral scale. The overall aesthetic is precise, scalable, and system-driven — the mark of a team that thinks in design tokens.

## 2. Color Palette & Roles
- **Neutrals** — comprehensive `light-dark()` scale from `--sl-color-gray-50` to `--sl-color-gray-950`: both light and dark values built-in
- **Light mode surface** — `#f9f9f9` to white for layered backgrounds
- **Dark mode surface** — `#1a1a1a` to `#2e2e2e` for layered darks
- **Text light mode** — near-black (`#292929`); dark mode — near-white (`#d6d6d6`)
- **Alert/status colours** — red, green, yellow, blue: full semantic colour set via `--sl-color-*`
- **Rhythm unit** — `--rv-rhythm: 8px`: all spacing is multiples of this base

The system is neutral-first, semantic-complete, and dual-mode by design.

## 3. Typography Rules
- **ReveDisplay** with `forma-djr-micro` fallback: display headings — a custom brand face
- **ReveUI** with `forma-djr-micro` fallback: interface text — a companion UI variant
- Weight 500–600 for headings, 400 for body
- Heading size ~32px; body at 16–18px
- The custom typeface family signals premium, product-native design investment
- No letter-spacing adjustments or text transforms detected — clean defaults

## 4. Component Stylings
- No border radii recorded — likely uses the rhythm unit for any rounding
- No shadows in the collected CSS — elevation handled systemically
- Spacing based on `--rv-rhythm: 8px` multiples (8, 16, 24, 32…)
- Full semantic slot system via `--sl-color-*` properties for every component state

## 5. Layout Principles
- 8px grid system as the structural backbone
- Responsive design built-in through `light-dark()` colour handling
- Clean information architecture typical of documentation/product sites
- Navigation and content hierarchy systematic and token-driven

## 6. Depth & Elevation
- No explicit shadows in collected CSS
- Light/dark surface layering provides implicit depth through the neutral scale
- Background colour transitions create section delineation

## 7. Do's and Don'ts
**Do:** Always use multiples of 8px (`--rv-rhythm`) for all spacing decisions.
**Do:** Use `light-dark()` for every colour to ensure automatic dark mode support.
**Do:** Keep ReveDisplay for headings, ReveUI for interface text — the families are not interchangeable.
**Don't:** Introduce external typefaces — the custom family is the brand.
**Don't:** Use arbitrary spacing values — only rhythm multiples (8, 16, 24, 32, 40, 48…).
**Don't:** Define single-mode colours — every value must have both light and dark equivalents.

## 8. Responsive Behavior
- 8px rhythm grid scales naturally across viewports
- `light-dark()` handles colour scheme automatically via `prefers-color-scheme`
- Semantic colour slots (`--sl-color-*`) adapt consistently through the scale
- Font sizes likely reduce moderately at mobile; layout collapses to single column

## 9. Agent Prompt Guide
> Design like Reve: 8px rhythm base for all spacing, light-dark colour system using CSS `light-dark()`. Custom fonts ReveDisplay (headings, weight 500–600) and ReveUI (interface, weight 400). Neutral-first achromatic scale with semantic colour slots. Token-driven, system-minded, dual-mode by default.

*Generated by Sparkbites — extracted from live CSS analysis*