Roadmap

What’s shipped, what’s being worked on, and what’s queued. This is a statement of direction, not a delivery schedule.

How to read this

There are no dates here, deliberately. cia is built by a small team, and a date on a public roadmap becomes a promise that distorts the work — you ship to the date instead of to the standard. Items move between sections as things land or get reprioritised, and anything in Considering may never ship at all. That last part is meant literally.

The detailed work items live in roadmap/epics/ — user stories, acceptance criteria and the reasoning behind each call. If you want to know why something is shaped the way it is, that’s where it’s written down.

Shipped

Available today, gated in CI on every push.

• Published on npm. npm install css-is-awesome works, and jsDelivr and unpkg mirror every release for build-free consumption. Install.
• 24 themes, eight families × three variants. Each builds from exactly one SCSS source, and dropping one in as theme.css restyles a page with no markup change.
• Themeable spacing. Themes own the numbered scale, so swapping a theme changes a page’s proportions and not just its palette.
• The density knob. One variable, --space-unit, rescales the entire spacing system, so a theme can feel compact or airy from a single line. A slider in the theme editor drives it.
• A design-tokens on-ramp. npx cia theme from-tokens turns a DTCG or Tokens Studio export into a complete, validated theme file; cia theme map shows the mapping as data, and both are MCP tools too.
• A playground. Paste SCSS that uses cia mixins, see it render live against any theme, share it as a link; every recipe page opens in it. Try it.
• Accessibility enforced by default. Every theme is audited for WCAG 2.2 AA contrast across 24 token pairs, and a failing theme fails the build. How that works.
• Zero runtime JavaScript in the package. Nothing in it is loaded by a page. The Node tooling (the cia CLI, the MCP server, the validators) never reaches the browser.
• An MCP server so AI agents can query the real API instead of guessing at it. Tool reference.
• A recipes book — 32 framework-agnostic patterns spanning dialogs, a command palette, comboboxes, a datepicker and data table, pagination, breadcrumbs, toasts, file upload, a sortable list, a colour picker, app-shell and admin layouts, auth and wizard flows, five form-validation approaches, three i18n patterns, an RTL layout walkthrough, print/PDF, and mobile navigation. Browse them.
• RTL support, audited. The source is swept for physical properties that should be logical, with a CI-gated checker and a live left-to-right/right-to-left demo. RTL.
• A themeable print surface. Four print tokens (--print-ink/-paper/-line/-muted) give every theme a clean ink-on-paper default and let a theme, or a letterhead recipe, restyle paper without touching a component. The theme editor’s 🖨 Print button previews it live, remembers your edits per theme, and copies a ready-to-paste @media print block. Print.
• A zero-JS mobile toolkit — hamburger, drawer, sheet and dock mixins on the native Popover API, plus the playbook that ties them together. Mobile.
• A recipe registry and a graded health check in the CLI — npx cia add <recipe> copies a pattern from the book into your project so you own it, and npx cia analyze audits your stylesheets against the installed API (dead symbols, the spacing-scale trap, hard-coded colors, BEM creep, off-contract tokens, off-scale lengths, missing focus-visible states) and prints a graded, categorized report with a suggested fix on every finding, plus CI-ready exit codes. Rule reference.
• Token intelligence in the theme editor. Every color/spacing/radius row shows a “used by” disclosure of which mixins actually consume it, and color rows carry a live WCAG contrast readout with a one-click nearest-passing-color fix.
• A dated browser-support matrix — the Baseline floor the native primitives set, and every progressive enhancement with its exact fallback. Browser support.
• A theme editor on this site, with a download that drops straight into a project.
• Migration tooling — npx cia migrate tailwind converts an existing config into a cia theme.

Working on now

• The Figma pipeline, phase one — the token bridge: export the theme contract as Figma variables (each cia theme a variable mode) and import a designer's variables back through the validator.
• Page surfaces — two theme-owned page backgrounds, hero for the front page and band for section stripes, each with an optional image and a scrim that keeps text legible. One include or one body attribute applies them.

Next up

• The blog grows a second track — alongside the engineering post-mortems, a CSS discoveries track: new and cool platform CSS as we find it, with cia as the sponsor rather than the subject. Blog.
• The rest of the Figma pipeline — beyond the token bridge above: a published cia Figma Library whose component names mirror the mixins, and a machine-readable mapping served over MCP so AI agents translate Figma frames into cia calls directly.
• A guided installer. npm create cia — asks which framework and theme, then wires the SCSS entry point and the MCP server for you. Built and tested; publishing next.
• Proving the codegen pipeline — generating React components from recipes, to see whether the approach holds up before committing to it.

Further out

• i18n recipes — date and currency formatting, pluralisation, RTL flip patterns.
• More migration paths — reading MUI and Chakra theme objects, and a DTCG bridge for design-token pipelines.
• A Figma plugin for two-way sync between Figma variables and cia tokens.
• A community theme gallery, with submissions by pull request.
• Editor tooling — autocomplete and hover docs for the mixin API.

Considering — may not ship

Ideas we like that haven’t earned their place yet. Listed so the thinking is visible, not because they’re committed.

• A visual recipe builder — compose a component in the browser and export the SCSS. Genuinely useful if it works, and a large amount of surface area to maintain if it half-works.
• Angular component generation, if the React codegen experiment proves out.

Want to change what’s on this list?

Real usage moves things up faster than anything else. If something here is blocking you, or something missing would have saved you an afternoon, say so — that’s the signal this list is prioritised against.

The principles that decide what gets built are in Three tiers and Accessibility. The short version: mixins over classes, the consumer names their own selectors, and accessibility is a build gate rather than a guideline.