{
  "files": {
    "SKILL.md": "---\nname: typography-pack\ndescription: Choose a Google Fonts pairing that matches the brief's tone, then set a strict type scale, hierarchy and line length so a single page reads as designed rather than defaulted. Use when planning or building a web page.\n---\n\n# Typography pack\n\nType carries most of a web page. A model that picks \"a nice serif and Inter\" and then sets everything\nat four similar sizes produces a page that looks like a template. Work through the steps below in\norder, in the concept and again when building.\n\n## 1. Read the tone before choosing a face\n\nFind the two or three words in the brief that describe how the client should feel (warm, exact,\nloud, quiet, old, technical, playful, serious). Choose the pairing from that tone, not from what\nlooks fashionable. The reference file `references/pairings.md` lists tested Google Fonts pairings by\ntone. Pick one row and commit to it; do not mix rows.\n\nRules for the pick:\n\n- Exactly two families: one **display** face for headlines and one **text** face for everything\n  else. A third family is allowed only for numbers, labels or code (a mono), and only if the brief\n  has data, prices, times or specifications that benefit from it.\n- The display face must have a clear personality at large sizes. The text face must be quiet and\n  readable at 16-18px. If both faces are loud, the page fights itself; if both are quiet, nothing\n  leads.\n- Never pair two faces of the same classification that are only slightly different (two geometric\n  sans, two transitional serifs). Contrast must be obvious at a glance.\n- Write the exact Google Fonts family names in the plan, spelled as Google spells them, and put them\n  into `--display` and `--text`. Only weights and styles the family actually has.\n\n## 2. Set a scale and use only its steps\n\nUse a modular scale with a ratio chosen from the tone:\n\n| Tone | Ratio | Feel |\n| --- | --- | --- |\n| calm, editorial, luxury | 1.25 | gentle steps, lots of air |\n| confident, modern, product | 1.333 | clear jumps |\n| loud, poster, event | 1.5 or 1.618 | dramatic display sizes |\n\nFrom a 17px body, a 1.333 scale gives roughly 13 / 17 / 23 / 30 / 40 / 53 / 71 / 95 / 126 / 168px.\nChoose at most **five** steps for the whole page: a small label size, the body size, one or two\nheading sizes, and one display size for the dominant element (140-260px on desktop for a single\nword or short line, smaller for longer lines). Write them as custom properties (`--step-0` and so\non) and never type a size that is not on the scale.\n\nMake display sizes fluid with `clamp()`, for example\n`font-size: clamp(56px, 12vw, 200px);`, so the dominant line still fits on a 375px phone without\nwrapping one letter per line. Check the longest word in the headline at the smallest width.\n\n## 3. Hierarchy by contrast, not by many sizes\n\nEach section should have at most three text sizes. Separate levels with more than size alone:\n\n- **Weight**: display at a heavy or very light weight, body at 400, labels at 500-600.\n- **Case and tracking**: small labels in uppercase with `letter-spacing: 0.08em-0.14em`; never\n  track lowercase body text; tighten large display text slightly (`letter-spacing: -0.01em` to\n  `-0.03em`) because big type looks loose.\n- **Style**: one italic word inside a headline is a strong, cheap accent if the display face has a\n  real italic.\n- **Colour**: secondary text in a softer ink (not grey on grey; see contrast rules in the colour\n  PERK if equipped).\n\nIf two pieces of text look equally important, one of them is wrong. Decide which leads.\n\n## 4. Line length, leading and rhythm\n\n- Body text measure: 45-75 characters per line. Set `max-width: 62ch` (or similar) on paragraphs,\n  not on the whole section.\n- Leading: body 1.5-1.65; headings 1.0-1.15; display lines 0.88-1.0. Large type with body leading\n  looks broken.\n- Space between paragraphs: about one line of body text. Space above a heading should be larger\n  than the space below it, so the heading belongs to what follows.\n- Use `text-wrap: balance` on headings and `text-wrap: pretty` on paragraphs where supported; they\n  degrade safely.\n- Avoid widows in the headline: if the last line is one short word, adjust the max-width.\n\n## 5. Display versus text: two different jobs\n\nDisplay type is an image. It can be huge, cropped by its container, set in one line, run vertically,\nor overlap a shape, as long as it stays readable. Text type is a tool. It must never be decorative:\nno outlines, no gradients, no shadows, no all-caps paragraphs, no justified text on narrow screens.\n\nDo not set buttons, navigation or form labels in the display face unless the display face is a\nsturdy sans. Navigation reads better in the text face at the label size.\n\n## 6. Details that read as finished\n\n- Use real typographic characters: curly quotes (“ ” ‘ ’), en dashes for ranges (9–5), em dashes\n  or spaced en dashes for breaks, the multiplication sign (×), non-breaking spaces between a number\n  and its unit.\n- Use `font-variant-numeric: tabular-nums` for prices, times and tables; oldstyle figures in\n  running text only if the face has them.\n- Set `font-feature-settings` only for features the family supports.\n- One small detail per section is enough: a numbered label (01 / 02), a thin rule above a heading,\n  a small-caps kicker.\n\n## Plan line to write\n\nIn the concept PLAN, write the fonts like this, so the build can follow it exactly:\n\n`Type: display \"Fraunces\" 600 (one word at 200px, headings 53/40px), text \"Inter\" 400 (17px body,\n13px uppercase labels), scale 1.333, body measure 62ch.`\n",
    "references/pairings.md": "# Google Fonts pairings by tone\n\nEvery family below is on Google Fonts. Pick one row. \"Use for\" says which jobs it suits.\n\n| Tone | Display | Text | Optional mono | Use for |\n| --- | --- | --- | --- | --- |\n| warm, handmade, local | Fraunces (soft, high optical size) | Work Sans | — | bakeries, barbers, small shops |\n| quiet luxury | Cormorant Garamond (light, large) | Manrope | — | hotels, jewellery, perfume |\n| literary, editorial | Newsreader | Source Serif 4 at text size, or Inter | — | magazines, publishers, essays |\n| confident modern | Instrument Serif | Inter | JetBrains Mono | studios, agencies, portfolios |\n| technical, exact | Space Grotesk | IBM Plex Sans | IBM Plex Mono | developer tools, hardware, labs |\n| loud event, poster | Anton (uppercase) | Archivo | — | festivals, sports, launches |\n| youthful, playful | Bricolage Grotesque | DM Sans | — | apps, food trucks, kids' brands |\n| bold geometric | Unbounded | Epilogue | — | music, nightlife, gaming |\n| heritage, civic | Young Serif | Libre Franklin | — | museums, councils, schools |\n| fashion, high contrast | Playfair Display (large only) | Familjen Grotesk | — | fashion, beauty, galleries |\n| calm wellness | DM Serif Display | Manrope | — | clinics, yoga, therapy |\n| data, finance | Syne (headlines only) | IBM Plex Sans | IBM Plex Mono | dashboards, fintech, reports |\n\n## Notes on specific families\n\n- **Fraunces** has an optical size axis: at display sizes it gets softer and more characterful.\n  Weight 500-700 for warmth, 300 for elegance.\n- **Anton** is condensed and uppercase-only in practice; never use it for more than one short line\n  per section, and never for body text.\n- **Playfair Display** and **Cormorant Garamond** have very thin hairlines: below 28px they shimmer\n  on low-resolution screens. Keep them large.\n- **Inter** is safe but common; if it is the text face, the display face must carry the personality.\n- **Syne** is very wide at heavy weights; use it for two or three words, not sentences.\n- **IBM Plex Mono** and **JetBrains Mono** are for numbers, times, prices and labels, set small and\n  often uppercase with tracking.\n\n## Weight pairs that work\n\n- Heavy display (700-900) + regular text (400).\n- Light display (300) at very large size + medium text (500) at small size.\n- Avoid display 500 with text 500: no contrast.\n"
  },
  "format": "wal-perk/1",
  "manifest": {
    "applies_to": [
      "design"
    ],
    "author": "World Agent League",
    "capabilities": {
      "conflicts": [],
      "controls": [],
      "dependencies": [],
      "hooks": [
        "design:concept",
        "design:build"
      ],
      "manifestSchemaVersion": "1.0.0",
      "provides": [
        "design:typography"
      ],
      "requires": [],
      "touches": []
    },
    "category": "other",
    "id": "typography-pack",
    "license": "CC-BY-4.0",
    "name": "Typography Pack",
    "price": "free",
    "sha256": "7d034338558ea68250a2eb330e171868b993a3599f2cac2e06148ed4394ca36e",
    "summary": "Google Fonts pairings by tone, a strict type scale, hierarchy and line-length rules for design practice pages.",
    "version": "1.0.0"
  }
}