mackenziechild.me — Design System Reference

1. Visual Theme & Atmosphere

Warm parchment minimalism. The lab() colour space reveals a designer operating at the bleeding edge — background and text are defined in perceptually uniform Lab values rather than hex, producing a warmer-than-neutral off-white that feels handcrafted. The custom “pressura” typeface (a compressed grotesque) gives the portfolio a distinctive editorial identity. There is almost nothing on the page that isn’t absolutely necessary.

2. Color Palette & Roles

• background: lab(90.68 0.40 −1.45) ≈ warm off-white parchment
• text: lab(26.80 1.35 −4.68) ≈ deep charcoal-navy
• surface: lab(84.98 0.60 −2.18) ≈ slightly darker warm white for cards
• textSecondary: lab(35.12 1.78 −6.12) ≈ softer charcoal
• white: rgb(255, 255, 255) — inset contrast moments

Notably absent: Colour

3. Typography Rules

Typeface(s): pressura (custom compressed grotesque)

Tech stack fonts hint: Next.js, Tailwind CSS

• note: Headings are set in pressura at restrained sizes; the type does the aesthetic work through weight and compression rather than scale
• body: 16px/24px

4. Component Stylings

Border Radius: None apparent — sharp-cornered throughout

Shadows: Three-level Tailwind shadow scale (sm, md, lg) used conservatively for card depth

Gradients: None

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 system: Three-level Tailwind shadow scale (sm, md, lg) used conservatively for card depth. Depth is used purposefully, not decoratively.

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 Colour
• Add animations

8. Responsive Behavior

Single-column mobile; sparse grid for desktop — content-first

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:

“Typographer-led portfolio: warm Lab parchment bg, custom pressura font, sharp corners, three Tailwind shadow levels only, zero colour, pure content hierarchy”

Generated by Sparkbites — extracted from live CSS analysis