Components / CSS
<CSS />
Modern CSS in production: tokens, container queries, native theming.
one <div>. no svg, no canvas, no js. gradients, shadows & keyframes only.
CSS is a first-class language here. Custom properties, cascade, container queries, light-dark(), logical properties: used in production, not just in talks. BEM naming keeps things predictable at scale, semantic HTML sits underneath.
This site is the demo. The whole theme is one token layer (inspect :root), dark mode is a single light-dark() declaration per color, and the accent is a custom property you can change live on the tokens page. The code is written with AI agents; the standards it follows (tokens, BEM, WCAG) are encoded in the workflow so quality survives automation.
Props
| Prop | Type | Value | Description |
|---|---|---|---|
methodology | string | BEM | Predictable naming that survives teams and years. |
theming | string | custom-properties + light-dark() | One token layer drives both themes. |
layout | string[] | ['grid','container-queries','logical-props'] | Modern layout, responsive by structure rather than by exception. |
workflow | string | agentic | Written with AI coding agents, held to the standards on this page. |
Do
- Design a token system before designing components.
- Use native CSS features before reaching for JavaScript.
- Encode your conventions so AI-generated CSS meets the same bar as yours.
Don’t
- Hardcode values that should be tokens.
- Remove focus outlines.
- Treat CSS as an afterthought of the framework.
AA contrast enforced at the token level: every ink and paper combination is checked.
Focus states are designed and always visible. Reduced motion is respected.