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

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.

• 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