eXtreme Automation
Design System · v2 · Component Catalog

Refined Evolution

The extremeautomation.io identity — rose / navy / PT Sans — systematised into @xa/tokens + @xa/ui and deployed as a versioned library across every XA app.

Tokens — colour palette

Primary · the brand (logo = navy + rose)
Rose
#d27079 · accent / CTAs
Navy
#3d496e · ink, headings, logo
Slate
#535c73 · muted secondary
Secondary · semantic states
Maroon
#800000 · danger
Amber
#d97706 · warning
Green
#16a34a · success
Sky
#0ea5e9 · info
Neutrals · surfaces & text
White
#ffffff · surface
Canvas
#f5f5f7 · page bg
Line
#e9e9ef · borders
Muted
#8991a8 · placeholder text
Ink
#212121 · body text
Soft tints · badge/alert backgrounds
Rose Soft
#f7e6e8
Slate Soft
#eceef3
Green Soft
#e7f5ec
Amber Soft
#fdf0db
Maroon Soft
#f6e6e6
Sky Soft
#e3f4fc

Tokens — typography · PT Sans

display / 2.6rem Automate the tedious.
h1 / 2rem Heading one
h2 / 1.5rem Heading two
h3 / 1.2rem Heading three
body / 1rem The quick brown fox delivers a hands-on DevOps workshop.
small / .875rem Secondary text and metadata.
xs / .75rem Captions and labels.
mono / .875rem terraform apply --auto-approve

Tokens — radius & shadow

Border radius

sm6px
md9px
lg14px

Shadow

shadow-sm buttons, chips
shadow-md cards, modals

Button — all variants × sizes

Variants (size: md)

Sizes (variant: primary)

All variants — sm

All variants — lg

As link (<a>) + disabled states

Link primary Link secondary

Props: variant (primary | secondary | dark | ghost), size (sm | md | lg), href (renders <a> when set), disabled, type.

Core components — v0.2.0

Live preview of each component. Hit More → for the full page with every variant and prop reference.

Active clients
128
▲ 12% this quarter
Card
default · elevated · course · stat
More →
Active Pending Featured
Badge
ok · warn · err · info · feat · neutral
More →
KV JS
Avatar
initials · sm / md / lg
More →
Work email anna@extremeautomation.io We'll never share it.
Field / Input / Select / Textarea
label · help · error · invalid state
More →
NameRole
Anna A.Lead
Karl V.Engineer
Table
header · hover rows · accessible
More →
Header
logo · nav slot · actions slot
More →
Sidebar
vertical nav · footer slot
More →
AppShell
header + sidebar + main layout
More →
Modal
dialog · sm / md / lg · accessible
More →
rocket gear cloud shield
Icon
242 icons · 5 variants · SVG CDN
More →
Form Controls
checkbox · radio · switch
More →
Saved successfully
Feedback
alert · toast · spinner · progress · tooltip
More →
Overview Activity Settings
Navigation
tabs · accordion · breadcrumb · pagination · menu
More →

Consuming tokens

Install @xa/tokens and import one of three outputs: 

/* Tailwind CSS 4 (primary) */
@import "@xa/tokens/theme.css";

/* Plain CSS custom properties */
@import "@xa/tokens/vars.css";

/* Machine-readable JSON */
import tokens from "@xa/tokens/tokens.json";