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

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