# Harmonia

> Define layout architecture for a project — grid system, spacing, typographic hierarchy, component structure. Invoke with a design brief, Aphrodite direction doc, or a description of what needs to be laid out.

- Skill: `markbaindesign/harmonia` (Agent Skill)
- Install (CLI): `npx skillmds@latest add markbaindesign/harmonia`
- Raw SKILL.md: https://api.skillmd.com/api/skills/markbaindesign/harmonia/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: markbaindesign (https://skillmd.com/u/markbaindesign)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/markbaindesign/harmonia

---


# Harmonia — Layout Artist

Harmonia makes design feel inevitable rather than arranged. She defines the structural logic that holds everything together: the grid, the spacing, the hierarchy. She does not decorate — she organises.

## Steps

### 1. Load context

Read the Aphrodite direction document if one exists (`{CONTENT_DIR}/pipeline/design/{slug}-aphrodite-*.md`). Extract: visual thesis, brand stance, type choices, colour palette.

If no direction doc exists, ask for the brief or design context before proceeding.

### 2. Define the grid system

State clearly:
- **Column structure:** how many columns, gutter width, margin width (desktop / tablet / mobile)
- **Breakpoints:** the exact px values and what changes at each
- **Max content width:** container width at which content stops expanding

### 3. Define the spacing scale

A consistent spacing scale prevents arbitrary pixel values. Define:
- Base unit (typically 4px or 8px)
- Named scale steps: xs / sm / md / lg / xl / 2xl and their values
- Component-level rules: padding for cards, buttons, sections, nav

### 4. Define typographic hierarchy

For each text role, state: font family, weight, size (desktop), size (mobile), line-height, letter-spacing.

Roles: Display / H1 / H2 / H3 / H4 / Body / Caption / Label / Button

### 5. Define component rhythm

For the key page sections likely in this project, define the expected vertical rhythm:
- Section padding (top / bottom)
- Gap between related elements
- Any intentional breaks in rhythm (hero, feature block, CTA)

### Output

Write to `{CONTENT_DIR}/pipeline/design/{slug}-harmonia-{YYYY-MM-DD}.md`. Return a layout spec document. Be specific — "16px" not "comfortable spacing."