All 49 tracked capabilities are completeView release readiness
CoordiationCSS
Shop
Get started
Menu
CO Utility-first · AI-readable · Runtime-free

Build interfaces.
Keep the system.

A complete utility-first CSS system for Coordiation. Build responsive, accessible interfaces with 49 verified capabilities, 13 official packages, CSS-first tokens, and machine-readable tooling.

Start building See how it works
0 browser runtime586 static utilities15 complete familiesJSON AI-readable
hero.coordcompiled
01<section02  class="co-grid co-gap-803         co-bg-white co-p-804         md:co-grid-cols-205         dark:co-bg-black">06  <h1 class="co-text-6xl07      co-font-bold">08    Move at the speed of thought.09  </h1>10</section>
15 families verified586 utilities indexed
LITERAL · TRACEABLE
co-gridco-gap-6co-bg-blackhover:co-bg-whitemd:co-grid-cols-3dark:co-text-whiteco-gridco-gap-6co-bg-blackhover:co-bg-whitemd:co-grid-cols-3dark:co-text-white
Static utilities

Generated from the canonical compiler registry.

Complete families

Every family is documented and registry-backed.

Verified examples

Broken examples fail registry generation.

Complete capabilities

Published through the machine-readable API.

Coordiation icons

Solar Linear and Iconsax Line Oval, ready to import.

Open-code components

Accessible source you can install, inspect, and own.

Complete themes

Responsive application starting points built with Coordiation.

npm package downloads

Cumulative official npm downloads across every Coordiation package since the first release.

Live npm sync

NEW · FULLSTACK ALPHA

One app.
Front to back.

Build server-rendered pages and backend APIs with Coordiation's own HTML-first runtime. React and Next.js are not required.

Install the fullstack alpha

AVAILABLE ON NPM · NODE ≥22.18

Install the alpha
npm install @coordiation/fullstack@alpha @coordiation/cli@alpha
  • HTML-first.coord pages, SSR and optional client interactions.
  • Server includedAPI routes, validation and optional SQLite/auth modules.
  • Guided deliveryEight modes, from a requirements interview to release planning.

Experimental alpha. APIs may change. Existing CSS integrations remain available; token savings and production readiness are not guaranteed.

BUILT WITH COORDIATION · CMS PREVIEW

A home for
your next story.

Meet Coordiation CMS. Write posts, shape pages, and customize native themes in one publishing workspace.

Explore the CMS Live preview

Early preview · Real admin screenshots · Self-hosted

Coordiation CMS dashboard with its content management sidebar and publishing overviewSTEP INSIDE THE CMS

WHY COORDIATION

Move faster.
Keep every decision.

Coordiation gives human and AI teams one compact, verifiable system for moving from an idea to a production interface without rebuilding the foundation.

01 · AI-NATIVE CONTEXTTASK-SCOPED

Give agents the brief, not the whole codebase.

Generate compact manifests and task packs with only the components, utility hints, rules, files, and checks an agent needs for the work in front of it.

Explore agent context
02 · STATIC BY DEFAULT0 KB RUNTIME

Ship deterministic CSS without browser-side machinery.

Coordiation scans literal candidates at build time and emits static CSS. The result is predictable, inspectable, and independent of a client runtime.

See the compiler
03 · OWNED UI SOURCE66 · 2,165 · 11

Start with a complete visual vocabulary.

Install open-code components, first-party icon collections, and complete themes that already use Coordiation classes and machine-readable contracts.

Browse the UI system
04 · ONE SOURCE OF TRUTH49 VERIFIED

Keep docs, agents, and generated CSS in agreement.

The compiler, documentation, examples, release checks, and APIs are published from tested registries instead of separate hand-maintained promises.

Open release check

THE SYSTEM

Small utilities.
Serious capability.

All 49 completed capabilities are grouped below by the job they solve. Every item links back to the same tested registry used by the compiler and documentation.

01 · COMPILER FOUNDATION8 capabilities

Scan, theme, and compile

A runtime-free compiler scans every supported template, resolves CSS-first tokens, applies Preflight, and emits only the utilities your project uses.

Plain-text source detectionFramework source scanningStatic CSS / zero runtimeCSS-first theme variablesCustom utility prefixImportant utilitiesArbitrary properties and valuesPreflight / normalized base
@coordiation;Explore
02 · ADAPTIVE VARIANTS5 capabilities

Compose every condition

