# zmh.org — Design System

## 1. Visual Theme & Atmosphere

WordPress-built portfolio or organization site using a bold violet brand color against clean white. The design leans on WordPress block editor conventions with a structured, institutional feel.

**Mood:** institutional, clean, WordPress-conventional, bold accent

The visual language is refined without being austere — custom typefaces carry the personality while structural clarity does the heavy lifting. A structured token system underpins every color decision.

---

## 2. Color Palette & Roles

**Design tokens found:** 19 color custom properties

**Named Tokens (excerpt)**
- `--wp-block-synced-color`: `#7a00df`
- `--wp-editor-canvas-background`: `#ddd`
- `--wp-admin-theme-color`: `#007cba`
- `--wp-admin-theme-color-darker-10`: `#006ba1`
- `--wp-admin-theme-color-darker-20`: `#005a87`
- `--wp--preset--color--black`: `#000000`
- `--wp--preset--color--cyan-bluish-gray`: `#abb8c3`
- `--wp--preset--color--white`: `#ffffff`
- `--wp--preset--color--pale-pink`: `#f78da7`
- `--wp--preset--color--vivid-red`: `#cf2e2e`
- `--wp--preset--color--luminous-vivid-orange`: `#ff6900`
- `--wp--preset--color--luminous-vivid-amber`: `#fcb900`

**Palette philosophy:** Controlled neutrals with a single accent that carries all interactivity signals.

---

## 3. Typography Rules

- **h1**: Merriweather / 24px / wt 550 / lh 34.8px
- **h2**: Merriweather / 13px / wt 700 / tracking 1px / lh 18.85px / uppercase
- **body**: Lucida Grande / 12.8px / wt 400 / lh 21.76px
- **p**: Lucida Grande / 14.8px / wt 400 / lh 25.16px
- **a**: Lucida Grande / 12.8px / wt 400 / lh 21.76px
- **button**: Arial / 13.3333px / wt 400
- **input**: Lucida Grande / 12.8px / wt 400 / lh 19.2px
- **[role="dialog"]**: Lucida Grande / 16px / wt 400 / lh 27.2px
- **label**: Lucida Grande / 10px / wt 400 / lh 17px

**Custom typefaces:** Merriweather, Lucida Grande

**Typography philosophy:** Two-typeface system: display and body voices serve distinct roles without fighting for dominance.

**Headline scale:** h1 at 24px, h2 at 13px — restrained sizing — hierarchy through weight and spacing rather than scale.

---

## 4. Component Stylings

**Border radius:** No border-radius — sharp edges throughout.

**Shadows:** Shadows are absent — depth through color and spacing alone.

- Component data limited — apply global radius and color rules consistently.

---

## 5. Layout Principles

**Layout philosophy:** Content-first layout — sections breathe independently; no fixed grid forces awkward compositions.

Spacing cadence: Fluid spacing tokens via `clamp()` — scales smoothly between breakpoints without abrupt jumps.

---

## 6. Depth & Elevation

**Flat design** — no box shadows. Depth communicates through:
- Background color contrast between sections
- Border lines as separators
- Typography weight shifts
- Proximity and whitespace

This is an intentional choice: shadows would add visual noise to a carefully restrained palette.

---

## 7. Do's and Don'ts

**Do:**
- Respect the established spacing rhythm — every element should feel intentional
- Use only the defined typefaces (Merriweather, Lucida Grande) — system fonts will break the brand voice
- Keep all edges sharp — border-radius destroys the visual discipline
- Keep elevation flat — adding shadows would contradict the design language

**Don't:**
- Apply dark mode as an afterthought — it requires its own color decisions
- Use accent colors for decoration — they are reserved for interactive signals only
- Mix more than two typeface families — typographic chaos undermines brand clarity
- Add gradient backgrounds unless they exist in the design system
- Use stock UI component defaults (e.g., Bootstrap/MUI) without full restyling

---

## 8. Responsive Behavior

**Headline scale:**
- Desktop: 24px
- Suggest mobile: 13px–16px

**Body text:** 12.8px — standard; consider 15px on mobile for comfort

**Layout breakpoints:** Standard: stack multi-column sections to single column; reduce headline size; maintain horizontal padding of at least 16px.

**Navigation:** Apply standard mobile nav pattern: fixed header, collapsible menu.

---

## 9. Agent Prompt Guide

When asked to create UI in the style of **zmh.org**, instruct the agent:

```
Design in the style of zmh.org: institutional, clean, WordPress-conventional, bold accent.
Use clean backgrounds with high contrast text.
Primary typeface: Merriweather, body: Lucida Grande.
Sharp corners on all elements — no border-radius.
No shadows — flat design.
Accent color: #7a00df — use only for interactive elements.
Generous whitespace. Typography drives hierarchy.
Avoid: generic card components, gradient backgrounds, icon-heavy layouts, rounded pill buttons.
```

**Key design signals to reference:**
- Custom font: Merriweather — load via CDN if reproducing
- Shadow-free — use border or background contrast for separation
- Zero border-radius — rectangular everything
- Color temperature: Neutral with controlled accent

---

*Generated by Sparkbites — extracted from live CSS analysis*