CORE UTILITY FAMILY

Typography

Control font families, variable-font width and features, type scale, weight, leading, tracking, numeric glyphs, lists, alignment, decoration, wrapping, indentation, tab width, and generated content.

completeTarget v0.28 verified examplesRegistry JSON ↗

WHEN TO USE IT

Choose the right tool for the layout.

Start with the CSS-first font and text tokens, use a font-size/line-height modifier when the pair belongs together, and reserve arbitrary values for type decisions that should not become reusable design tokens.

QUICK REFERENCE

Classes and generated CSS

These examples are resolved by the compiler when the registry manifest is generated. A broken example fails the test suite.

ClassGenerated declarations and keyframes

co-text-sm/6font-size: 0.875rem; line-height: calc(var(--co-space-unit) * 6);

co-font-stretch-condensedfont-stretch: condensed;

co-font-features-(--features)font-feature-settings: var(--features);

co-tabular-numsfont-variant-numeric: tabular-nums;

co-list-image-nonelist-style-image: none;

co-wrap-anywhereoverflow-wrap: anywhere;

-co-tracking-wideletter-spacing: calc(0.025em * -1);

before:co-content-['AI_ready']content: 'AI ready';

VISUAL EXAMPLE · TYPE SCALE

Build a clear content hierarchy

Use the type scale to communicate importance. Keep large display text focused and pair it with a quieter supporting size.

Release 0.3

Build faster.

A utility-first framework for Coordiation.

component.coord

<article>
  <p class="co-text-xs co-uppercase co-tracking-widest">Release 0.3</p>
  <h1 class="co-text-5xl co-font-bold co-tracking-tight">Build faster.</h1>
  <p class="co-text-lg co-text-neutral-600">A utility-first framework for Coordiation.</p>
</article>

VISUAL EXAMPLE · WEIGHT AND TRACKING

Adjust density without changing size

Font weight changes emphasis, while letter spacing controls the visual density of a line. Tracking is especially useful for compact labels and large headlines.

Regular interface copy

Semibold compact heading

System label

component.coord

<p class="co-font-normal co-tracking-normal">Regular interface copy</p>
<p class="co-font-semibold co-tracking-tight">Semibold compact heading</p>
<p class="co-font-bold co-uppercase co-tracking-widest">System label</p>

VISUAL EXAMPLE · LINE HEIGHT

Match leading to the reading task

Tighter leading keeps headings cohesive. Relaxed leading improves scanning for longer paragraphs and documentation content.

A compact two-line heading for a focused message.co-leading-tight

Longer documentation text benefits from more room between baselines, making each line easier to follow across the content column.

co-leading-relaxed

component.coord

<h2 class="co-text-3xl co-leading-tight">A compact two-line heading for a focused message.</h2>
<p class="co-text-base co-leading-relaxed">
  Longer documentation text benefits from more room between baselines.
</p>

VISUAL EXAMPLE · WRAPPING AND CLAMP

Control overflow without losing hierarchy

Use balanced wrapping for headings, anywhere wrapping for unbroken content, and line clamp when a preview must keep a fixed height.

A balanced title across multiple lines

averylongunbrokenidentifierthatmustshrink

Coordiation scans literal utility classes and generates static CSS without adding runtime JavaScript. This longer paragraph is intentionally limited to two visible lines inside a compact preview card.

component.coord

<h2 class="co-text-3xl co-wrap-balance">A balanced title across multiple lines</h2>
<p class="co-wrap-anywhere">averylongunbrokenidentifierthatmustshrink</p>
<p class="co-line-clamp-2">Long preview copy...</p>

VISUAL EXAMPLE · DECORATION

Make interactive text recognizable

Decoration utilities control line type, color, thickness, and offset. Pair them with focus-visible variants for keyboard-accessible links.

Read the documentationDeprecated option

component.coord

<a class="co-underline co-decoration-2 co-underline-offset-4 hover:co-decoration-brand-500">
  Read the documentation
</a>

<del class="co-line-through co-decoration-neutral-400">Deprecated option</del>

BASIC USAGE

Apply a utility directly.

Keep the complete class string in your template so the plain-text scanner can discover it without evaluating application code.

component.coord

<div class="co-text-sm/6 co-font-stretch-condensed co-font-features-(--features) co-tabular-nums co-list-image-none co-wrap-anywhere -co-tracking-wide before:co-content-['AI_ready']">
  Your content
</div>

HOW IT WORKS

Core concepts

01
Font-size tokens may carry default line-height, letter-spacing, and font-weight metadata, while slash modifiers such as co-text-sm/6 override only line height.
02
Font-family tokens may carry feature and variation defaults; standalone font-features utilities provide explicit OpenType control.
03
Font stretch accepts named widths, percentages, CSS custom properties, and arbitrary values.
04
Line clamp combines overflow, display, box orientation, and clamp declarations.
05
Text colors and decoration colors share the theme color namespace.
06
Overflow wrapping distinguishes break-word from anywhere so intrinsic flex sizing can be handled intentionally.
07
Generated content composes with before/after variants and preserves scanner-visible literal values.

CSS PROPERTIES

What this family controls

font-familyfont-sizefont-stylefont-weightfont-stretchfont-feature-settingsfont-variation-settingsfont-variant-numericfont-smoothingline-heightletter-spacinglist-styletext-aligncolortext-decorationtext-transformtext-overflowtext-wraptext-indenttab-sizevertical-alignwhite-spaceword-breakoverflow-wraphyphenscontent-webkit-line-clamp

VARIANTS

Responsive and state conditions

Prefix any supported utility with responsive or state variants. Variants compose from left to right and the compiler emits the required selector or at-rule.

component.coord

<div class="co-text-sm/6 md:co-font-stretch-condensed hover:co-text-sm/6">
  Responsive and state-aware content
</div>

ARBITRARY VALUES

Escape the scale when necessary

Use square brackets for a one-off CSS value. Prefer theme tokens for values repeated across components so an AI agent and human reviewer can recognize design intent.

Arbitrary syntax

co-font-*
co-[content-visibility:auto]

NEGATIVE VALUES

Reverse supported values

Place the minus sign before the framework prefix. Only properties where negative CSS values are meaningful accept this modifier.

Canonical negative syntax

-co-{utility}
-co-tracking-wide

SCOPE BOUNDARIES

Intentional boundaries

This family is implemented, documented, and tested. These notes define where a neighboring family or browser behavior takes over.

Font files and @font-face declarations remain authored CSS assets rather than generated utilities.
OpenType and variable-font results depend on glyph support in the selected font.
Only tracking and indentation accept the canonical negative modifier; content utilities are normally paired with before or after variants.

Previous← Sizing NextBackgrounds, gradients, and colors →