Design System
Work in progress. I'm adding components as I go, following patterns from what's already documented. Nothing here is set in stone yet.
Domain-grouped atomic design system for kinoo.dev. Components are organized by feature domain with atomic classification as metadata.
Everything is chromatic. --accent-color is set on the container and every component inherits it: Button primary fill and alternative glow, Tag tint, links, blockquote borders, code block accents. The default accent is orange; each section or article category overrides it with its own color.
Structural layer
Neutral surfaces, cards, header, footer — the chrome that doesn't change between sections.
Chromatic layer
Accent-driven components that adapt to their context. Set --accent-color on a container and everything inside follows: buttons, links, tags, borders, glows.