# michaeldesigns.co — Design System

## 1. Visual Theme & Atmosphere

Michael Designs presents as a no-nonsense portfolio with a strong editorial voice. The palette is deliberately tight — near-black text on white, punctuated by vivid accent shots that announce personality without undermining credibility. The design feels like a printed publication translated to the web: generous margins, disciplined type hierarchy, and a coral-red that jolts the eye exactly when intended. There is no decoration for its own sake. Every element earns its place.

---

## 2. Color Palette & Roles

| Role | Value | Usage |
|---|---|---|
| Background | `rgb(255, 255, 255)` | Page canvas |
| Foreground | `rgb(51, 51, 51)` | Body copy, default text |
| Primary accent | `rgb(255, 111, 97)` | Coral — highlight divs, brand moments |
| Alert / notice | `rgb(213, 11, 11)` | Error states, page-level notices |
| Highlight | `rgb(255, 214, 0)` | Yellow — toggle button, secondary accent |
| White inverse | `rgb(255, 255, 255)` | Text on dark/accent surfaces |

The palette follows a strict warm-neutral base with two vivid interrupts (coral and yellow). No blues, no gradients. Color is used as punctuation, not atmosphere.

---

## 3. Typography Rules

**Typeface:** Market Sans (Helvetica fallback) — a custom grotesque that lends an agency-grade confidence throughout.

| Context | Size | Weight | Notes |
|---|---|---|---|
| Body / base | 16px | 400 | Comfortable reading measure |
| H2 headings | 21px / 31.5px lh | 700 | Bold, tight hierarchy |
| H3 subheadings | 14px | 700 | Small-caps-style weight bump |
| UI / select | 12px | 400 | 16px line height, compact |

- No letter-spacing customisation — the typeface ships with balanced defaults.
- No `text-transform` — the designer trusts the letterforms.
- Heading weight jumps (400→700) do the heavy lifting rather than size alone.

---

## 4. Component Stylings

- **Page notice banner:** `section.page-notice` — solid `rgb(213, 11, 11)` background, white text. Full-width alert strip.
- **Collapse toggle button:** Yellow fill `rgb(255, 214, 0)` with white text — high contrast, tactile.
- **Highlight div:** Coral `rgb(255, 111, 97)` background, dark `rgb(51, 51, 51)` text — used for callout cards or featured items.
- **Inputs/selects:** Minimal styling, inheriting the sans-serif typeface at 12px. No decorative borders beyond the default.
- **Buttons:** No shadow. Flat, colour-block style. Colour conveys state, not elevation.

---

## 5. Layout Principles

- Body padding: `0px 48px` — generous horizontal breathing room, editorial-style margins.
- No gap utilities at the body/section level — spacing is handled per-component.
- Breakpoints cluster around `1335–1440px`, suggesting the layout is desktop-first and optimised for large screens before adapting down.
- Content appears to be single-column or two-column editorial blocks rather than a grid-heavy approach.

---

## 6. Depth & Elevation

Essentially flat. No box shadows detected on primary surfaces. The design uses **colour contrast** and **typographic weight** to create visual hierarchy instead of elevation or blur effects. The coral and red accents provide the only "lift" — achieved through chromatic pop rather than shadow.

---

## 7. Do's and Don'ts

**Do:**
- Use Market Sans at bold weights for headings — it defines the brand voice.
- Apply the coral accent sparingly for maximum impact.
- Maintain the 48px horizontal padding on the body for editorial breathing room.
- Use flat, solid-fill buttons. No gradients.

**Don't:**
- Add box shadows or card elevations — the design is intentionally flat.
- Introduce new typefaces. The single-font system is part of the identity.
- Use blue or cool colours — the warm palette is coherent and intentional.
- Overcrowd layouts. Whitespace is a first-class design element here.

---

## 8. Responsive Behavior

Breakpoints suggest a staircase collapse: `1335 → 1350 → 1371 → 1440px`. These tight clusters indicate fine-tuned layout adjustments near large desktop widths rather than traditional mobile breakpoints. Expect:
- Horizontal padding to reduce on smaller viewports.
- Typography sizes to hold firm (no dramatic rescaling detected).
- Component stacking where two-column arrangements exist.

---

## 9. Agent Prompt Guide

> "Design in the style of michaeldesigns.co: white background, `rgb(51,51,51)` text, Market Sans bold for headings. Use coral `rgb(255,111,97)` as a single accent colour — one per section maximum. Flat layout, no shadows. Body padding 48px horizontal. Alert states use `rgb(213,11,11)`. Yellow `rgb(255,214,0)` for interactive toggles only. Editorial, confident, minimal."

---

*Generated by Sparkbites — extracted from live CSS analysis*