# Raphaël Salaja — Design Language

## 1. Visual Theme & Atmosphere
Raphaël Salaja's site embodies radical restraint. The design strips away every decorative element until only the work remains. A near-white background, neutral dark text, and a single typeface (Inter) create an environment of total compositional focus. What's most striking is what's absent: no shadows, no border radii, no accent colours in the UI chrome itself. The palette lives entirely in the project content — a curated rainbow of CSS custom properties for product work (Family Wallet's full hue spectrum) that never intrude on the site shell.

## 2. Color Palette & Roles
- **Background** — transparent/white: page surface
- **Primary text** — `oklch(0.22213 0 0)` (near-black, neutral): headings, primary content
- **Secondary text** — `oklch(0.6901 0 0)` (mid grey): links, secondary labels, metadata
- **Content palette (project-specific)** — a full-spectrum set (`--family-wallet-*`) covering red through navy, used only within project case study contexts

The site shell itself is achromatic. Colour is a property of the work on display, not the frame.

## 3. Typography Rules
- **Single typeface** — `Inter` (weight 400 only): every element — headings, body, UI
- Size range is narrow: 14–16px — almost no hierarchical variation through scale
- No letter-spacing adjustments, no text transforms, no italic
- Hierarchy expressed through spatial positioning and weight of white space, not typographic variation
- The apparent sameness of type creates a catalogue-like neutrality

## 4. Component Stylings
- No border radii — zero corner rounding; pure rectangular geometry
- No shadows whatsoever
- Links styled with subtle grey (`oklch(0.69)`) rather than blue — passive navigation
- Project thumbnails carry all visual weight as images/videos

## 5. Layout Principles
- Grid-based, systematic, museum-quality spacing
- Whitespace is the primary design element
- Navigation minimal and fixed; content presented in clean scroll
- No decorative dividers or flourishes — content blocks separated by space alone

## 6. Depth & Elevation
- Zero depth — flat layout, no shadows, no layering
- All elements treated as coplanar
- Depth emerges only through image/video content within project blocks

## 7. Do's and Don'ts
**Do:** Let whitespace do all the visual work — resist filling empty areas.
**Do:** Keep Inter at weight 400 only; hierarchy via size and spacing, not weight.
**Do:** Reserve all colour for content contexts (project thumbnails, case studies).
**Don't:** Add shadows, borders, or rounded corners to the site chrome.
**Don't:** Introduce a second typeface.
**Don't:** Use any UI accent colour on interactive elements.

## 8. Responsive Behavior
- Layout shifts from multi-column grid to single-column at mobile
- Font sizes remain near-constant; no dramatic scaling
- No significant layout transformations — the restraint carries across viewports

## 9. Agent Prompt Guide
> Recreate Raphaël Salaja's portfolio: white background, Inter 400 only, neutral oklch greys for text hierarchy. Zero border-radius, zero shadows, zero accent colours in the UI. All colour lives inside project imagery. Museum-like restraint — space is the only design element.

*Generated by Sparkbites — extracted from live CSS analysis*