XSHNA.CSS / FRAMEWORK REFERENCEVERSION 1.0.0 BETA.2

DESIGN, BUILD, REFINE, SHIP.

A complete system for remarkable interfaces.

Learn every component in context. Explore its complete variant range, copy working HTML, understand the API, and build responsive applications with no mandatory toolchain.

Get started ↗Browse all components

01 / BROWSER NATIVE02 / NAVY DESIGN SYSTEM03 / SELF-HOSTED

LIVE COMPONENT GALLERYDESIGN DNA / PRECISION

X Workspace● Operational

COMPONENT / 001

Everything in its place.

Precision in every state and interaction.

New customers2,048+14.2%

Activation rate84.6%+7.8%

Beta

STYLE

12Design personalities

268Motion presets

7,338Self-hosted SVG icons

102Reference guides

01 / CHOOSE YOUR PATHThe engineering handbook ↗

Learn the framework.
Master the details.

Start with the basics or jump into production patterns. Each pathway connects concepts to implementation, supported selectors, responsive behavior and accessible interaction.

01 / BEGINStart building

Installation, file distribution, HTML structure, compatibility and the first responsive composition.

Installation →02 / DESIGNCraft a system

Typography, color tokens, layout density, Design DNA and reusable visual language.

Design foundations →03 / COMPONENTSExplore every variant

Complete rendered matrices for actions, states, semantics, sizes and component anatomy.

Component gallery →04 / ADVANCEDShip serious applications

Complex navigation, data presentation, application shells, workflows and integration recipes.

Enterprise guide →

02 / COMPONENT REFERENCEAll component families ↗

Component depth,
not component count.

Preview real framework styles before copying. Explore semantic intents, surface treatments, seven button sizes, information states and composable card layouts.

Explore the primitivesActual Xshna rendering

01 / ACTIONS

View every button variant ↗

02 / STATUS

OperationalIn reviewAttentionLive

Explore badge styles ↗

03 / FORM FIELDS

Email addressWorkspace

All form patterns ↗

03 / DEPLOY IN SECONDS

No build chain.
No infrastructure overhead.

Add one CSS file and optional JavaScript. Works with static hosting, PHP, Laravel, WordPress and ordinary shared hosting.

Read deployment reference ↗

index.html

<link rel="stylesheet" href="/assets/xshna.min.css">
<script defer src="/assets/xshna.min.js"></script>

<main class="xsh-app" data-xsh-design="precision">
 <button class="xsh-btn xsh-btn-primary">
   Get started
 </button>
</main>

04 / THE DEVELOPER PLATFORMExplore the platform ↗

Power tools.
Plain web standards.

Create themes, generate projects, preview motion, inspect markup, export tokens and tailor the CSS distribution entirely through browser-native tools.

01Studio

Visual design-personality editor

02Forge

Editable project generator

03Motion Composer

Animation preview and export

04Icon Explorer

Browse 7,338 SVG glyphs

05Extract

Selective stylesheet generation

06Doctor

HTML and framework diagnostics