Document Design System

Document Design System

The visual layer for HTML documents and slide decks: a token file in, a single self-contained CSS bundle out, with every color pairing checked against WCAG before it ships. This is the theming layer for documents — type scales, reading measure, print roles, light/dark surfaces. It is not a product UI component library; there are no buttons, form states, or component variants here.

When to use this skill

• Theming a report or whitepaper that must render as one self-contained HTML file
• Building a deck theme where type must stay legible at projection distance
• Auditing an existing palette before a public or regulated publication
• Diagnosing dark-mode drift — text that reads fine in light mode and fails in dark
• Standardizing across documents so a series of reports looks like one series
• Answering "does this pass AA?" with a number instead of an opinion

Inputs the skill expects

• A design-token JSON file (or the intent to generate one from assets/sample_tokens.json)
• Brand colors, if any exist — a hex value and where it came from
• Typeface choices plus their fallback stacks (self-contained HTML cannot fetch web fonts)
• The conformance target: AA (default) or AAA
• Which artifacts consume the theme: document, deck, or both
• Whether the output will be printed or exported to PDF

Clarify First

Before generating a theme, confirm these inputs. If any is unknown or vague, ASK — do not assume:

• Conformance target (AA vs AAA) — why it changes the output: AAA at 7:1 rules out most saturated mid-tones, so the accent and warning colors must be picked differently from the start
• Print / PDF export required — why it changes the output: print needs a forced light role set and page-break rules; retrofitting them means re-deriving every dark value
• Document or deck — why it changes the output: the type ratio differs (1.25 vs 1.333) and decks need larger minimum sizes for projection
• Existing brand colors — why it changes the output: a fixed brand hex constrains the accent ramp and may force the underline-links decision

Stop rule: ask only the 2-3 that most change the output. If the user says "just draft it," proceed and list your assumptions at the top of the artifact.

Workflows

Workflow 1 — Generate a themed CSS bundle from tokens