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