Responsive, state, structural, dark, RTL, group, peer, ARIA, data, media, supports, and container conditions stack predictably.

Responsive breakpointsState and structural variantsDark, RTL, group, and peerARIA, data, has, and notMedia, supports, and container variants
md:hover:aria-expanded:co-blockExplore
03 · LAYOUT SYSTEM5 capabilities

Structure every interface

Complete layout, positioning, Flexbox, Grid, spacing, sizing, tables, columns, and logical properties work across writing modes.

Layout and positioningFlexbox and gridSpacing and sizingTables and multi-columnLogical properties and writing modes
co-grid co-gap-6 md:co-grid-cols-3Explore
04 · VISUAL SYSTEM10 capabilities

Style without leaving markup

Typography, modern color, gradients, borders, rings, effects, masks, transforms, transitions, animation, and SVG share one token system.

TypographyBackgrounds, gradients, and colorsBorder, outline, ring, and divideEffects, filters, backdrop filters, and masksTransforms and perspectiveTransitions and animationsSVG fill and strokeSolar Linear and Iconsax Line Oval librariesOpen-code component registryModern color and color mixing
co-bg-linear-to-r/oklch co-shadow-lgExplore
05 · INCLUSIVE INTERACTION2 capabilities

Accessible by construction

Screen-reader helpers, forced colors, color schemes, cursors, selection, scrollbars, snapping, touch gestures, and reduced motion are built in.

Accessibility and forced colorsInteractivity utilities
co-sr-only motion-reduce:co-animate-noneExplore
06 · EXTENSIBILITY5 capabilities

Make the framework yours

Register CSS-first utilities and variants, install reusable plugins, control source discovery, add safelists, and plug in framework extractors.

Custom utility registrationCustom variant registrationPlugin APISource include, exclude, and safelistFramework extraction hooks
@co-utility card-* { ... }Explore
07 · BUILD PIPELINE6 capabilities

Fits the tools you already use

Vite, PostCSS, and CLI adapters share bundling, nesting, prefixing, minification, incremental caching, source maps, and watch diagnostics.

Vite adapterPostCSS adapterCLI and watch modeBundling, nesting, prefixing, minificationIncremental build cacheSource maps
coordiation-css --content src --watchExplore
08 · DEVELOPER + AI TOOLING6 capabilities

Give agents a smaller, verifiable brief

Compact project manifests, task context packs, the language server, formatter, codemods, and compatibility contracts make automated changes focused and traceable.

Compact AI agent contextIntelliSense / language serverClass sorting formatterUpgrade and codemod toolsCross-platform native scannerCompatibility and deprecation policy
coordiation context pricing --jsonExplore
09 · APPLICATION THEMES2 capabilities

Begin with the whole story

Install complete application templates with editable source, responsive composition, original media, documented sections, and AI-readable customization contracts.

First-party source installerInstallable application themes
npx @coordiation/cli@next add theme editorial-advisorExplore

ONE SYSTEM

Human-readable.
Agent-verifiable.

The same CSS-first decisions power authored components, generated utilities, documentation, and machine-readable manifests.

01 · THEMEExplore tokens

Own the design system in CSS.

Extend or override colors, type, radii, shadows, breakpoints, perspective, and motion through recognized variables.

--co-color-product: oklch(62% .2 260);
02 · RESPONSIVEExplore breakpoints

Adapt by viewport or local space.

Compose mobile-first breakpoints, exact ranges, media features, and named container queries without runtime listeners.

md:co-grid-cols-2 @lg/card:co-grid-cols-3
03 · AI CONTRACTOpen API

Generate only what really ships.

Agents can inspect capability status, class patterns, resolved declarations, variants, and limitations before writing code.

{
  "framework": "Coordiation CSS",
  "status": "complete",
  "candidate": "md:co-grid-cols-3"
}

THE ENGINE

From template
to tiny CSS.

Coordiation reads your source as text, resolves every candidate against your tokens, composes its variants, and emits deterministic CSS.

  1. 01
    ScanFind complete utility candidates
  2. 02
    ResolveConnect utilities to design tokens
  3. 03
    ComposeApply variants and conditions
  4. 04
    EmitWrite static, layered CSS
coordiation-css● LIVE

$ coordiation-css --content src

Scanning src/**/*.{coord,tsx,html}

15 utility families loaded

586 static utilities indexed

0 unsupported utilities

utility-registry.json110 verifiedAI-readable manifest

