",
"css": ".ds-hero h1 { font-family: \"Brygada 1918\", serif; font-size: clamp(40px, 6.5vw, 80px); font-weight: 600; line-height: 1.04; letter-spacing: -0.022em; color: var(--text-bright); max-width: 16ch; margin: 0 0 28px; } .ds-hero h1 span { color: var(--ember); } .ds-hero-links { display: flex; align-items: center; gap: 24px; } .ds-hero-primary { font-family: \"Commit Mono\", monospace; font-size: 14px; padding: 13px 30px; background: var(--candle); color: var(--bg); border: 1px solid var(--candle); text-decoration: none; transition: background 0.2s, transform 0.2s; } .ds-hero-primary:hover { background: var(--candle-dim); transform: translateY(-2px); } .ds-hero-link { font-family: \"Commit Mono\", monospace; font-size: 14px; color: var(--candle); padding: 4px 0; border-bottom: 1px dashed var(--candle-faint); text-decoration: none; }"
},
{
"name": "Parchment Inset",
"kind": "card",
"refersTo": null,
"description": "Signature: inverted dark block for a featured passage; pinned to the same values in light and dark mode.",
"html": "",
"css": ".ds-parch { background: #2a2015; color: #ede4d0; padding: 28px 32px; border-radius: 0; } .ds-parch-label { font-family: \"Commit Mono\", monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #c4a448; margin-bottom: 12px; } .ds-parch h2 { font-family: \"Brygada 1918\", serif; font-size: 22px; font-weight: 500; margin: 0 0 10px; } .ds-parch p { font-family: \"Commit Mono\", monospace; font-size: 13px; line-height: 1.7; color: #b8ae98; margin: 0; }"
}
],
"narrative": {
"northStar": "The Text Adventure Hall",
"overview": "Ghost Guild is a world built from words: a monospace text adventure rendered on cream paper. Rooms instead of pages, prose instead of chrome, structure drawn in dashed ink rather than boxes and shadows. Two typefaces (Brygada 1918 serif for display, Commit Mono for everything else) do all the work over a warm cream ground with a faint noise texture. Candlelight gold is the single voice of action; ember rust is the rare focal emphasis. Depth is tonal layering, never drop shadows or glass.",
"keyCharacteristics": [
"Two fonts only: Brygada 1918 (serif display) + Commit Mono (everything else).",
"Cream paper ground with a 2.5% noise overlay; warm, tinted neutrals throughout.",
"Dashed borders for structure, solid borders for inputs and active state.",
"Square corners everywhere (border-radius: 0).",
"Flat by default: depth comes from tonal layering, not shadows.",
"Candle gold is the only call-to-action color; ember rust is the rare accent."
],
"rules": [
{
"name": "The Candlelight Rule",
"body": "Candle gold is the only color permitted on a call-to-action. If something is gold, it acts. Nothing decorative wears gold.",
"section": "colors"
},
{
"name": "The Single Ember Rule",
"body": "Ember rust appears at most once per view as emphasis. Two embers cancel each other out; the rarity is the point.",
"section": "colors"
},
{
"name": "The Two-Font Rule",
"body": "Brygada 1918 and Commit Mono. That is the entire type system. A third family is forbidden.",
"section": "typography"
},
{
"name": "The Flat Paper Rule",
"body": "Surfaces sit flat on the page. If you reach for box-shadow on an in-page element, use a dashed border or a tonal surface step instead. Shadows belong only to floating popovers.",
"section": "elevation"
}
],
"dos": [
"Do use exactly two typefaces: Brygada 1918 for display/headings, Commit Mono for everything else.",
"Do draw structure with 1px dashed borders, and switch borders to solid only for inputs and active state.",
"Do keep every corner square (border-radius: 0).",
"Do reserve Candle Gold (#7a5a10) for actions and Ember Rust (#8a4420) for a single focal emphasis per view.",
"Do convey depth through tonal layering (cream -> surface -> parchment) and the noise overlay, not shadows.",
"Do keep text contrast at WCAG AA: Ink Dim (#5a5040) and Ink Faint (#665c4b) were tuned to pass on cream.",
"Do use fluid clamp() spacing and type so the layout breathes on large viewports."
],
"donts": [
"Don't introduce a third typeface. (The Two-Font Rule.)",
"Don't round corners anywhere.",
"Don't put box-shadow on in-page surfaces; shadows belong only to floating popovers.",
"Don't use a border-left/border-right greater than 1px as a colored accent stripe.",
"Don't use gradient text or background-clip: text; emphasis comes from weight, size, or a single ember word.",
"Don't use purple/blue gradients, glassmorphism, neon-on-dark, or identical icon-title card grids.",
"Don't reach for CSS hacks: no negative margins, no magic numbers, no fragile workarounds.",
"Don't put neutral gray text on the parchment block or any colored surface; use the parchment text tokens.",
"Don't use UToggle; use USwitch (Nuxt UI 4)."
]
}
}