# matteosantoro.dev — Design System Reference

## 1. Visual Theme & Atmosphere

Systematic monochromatic refinement. Matteosantoro.dev operates entirely in a black-to-white gradient of opacity values — no named colours exist beyond black and white with carefully calibrated alpha layers. This opacity-first approach means the palette automatically adapts to any background context. System font (ui-sans-serif) signals a developer who values performance and native rendering over brand expression.

---

## 2. Color Palette & Roles

- **background**: rgb(255, 255, 255)
- **text**: rgba(0, 0, 0, 0.95) — near-black
- **textPrimary**: rgba(0, 0, 0, 0.85)
- **textBody**: rgba(0, 0, 0, 0.82)
- **textMuted**: rgba(0, 0, 0, 0.9)
- **border**: rgb(229, 231, 235) — Tailwind gray-200
- **surfaceLight**: rgba(0, 0, 0, 0.05) — card background tint
- **interactiveHover**: rgba(100, 116, 139, 0.1) — subtle slate hover
- **dark**: rgb(0, 0, 0)
- **white**: rgb(255, 255, 255)

*Notably absent:* Custom typeface

---

## 3. Typography Rules

**Typeface(s):** ui-sans-serif (system font stack)

**Tech stack fonts hint:** Tailwind CSS

- **note**: System font stack means native rendering — no loading, no FOUT. Scale relies on Tailwind defaults. Developer-centric priority on performance over custom typography.

---

## 4. Component Stylings

**Border Radius:** Tailwind defaults (rounded)

**Shadows:** Subtle Tailwind shadow scale — low-contrast, flat feel

**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 **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: Subtle Tailwind shadow scale — low-contrast, flat feel. 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 Custom typeface
- Add named colours

---

## 8. Responsive Behavior

Pure Tailwind breakpoints; minimal layout complexity

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:

**"Developer portfolio: system font only, opacity-based black/white palette, Tailwind CSS, flat cards with rgba(0,0,0,0.05) surfaces, no gradients, slate hover states, maximum simplicity"**

---

*Generated by Sparkbites — extracted from live CSS analysis*