# mainfra.me — Design System Reference

## 1. Visual Theme & Atmosphere

Industrial confidence on a Nuxt scaffold. A tightly restrained palette of warm white, near-black charcoal, and a single punchy tomato-red accent frames a portfolio that communicates craft through restraint. PP Neue Montreal carries all the visual weight — the geometric grotesque works at every size from tiny labels to oversized display. The single notable shadow (rgba(41,41,41,0.3) at 48px) creates a deep cinematic pool under hero elements.

---

## 2. Color Palette & Roles

- **background**: rgb(255, 255, 255)
- **text**: rgb(41, 41, 41) — warm near-black
- **surfaceTint**: rgb(226, 222, 218) — warm beige/sand for section backgrounds
- **accent**: rgb(235, 78, 61) — tomato red, used sparingly as a single active signal

*Notably absent:* Multi-colour palette

---

## 3. Typography Rules

**Typeface(s):** PP Neue Montreal

**Tech stack fonts hint:** Nuxt

- **display**: 36px+ PP Neue Montreal 500
- **body**: 18.9px/21.7px 400
- **labels**: 12px 500, tight tracking

**Philosophy:** Each size level reinforces hierarchy without relying on colour.

---

## 4. Component Stylings

**Border Radius:** None detected — sharp architectural edges

**Shadows:** rgba(41, 41, 41, 0.3) 0px 48px 112px −32px — one dramatic depth shadow for hero

**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 **Nuxt**. 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: rgba(41, 41, 41, 0.3) 0px 48px 112px −32px — one dramatic depth shadow for hero. 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 Multi-colour palette
- Add rounded corners

---

## 8. Responsive Behavior

Nuxt-based; fluid type scaling implied by custom viewport properties (--full-viewport, --frame-height)

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:

**"Nuxt portfolio: white bg, warm charcoal text, PP Neue Montreal only, single tomato-red accent, sharp corners, one dramatic 48px cinematic shadow, warm beige section fills"**

---

*Generated by Sparkbites — extracted from live CSS analysis*