Implicit Child Styling

New in 2.1

Cards know their slots. One class on the parent. Semantic HTML does the rest.

Media Card

Image goes edge-to-edge. Header and footer are auto-styled. No extra classes on children.

Standard Card

Vertical stack layout with automatic gap. Typography scales fluidly via clamp().

View Report Details

Active Users

1,247

Density System

One class on a parent. Entire subtree adapts. No size variants needed.

Default

Standard spacing throughout.

x-dense

Everything tightens up. Cards, buttons, gaps — all compact.

x-spacious

Extra breathing room everywhere.

Navigation

Auto-styled links with aria-current support. No active class needed.

Typography

x-display

x-h1 Heading

x-h2 Heading

x-h3 Heading

x-h4 Heading

x-h5 Heading

x-h6 Heading

x-lead — Emphasized intro paragraph with larger size.

x-body — Standard body text at 1rem with relaxed line height.

x-small — Smaller text for secondary content.

x-caption — Captions, metadata, timestamps.

x-label — Labels and smallest text.

x-code — inline code

Components

Buttons

Badges

Default Success Warning Error

Badge in heading Live

Inputs

Avatars

AC

NS

XC

Links

Read the documentation, check the source on GitHub, or install from npm.

Code Block

npm install xandra
npm install -D xandra-cc
npx xcc check src/

Color System

Backgrounds

x-bg-base

x-bg-surface

x-bg-elevated

x-bg-primary

Semantic States

x-bg-success + x-text-success

x-bg-warning + x-text-warning

x-bg-error + x-text-error

Text Colors

x-text-primary — Main content text

x-text-secondary — Supporting text

x-text-muted — Dimmed, tertiary text

x-accent — Accent/emphasis color

x-text-success — Success state

x-text-warning — Warning state

x-text-error — Error state

Themes

Four built-in themes. Apply to any container — themes cascade and nest.

x-theme-dark

Default theme. Deep backgrounds, bright text.

Badge

x-theme-light

Light backgrounds, dark text.

Badge

x-theme-nvg

Night vision green. Tactical.

Badge

x-theme-high-contrast

Maximum contrast for accessibility.

Badge

The NS System

When you need something outside the standard, you mark it. Every deviation is tracked, audited, and eventually promoted.

Standard

No marker needed. This is the Xandra way.

<div class="x-card x-stack">
  <h3 class="x-h3">Title</h3>
  <p class="x-body">Content</p>
</div>

Deviation

Marked with ns + reason. Tracked by xcc audit.

<div class="x-card" ns
  data-ns="needs chart.js">
  <canvas id="chart"></canvas>
</div>

$ npx xcc audit
NS AUDIT (5 elements across 3 files)

Suggestions:
  → "needs chart component" appears 7 times
    — candidate for x-chart-component

$ npx xcc promote
PROMOTION CANDIDATES
  1. x-chart-component — 7 times across 4 files

Ecosystem

xandra

CSS framework. ~85 classes. Zero JS. Zero dependencies.

npm install xandra

xandra-cc

Contract compiler. 7 commands. Validates, audits, graphs, promotes.

npm install -D xandra-cc

vscode-xandra

VSCode extension. Completions, diagnostics, hover docs, ns tracking.

Search "Xandra CSS" in VSCode