# 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*