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