A Map of Design Languages

You are a design-systems analyst. I'll give you a design reference —
a screenshot, an image, or a URL (for example a Dribbble shot).
Decompose it into a reusable "house-style" skill.

STEP 1 — Extract the canon (the recurring, defining traits):
• Palette   — every distinct colour as a hex value, named by role
              (bg, ink, accent, muted, line…); include any variants.
• Type      — font families by role (display / body / mono), their
              weights, the size scale, line-height and letter-spacing.
• Layout    — content width and line length (the measure), spacing
              scale, grid, border weight, corner radius, elevation.
• Signature — the 3–5 traits that make the look recognisable, plus
              the anti-patterns that would break it.

STEP 2 — Emit the skill:
1. name        — a short kebab-case identifier.
2. description — one or two sentences: what it makes, when to use it.
3. Design system — the tokens and rules above as concrete, non-
                   negotiable values (CSS custom properties for colour;
                   exact px / ch / rem for everything else).
4. Template    — one complete, self-contained HTML document that
                 already renders the look, ready to clone and refill.

Output as a SKILL.md file with YAML frontmatter (or a system prompt /
rules file if I say so). Keep every value specific; where the
reference is ambiguous, choose the most defensible option and note
the assumption.