Mode
Density
Dir
Theme
Brand
Status
Surfaces
Gradient

Theme Playground

Pick a preset to re-skin the whole framework, toggle light/dark, then fine-tune individual colours under Customise. Hit Export CSS to save the result as css/arx-theme.css — a single file that themes any Arx page.

Brand & status pickers auto-derive matching hover, subtle and text shades. Light and dark keep independent edits, and presets define both at once.

Simulated Interfaces
Analytics Dashboard
Last 30 days This quarter Year to date
Revenue
$48.2k
▲ 12.4%
New users
1,284
▲ 8.1%
Churn
2.3%
▼ 0.6%
Uptime
99.98%
SLA met
Weekly revenue
Recent activity
  • Deploy succeeded 2m
  • New signup — Acme Co 18m
  • Storage at 80% 1h
  • Payment failed 3h
Sign In

Welcome back

Sign in to your workspace to continue.

Forgot?

No account? Create one

Pricing
Starter
$0/mo

For side projects and trials.

  • ✓ 1 project
  • ✓ Community support
  • ✕ Custom domains
Pro
Popular
$24/mo

For growing teams shipping fast.

  • ✓ Unlimited projects
  • ✓ Priority support
  • ✓ Custom domains
Enterprise
Custom

SSO, audit logs, and an SLA.

  • ✓ Everything in Pro
  • ✓ SAML / SSO
  • ✓ Dedicated manager
Settings

Profile

@
Please enter a valid email address.

Preferences

Data Table
⌕
All Paid Pending Overdue
InvoiceCustomerStatusAmountActions
#INV-1043
AC Acme Co
 Paid $1,200.00
#INV-1044
GL Globex
 Pending $840.00
#INV-1045
IN Initech
 Overdue $2,310.00
#INV-1046
UM Umbrella
 Paid $560.00
Showing 1–4 of 128 invoices
Team & Messages
Team
JL SP RV +2
JL
Jordan Lee
jordan@acme.co
Owner
SP
Sam Park
sam@acme.co
Admin
RV
Robin Vega
robin@acme.co
Member
SP
Sam Park
online
Hey! Did the new theme presets land?
Yep — twelve palettes plus a live editor.
Love it. Dark mode looks great too 🌙
Try the Export button to grab the CSS.
Component Reference
Navbar — responsive (narrow to collapse)
Buttons
Badges
Primary Secondary Success Danger Warning Info
Alerts
ℹ
Information
Tokens flow straight into every component.
✓
Success
Your theme has been applied across the page.
✕
Error
This one is dismissible — try closing it.
Toasts & Popovers
Segmented & Drawer
Timeline & Empty State
  • 09:24
    Deployed v1.2.0
    Dots use your status colours.
  • 08:50
    Merged PR #214
  • Yesterday
    Opened the milestone
📭
No messages yet

It'll show up right here.

Stepper & Tag Input
  1. Account
  2. Profile
  3. Review
Markers and the connector use your primary colour.
Step two — the active ring tracks the theme.
Step three — review and finish.
File, Rating & Quantity
Browse or drop files here
The dashed border and accent use your tokens
Carousel, Banner & Keys
Slide One
Slide Two
Slide Three
Banners and keys read your tokens — try the themes above.

Press Ctrl + K to search.

OR
Tabs
The active tab uses your primary colour.
Switch between panels to see the indicator track the theme.
Underline and pill variants follow the same tokens.
Forms
Focus me to see the accent ring.
Cards
Featured
Pro Plan

Everything in Starter, plus advanced theming controls.

Progress
Live

Spinners + badges

Nav & Pills
Table
ComponentTokenStatus
Button--arx-primaryThemed
Alert--arx-info-subtleThemed
Input focus--arx-border-focusThemed
Badge--arx-warning-subtleThemed
Accordion & Dropdown
Why tokens?
One variable change cascades everywhere, in both themes.
How do I save my theme?
Hit Export CSS and drop the result into css/arx-theme.css.
Account Profile Settings
Sign out