BASE STYLES · COMPLETE IN 0.2

Preflight

A deliberate cross-browser foundation that removes inconsistent browser defaults and makes Coordiation utilities behave predictably.

✓

Preflight is emitted automatically inside @layer co-base. Every rule group is exposed through preflightRegistry, covered by tests, and removable through a documented option.

COVERAGE

What Preflight normalizes

The reset targets browser inconsistencies while leaving component appearance to explicit utilities and your design system.

AreaBehavior

Box modelborder-box, zero margin/padding, solid zero-width borders

Typographytheme fonts, inherited headings and links, consistent line height

Listsno marker until a list utility is applied

Mediablock alignment and responsive intrinsic sizing

Formsinherited type, transparent controls, normalized buttons and placeholders

Browser controlssearch, date/time, number, file, and invalid-state fixes

Hidden contenthidden stays hidden except hidden=until-found

AUTOMATIC BASE LAYER

Start from explicit design decisions

Headings, links, lists, and borders do not inherit opinionated browser presentation. Apply utilities when those semantics need a visual style.

HTML

<h1 class="co-text-4xl co-font-bold">Account settings</h1>

<ul role="list" class="co-list-inside co-list-disc">
  <li>Profile</li>
  <li>Security</li>
</ul>

<img class="co-max-w-none" src="chart.png" alt="Quarterly revenue" />

Accessibility

Some screen readers do not announce an unstyled list. Keep list semantics explicit with role="list" when markers are intentionally removed.

FORMS AND MEDIA

Consistent controls without a component theme

Inputs inherit typography, placeholders receive a predictable color and opacity, textareas resize vertically, and common WebKit and Firefox control differences are normalized. Images and videos are block-level and responsive by default.

HTML

<label class="co-grid co-gap-2">
  Email
  <input class="co-rounded-md co-border co-p-3" placeholder="you@example.com" />
</label>

<textarea class="co-min-h-[8rem] co-rounded-md co-border co-p-3"></textarea>

EXTENDING PREFLIGHT

Add project defaults in the same layer

Author additional rules after @coordiation. Rules in your later co-base layer extend or override generated defaults without increasing selector specificity.

input.css

@coordiation;

@layer co-base {
  h1 { font-size: 2rem; }
  a { text-decoration-line: underline; }
  .third-party-map * { border-style: none; }
}

DISABLING PREFLIGHT

Keep an existing application reset

Disable Preflight when integrating Coordiation into an application that already owns its base styles. Theme variables and generated utilities remain available.

Vite or PostCSS

coordiation({
  content: ["src"],
  preflight: false
})

CLI

coordiation-css   -i src/input.css   -o dist/styles.css   --content src   --no-preflight

AI GENERATION CONTRACT

Know the baseline before generating

Agents can inspect the package exports preflightRegistry and preflightCss to determine the exact browser baseline.

Assume Preflight is enabled unless configuration explicitly disables it.
Do not recreate margins, heading sizes, list markers, or link colors as implicit browser defaults.
Prefer utilities for component styling and @layer co-base for project-wide element defaults.
Preserve hidden="until-found" behavior.
When disabling Preflight, state that the host application owns normalization.

PreviousInstallation NextAttribute selectors →