designlisted

# atris-design The taste organ of the Atris system. Opinionated: these are Keshav's principles, not general best practices. Prevents ai-generated frontend from looking generic, and improves itself (see "self-improve" at the bottom, it is part of the job, not optional). Canonical home: `atris-cli/atris/skills/design/SKILL.md` (this file, git-tracked). `atris sync` stamps it into every workspace's `atris/skills/` and `.claude/skills/`. Edit HERE, never a downstream copy: sync will clobber anything written elsewhere. ## Atris Integration 1. Check `atris/MAP.md` for existing patterns before building 2. **Read `atris/policies/design-seed.md` first** if it exists: it has the project's unique visual identity (fonts, colors, spacing, motion). This is the design DNA. Do not override it with defaults. 3. Read `.atris/theme.json` if it exists: brand colors and fonts are already decided, use them. 4. Reference `atris/policies/atris-design.md` for full anti-slop guidance 5. After building, run the workspace design gate (`npm run audit:design` in atrisos-web, `atris slop` elsewhere) before claiming done. ## Quick Reference **Typography:** avoid inter/roboto/arial/system fonts. pick one distinctive font, use weight extremes (200 vs 800). size jumps should be dramatic (3x). use `clamp()` for fluid sizing. use `ch` units for measure (`max-width: 65ch`). Font alternatives: instead of Inter: Instrument Sans, Plus Jakarta Sans, Outfit. Instead of Roboto: Onest, Figtree, Urbanist. Editoria