field-guide-design

name	field-guide-design
description	Use this skill to generate well-branded interfaces and assets for The Field Guide to Narrative & Game Design — a naturalist-style book/wiki about atmosphere, puzzles, social contracts and storytelling. Use for production work or throwaway prototypes, mocks and slides. Contains the brand's colours, type, fonts, voice, components and UI kits.
user-invocable	true

Field Guide to Narrative & Game Design — design skill

Read readme.md first — it holds the full brand: content voice, visual foundations, iconography, and an index of every file. Then explore the tokens, components and UI kits.

Two faces, two renderers (read before building the product)

The Field Guide ships as two surfaces from one .qmd source:

• Print / PDF → Quarto → Typst, themed with tokens/ (see ui_kits/print/).
• Website → a bespoke app, built from scratch — Quarto's fixed navbar+sidebar shell cannot produce it. ui_kits/wiki/ is the blueprint for that site, not Quarto output and not a drop-in. Full decision + division-of-labour: guidelines/web-rendering-strategy.md — read it before implementing any web rendering.

What this brand is

A naturalist field guide to game and narrative design. Every idea is a pinned specimen — numbered, filed under a taxon, opened with a one-line italic Silhouette. Warm cream paper, near-black ink, one settled amber accent, Georgia serif throughout. Pigment on a page, never pixels on a screen.

Non-negotiables

• Palette: paper #fafafa / ink #1a1a1a / amber #c07840 (brand spine), plus six value-laddered family inks (Indigo · Teal · Garnet · Moss · Umber · Plum) — colour the article by its family via data-family="…". No gradients, no glow, near-zero shadow, crisp 2–4px corners. Colour = family, icon = media, text = genre. Family colours print colour but stay separable in greyscale.
• Type: Adobe Jenson Pro for all reading & display (routed by optical size: Caption / Text / Subhead / Display); Cronos Pro for taxonomic labels & UI; Letter Gothic Std for provenance markers & data. All self-hosted.
• Voice: third person ("the player," "the designer"), confident and dry. Open entries with an italic Silhouette. Mark claims with provenance ([corpus]/[researched]/[synthesis]). No emoji. Avoid em-dashes in body.
• Signatures: the 2px family-coloured top-rule on every plate; the bleed tabs (per-family thumb-index); the three callout voices (Specimen plate / Field Note / Hazard band); ink-linework illustration plates (see guidelines/illustration-style.md).

How to work

• Link styles.css and author against the semantic tokens.
• For React, load _ds_bundle.js and read components from window.FieldGuideDesignSystem_df43d1 (Button, Callout, EntryCard, MediaBadge, ProvenanceMark, SearchInput, FilterChip, StatBlock, Backlinks, Silhouette, Tag).
• For visual artifacts (slides, mocks, throwaway prototypes), copy the assets/tokens you need out and produce static HTML the user can open.
• For production code, copy assets and follow the rules here to design as a brand expert.

If invoked with no brief, ask what they want to build, ask a few focused questions, then act as an expert designer — outputting HTML artifacts or production code as the need dictates.