# pqoqubbw.dev — Design System

## 1. Visual Theme & Atmosphere
pqoqubbw.dev is a developer portfolio/showcase built on Next.js and Tailwind, notable for its use of CSS `lab()` colour space — a signal that the colour system is perceptually engineered rather than traditionally hex-picked. The primary accent is a warm HSL orange (`23, 84.5%, 57.1%`) defined as a Tailwind-style custom property. The interface is spare and precise: Geist mono-weight throughout, flat layout, developer minimalism. The lab() colour usage is a subtle but meaningful technical flex.

## 2. Color Palette & Roles
| Role | Value | Notes |
|------|-------|-------|
| Dark text/bg | `lab(9.04 1.15 1.93)` | Near-black in perceptual space |
| Light bg | `lab(96.53 -0.10 0.36)` | Near-white in perceptual space |
| Text mid | `lab(35.52 1.09 4.08)` | Mid-dark grey |
| Accent | `rgb(238, 124, 53)` | Warm orange — from HSL(23, 84.5%, 57.1%) |
| Primary HSL | `23, 84.5%, 57.1%` | Tailwind-token format |

The use of `lab()` colour space is unusual — it ensures perceptually uniform colour contrast, particularly for accessibility.

## 3. Typography Rules
- **Sole typeface**: Geist — variable sans-serif, 400 weight throughout. h1 and body share 16px/24px — almost no typographic hierarchy by size.
- `letterSpacing: 0.16px` on headings — a micro-positive tracking that aids legibility at small sizes.
- The near-flat typographic scale signals a showcase/component-library site where visual hierarchy comes from layout, not type scale.
- No display font. No serif. Geist's neutrality lets the showcased content take focus.

## 4. Component Stylings
- **Radius**: No border-radius values detected — likely square or Tailwind utility classes applied inline.
- **Shadows**: None detected.
- The CSS extraction captured minimal component chrome — the site's components are likely the focus, not the structural shell.
- Orange accent (`rgb(238,124,53)`) applies to interactive highlights.

## 5. Layout Principles
- Next.js App Router structure.
- Flat, content-focused layout where the interactive component demos are the primary content.
- Geist at 16px across all levels — readability over hierarchy.
- Tailwind utility-based spacing.

## 6. Depth & Elevation
Completely flat — no shadows or elevation tokens detected. The site relies on colour contrast from the lab() palette and orange accent for visual interest.

## 7. Do's and Don'ts
**Do:**
- Use Geist at consistent small sizes — let the showcased content create visual hierarchy
- Apply the warm orange accent for interactive/highlight states
- Consider lab() colour space for critical contrast ratios

**Don't:**
- Add large display typography — this system is intentionally modest-scale
- Introduce shadows or elevation — flatness is the design language
- Switch to hex-based colours; respect the perceptual colour system

## 8. Responsive Behavior
Tailwind breakpoints with standard Next.js layout. 16px Geist is already mobile-appropriate. Orange accent maintains visibility on both light and dark surfaces.

## 9. Agent Prompt Guide
> Reproduce pqoqubbw.dev style: near-white lab(96.53) background, near-black lab(9.04) text, Geist 400 at 16px for all text. Warm orange accent `rgb(238,124,53)` from HSL(23°,84.5%,57.1%). No border-radius, no shadows. Developer showcase aesthetic — content is the design.

*Generated by Sparkbites — extracted from live CSS analysis*