# makeover.studio — Design System Reference

## 1. Visual Theme & Atmosphere

B2B polish with a premium cobalt soul. Makeover.studio uses Framer to deliver the crispness of Inter Display — its optical sizing and tight negative tracking give headings authority without aggression. The palette is a calculated corporate trio: deep navy for authority, cobalt blue for action, white for clarity. A single signature shadow glows cobalt-blue (rgba(33,96,223,0.48) at 10px spread) — this glow-like depth is the site's defining detail.

---

## 2. Color Palette & Roles

- **background**: rgb(255, 255, 255)
- **text**: rgb(0, 0, 0)
- **navy**: rgb(3, 20, 38) — deep authority background for dark sections
- **cobalt**: rgb(32, 96, 223) — primary brand/CTA blue
- **overlay**: rgba(0, 0, 0, 0.2) — soft scrim

*Notably absent:* Warm colours

---

## 3. Typography Rules

**Typeface(s):** Inter Display, Inter, Inter Variable

**Tech stack fonts hint:** Framer, Framer Motion

- **h1**: 48px/52.8px weight 600, −1.15px tracking
- **h2**: 32px/35.2px weight 600, −0.77px tracking
- **h3**: 24px/28.8px weight 600, −0.58px tracking
- **body**: 12–16px Inter Variable 400, −0.3px tracking

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

---

## 4. Component Stylings

**Border Radius:** None recorded — sharp technical edges

**Shadows:** rgba(33,96,223,0.06) 0px 0.5px 1.3px + rgba(33,96,223,0.48) 0px 4px 10.4px — cobalt glow signature

**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 **Framer + Framer Motion**. 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(33,96,223,0.06) 0px 0.5px 1.3px + rgba(33,96,223,0.48) 0px 4px 10.4px — cobalt glow signature. 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 Warm colours
- Add decorative elements

---

## 8. Responsive Behavior

Framer breakpoints; Inter Display optical sizing adapts well

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:

**"Framer B2B studio: white + deep navy + cobalt only, Inter Display 600 with tight negative tracking, signature cobalt glow-shadow on cards, sharp corners, minimal layout, authority-driven hierarchy"**

---

*Generated by Sparkbites — extracted from live CSS analysis*