Files
workbuddy_skills/open-design/design-systems/warm-editorial/USAGE.md
T

32 lines
1.5 KiB
Markdown
Raw Normal View History

# Warm Editorial Usage
Design System 2.0 package guide for OpenDesign agents and reviewers.
## Read Order
1. Read this file first to understand the package contract.
2. Read `DESIGN.md` for visual intent, constraints, and anti-patterns.
3. Paste `tokens.css` into the first artifact `<style>` block before writing component CSS.
4. Use `components.manifest.json` for the compact component inventory; open `components.html` when exact selectors or states matter.
5. Inspect `preview/` pages when a visual sanity check is useful.
## Design Highlights
- Background: `#FAF7F2` (warm off-white paper)
- Foreground: `#1C1A17` (near-black, slightly warm)
- Accent (primary): `#C0512F` (terracotta) — used for links, primary CTAs, 1 hero element max per page
- Accent (secondary): `#2F5B4F` (forest) — section dividers, tags
## Do
- Preserve the schema token names exactly so cross-brand switching stays reliable.
- Use `--accent` for primary actions, links, focus states, and one clear focal element.
- Reuse component groups from `components.manifest.json` before inventing new controls.
- Treat `source/` files as audit evidence for the bundled fixture backfill.
## Avoid
- Avoid raw hex values outside the copied `:root` token block.
- Avoid redefining Tailwind or design-token values independently of `tokens.css`.
- Avoid claiming original upstream source evidence; this package is based on the curated bundled fixture.
- Avoid adding new component recipes that are not represented in `components.html` or `DESIGN.md`.