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