What problem does it solve? Keeping multiple personal apps visually consistent is hard: colors drift, generic warm-cream AI defaults creep in, and each stack consumes design tokens differently. This Skill provides Adi's complete design identity — palette, typography, spacing, radius, and motion rules — as vendored CSS tokens plus a written design language, so every UI he builds or restyles looks like one cohesive product. ## Core Features & Use Cases - Vendored design tokens: assets/tokens.css ships oklch color tokens (sage accent, amber secondary, rose for rare alerts), Newsreader/Inter font stacks, spacing, radius, and motion variables with light and dark modes. - Written design language: references/design-language.md documents the aesthetic rationale, hard rules (no warm-cream backgrounds, one accent only, cards under ~16px radius), accessibility contrast requirements, and per-product notes. - Per-stack integration guidance: instructions for consuming tokens in plain CSS projects and Tailwind/shadcn setups, including mapping variables into a Tailwind theme. - Use Case: When restyling a page on adithyan.io, import the tokens, point the Tailwind theme at the CSS variables, swap body copy to Newsreader, and verify the result against the hard rules — no cream background, sage as the only accent. ## Quick Start Use the adi-design skill to restyle this page with Adi's design tokens, replacing the background with the off-white variable and setting sage as the single accent color.