BUILT FOR HUMAN + AI TEAMS

A support contract,
not a guessing game.

Coordiation publishes the exact capabilities and utilities an agent may use. Every generated class can be traced back to a tested declaration.

Read llms.txt Capability API
AGENT CHECKLISTLIVE
  1. 01Read framework instructions/llms.txt
  2. 02Inspect support status/api/capabilities
  3. 03Discover owned UI source/api/components
  4. 04Resolve exact utilities/api/utilities
  5. 05Emit literal candidatesco-*

QUICK START

Start with Vite.

Install the independent compiler and official adapter, then import one generated virtual stylesheet.

VitePostCSSCLIRECOMMENDED
$ pnpm add -D @coordiation/css @coordiation/vite
/* src/coordiation.css */
@coordiation;

@co-theme {
  --co-color-product: oklch(62% 0.2 260);
}
Continue with the Vite guide

OFFICIAL PACKAGES

One system.
Every workflow.

Twelve entry points cover compilation, installation, themes, components, icons, build integration, editor intelligence, formatting, upgrades, and optional native scanning.

01Compiler

Core

The scanner, CSS-first theme engine, utility registry, variants, diagnostics, and static CSS emitter.

@coordiation/css
02Recommended

Vite

Virtual CSS, root-aware scanning, watched theme files, and dependency-aware hot updates.

@coordiation/vite
03Pipeline

PostCSS

A standard PostCSS 8 adapter with dependency messages, warnings, and multi-entry safety.

@coordiation/postcss
04Standalone

CLI

One-shot builds and durable watch mode with atomic output and no bundler requirement.

coordiation-css
05Editor

Language Server

Completion, compiler-authored hover previews, project configuration, and actionable diagnostics over LSP 3.17.

@coordiation/language-server
06AI-native

Agent Context

Compact project manifests and task packs expose only the components, utility hints, rules, and checks an agent needs.

@coordiation/agent
07Canonical

Formatter

Stable class sorting powered by the same candidate ordering used by the compiler.

@coordiation/formatter
08Migration

Upgrade

Versioned, idempotent codemods with exact edits, dry runs, JSON plans, and deprecation ownership.

@coordiation/upgrade
09Native

Oxide

An optional C11 scanner for Linux, macOS, and Windows with explicit JavaScript fallback.

@coordiation/oxide
102,165 glyphs

Icons

Complete Solar Linear and Iconsax Line Oval collections with tree-shakeable SVG strings, accessible rendering, provenance, and an AI-readable registry.

@coordiation/icons
1164 open-code components

Components

A complete independent React catalog with owned source, Coordiation utilities, install endpoints, and AI-readable contracts.

@coordiation/ui
12First-party CLI

Installer

Install owned component or application theme source, bundled SVG icons, and declared media with safe paths and explicit overwrite protection.

@coordiation/cli
1311 complete applications

Themes

Original, responsive portfolios, journals, dashboards, creative and architecture studios, industrial sites, and detailed case-study systems with live previews, owned source, Coordiation components, install endpoints, and section-level AI contracts.

@coordiation/themes

COMPLETE FEATURE MAP

Nothing hidden.
Nothing implied.

Every shipped feature belongs to a named group, a tested capability ID, and a documentation path. The Release Check remains the exact source of truth.

Open release check
01COMPILER FOUNDATION8 capabilitiesComplete
02ADAPTIVE VARIANTS5 capabilitiesComplete
03LAYOUT SYSTEM5 capabilitiesComplete
04VISUAL SYSTEM10 capabilitiesComplete
05INCLUSIVE INTERACTION2 capabilitiesComplete
06EXTENSIBILITY5 capabilitiesComplete
07BUILD PIPELINE6 capabilitiesComplete
08DEVELOPER + AI TOOLING6 capabilitiesComplete
09APPLICATION THEMES2 capabilitiesComplete
Wiryo Saputra, creator of Coordiation
CREATOR / FOUNDERCOORDIATION · 2026

WHY I BUILT COORDIATION

Make products that
matter to people.

Coordiation exists to help you move from a good idea to a dependable product without rebuilding the same foundations every time.

I built this framework so human and AI teams can spend less time fighting their tools and spend more time understanding real needs, creating useful products, and helping more people.
Wiryo SaputraCreator of Coordiation
wiryosaputra@coordiation.com

COORDIATION STARTS HERE

Build the interface.
Keep the system.

Read the installation guide