# lue.studio — Design System Reference

## 1. Visual Theme & Atmosphere

Restrained clarity with a technical edge. lue.studio wears whitespace as a badge of confidence — an all-white canvas with near-black text rendered in wide-gamut display-p3 colour space, signalling a designer who thinks beyond the sRGB web. Pastel accent blobs (lavender, sky, lilac) float as ambient decoration rather than functional elements, giving the portfolio an airy, gallery-like feel. The exclusive use of PP Neue Montreal — a geometric grotesque — keeps every character precise without sacrificing warmth.

---

## 2. Color Palette & Roles

- **background**: rgb(255, 255, 255) — pure white canvas
- **text**: color(display-p3 0.02 0.02 0.02 / 0.8) — near-black at 80% opacity for soft legibility
- **accentLavender**: rgb(211, 221, 255) — decorative pastel purple blob
- **accentSky**: rgb(184, 218, 255) — decorative pastel blue blob
- **accentLilac**: rgb(214, 193, 255) — decorative pastel violet blob
- **accentPeriwinkle**: rgb(196, 195, 255) — decorative pastel periwinkle
- **buttonText**: color(display-p3 1 1 1 / 0.9) — white on dark interactive elements
- **border**: rgb(229, 231, 235) — Tailwind gray-200 for hairline dividers

*Notably absent:* Dark mode

---

## 3. Typography Rules

**Typeface(s):** PP Neue Montreal

**Tech stack fonts hint:** Next.js, Tailwind CSS

- **h1**: ~64px, weight 600+, tight tracking
- **body**: 16–18px, weight 400, 1.5 line-height
- **detail**: Uppercase small caps for labels

**Philosophy:** Each size level reinforces hierarchy without relying on colour.

---

## 4. Component Stylings

**Border Radius:** Generous — pill-shaped buttons and soft card corners

**Shadows:** None apparent — elevation handled by colour contrast alone

**Gradients:** None — blobs rely on flat pastels, not gradients

Components lean on spacing and typography for distinction rather than decorative chrome. Buttons likely use filled + ghost variants in the primary colour.

---

## 5. Layout Principles

Built on **Next.js + Tailwind CSS**. Layouts follow a content-first grid — wide gutters, deliberate whitespace rhythm. Section breaks use background-colour contrast rather than divider lines.

---

## 6. Depth & Elevation

Elevation is communicated through colour contrast and spacing alone — no box-shadow stack exists. This creates a completely flat, layered paper feel.

---

## 7. Do's and Don'ts

**Do:**
- Use the exact colour roles as defined — each serves a specific semantic purpose
- Respect the typeface role boundaries (each font has one job)
- Preserve generous whitespace — crowding breaks the design language
- Keep interactions restrained: hover opacity or colour-shift, not complex transforms

**Don't:**
- Introduce colours outside the defined palette
- Mix typefaces beyond the established pairing
- Add drop shadows where the design is intentionally flat
- Use gradients unless the site already employs them
- Add Dark mode
- Add decorative iconography

---

## 8. Responsive Behavior

Next.js with Tailwind breakpoints; fluid whitespace compression on mobile

On mobile, the core design language holds — the reduction is spatial (tighter gutters, stacked columns) not stylistic. Colour, typography, and component styles remain unchanged.

---

## 9. Agent Prompt Guide

> Use this as a one-paragraph brief when prompting an AI to build in this design language:

**"Minimal Next.js portfolio: white bg, display-p3 near-black text, PP Neue Montreal only, pastel lavender/sky/lilac blob accents (non-interactive), no shadows, generous whitespace, pill buttons"**

---

*Generated by Sparkbites — extracted from live CSS analysis*