Semantic structure
Use the documented Xshna classes with semantic HTML rather than replacing native elements unnecessarily.
Compose existing xsh- classes on the appropriate HTML element. Keep content order meaningful when CSS is disabled.
Design system / Component reference
Design DNA
Five complete design personalities, controlled with one data attribute.
LIVE COMPONENT REFERENCE
All 12 personalities
The same semantic markup rendered under all twelve design personality selectors. Combinations are governed by CSS custom properties and component rules.
Actual Xshna CSSResize to test wrapping
PRECISION
Workspace
One system, distinct rhythm.
INSTITUTIONAL
Workspace
One system, distinct rhythm.
EDITORIAL
Workspace
One system, distinct rhythm.
STUDIO
Workspace
One system, distinct rhythm.
MINIMAL
Workspace
One system, distinct rhythm.
TECHNICAL
Workspace
One system, distinct rhythm.
CORPORATE
Workspace
One system, distinct rhythm.
CIVIC
Workspace
One system, distinct rhythm.
COMMERCE
Workspace
One system, distinct rhythm.
CREATIVE
Workspace
One system, distinct rhythm.
PLAYFUL
Workspace
One system, distinct rhythm.
DATA-DENSE
Workspace
One system, distinct rhythm.
HTML · COPY AND USE
<div class="xsh-ref-persona-grid"><div class="xsh-app xsh-ref-persona" data-xsh-design="precision" data-xsh-theme="light"><span>PRECISION</span><div class="xsh-card"><strong>Workspace</strong><p>One system, distinct rhythm.</p><button class="xsh-btn xsh-btn-primary xsh-btn-sm" type="button">Continue</button></div></div><div class="xsh-app xsh-ref-persona" data-xsh-design="institutional" data-xsh-theme="light"><span>INSTITUTIONAL</span><div class="xsh-card"><strong>Workspace</strong><p>One system, distinct rhythm.</p><button class="xsh-btn xsh-btn-primary xsh-btn-sm" type="button">Continue</button></div></div><div class="xsh-app xsh-ref-persona" data-xsh-design="editorial" data-xsh-theme="light"><span>EDITORIAL</span><div class="xsh-card"><strong>Workspace</strong><p>One system, distinct rhythm.</p><button class="xsh-btn xsh-btn-primary xsh-btn-sm" type="button">Continue</button></div></div><div class="xsh-app xsh-ref-persona" data-xsh-design="studio" data-xsh-theme="light"><span>STUDIO</span><div class="xsh-card"><strong>Workspace</strong><p>One system, distinct rhythm.</p><button class="xsh-btn xsh-btn-primary xsh-btn-sm" type="button">Continue</button></div></div><div class="xsh-app xsh-ref-persona" data-xsh-design="minimal" data-xsh-theme="light"><span>MINIMAL</span><div class="xsh-card"><strong>Workspace</strong><p>One system, distinct rhythm.</p><button class="xsh-btn xsh-btn-primary xsh-btn-sm" type="button">Continue</button></div></div><div class="xsh-app xsh-ref-persona" data-xsh-design="technical" data-xsh-theme="light"><span>TECHNICAL</span><div class="xsh-card"><strong>Workspace</strong><p>One system, distinct rhythm.</p><button class="xsh-btn xsh-btn-primary xsh-btn-sm" type="button">Continue</button></div></div><div class="xsh-app xsh-ref-persona" data-xsh-design="corporate" data-xsh-theme="light"><span>CORPORATE</span><div class="xsh-card"><strong>Workspace</strong><p>One system, distinct rhythm.</p><button class="xsh-btn xsh-btn-primary xsh-btn-sm" type="button">Continue</button></div></div><div class="xsh-app xsh-ref-persona" data-xsh-design="civic" data-xsh-theme="light"><span>CIVIC</span><div class="xsh-card"><strong>Workspace</strong><p>One system, distinct rhythm.</p><button class="xsh-btn xsh-btn-primary xsh-btn-sm" type="button">Continue</button></div></div><div class="xsh-app xsh-ref-persona" data-xsh-design="commerce" data-xsh-theme="light"><span>COMMERCE</span><div class="xsh-card"><strong>Workspace</strong><p>One system, distinct rhythm.</p><button class="xsh-btn xsh-btn-primary xsh-btn-sm" type="button">Continue</button></div></div><div class="xsh-app xsh-ref-persona" data-xsh-design="creative" data-xsh-theme="light"><span>CREATIVE</span><div class="xsh-card"><strong>Workspace</strong><p>One system, distinct rhythm.</p><button class="xsh-btn xsh-btn-primary xsh-btn-sm" type="button">Continue</button></div></div><div class="xsh-app xsh-ref-persona" data-xsh-design="playful" data-xsh-theme="light"><span>PLAYFUL</span><div class="xsh-card"><strong>Workspace</strong><p>One system, distinct rhythm.</p><button class="xsh-btn xsh-btn-primary xsh-btn-sm" type="button">Continue</button></div></div><div class="xsh-app xsh-ref-persona" data-xsh-design="data-dense" data-xsh-theme="light"><span>DATA-DENSE</span><div class="xsh-card"><strong>Workspace</strong><p>One system, distinct rhythm.</p><button class="xsh-btn xsh-btn-primary xsh-btn-sm" type="button">Continue</button></div></div></div>Overview
Set data-xsh-design to precision, editorial, studio, playful or institutional. Styles change typography, radius, surface treatments and motion conventions.
Live example
Interactive · Real framework
Design DNA
One system. Five identities.
Try changing the personality in the top bar.
Example markup
<div class="xsh-card" data-xsh-elevation="raised">
<div class="xsh-stack">
<span class="xsh-badge">Design DNA</span>
<h3 class="xsh-h2">One system. Five identities.</h3>
<p class="xsh-muted">Try changing the personality in the top bar.</p>
<button class="xsh-btn xsh-btn-primary">Explore system</button>
</div>
</div>Production guidance
The root attribute controls descendants; it is not a generated arbitrary-value class.
Customize this component through --xsh-* CSS tokens, data-xsh-* configuration attributes and documented xsh-* utilities. Use the optional JavaScript distribution only when an interactive behavior is needed.
Build with confidenceOpen interactive design playground →
Complete selector inventory
These selectors exist in the current distribution. An entry in this table does not imply that arbitrary modifier combinations are meaningful; use the examples above for the intended composition.
| Class | Purpose | Delivery |
|---|---|---|
.xsh-card | Core component | CSS-only |
.xsh-card-borderless | Composable modifier / structure class | CSS-only |
.xsh-card-feature | Composable modifier / structure class | CSS-only |
.xsh-card-footer | Composable modifier / structure class | CSS-only |
.xsh-card-glass | Composable modifier / structure class | CSS-only |
.xsh-card-header | Composable modifier / structure class | CSS-only |
.xsh-card-inset | Composable modifier / structure class | CSS-only |
.xsh-card-interactive | Composable modifier / structure class | CSS-only |
.xsh-card-title | Composable modifier / structure class | CSS-only |
Implementation details
Interactive behavior
Verify focus order, disabled behavior and descriptive labels for interactive patterns.
Load xshna.min.js only if the documented interaction needs it. Your application remains responsible for data, persistence and business rules.
Responsive and localization
Test narrow containers, long translations and user-defined text sizes.
Test 320px-wide viewports, container-constrained instances, keyboard zoom, longer translations and right-to-left text where relevant.
Theme and customization
Use --xsh-* CSS variables for theme values and data-xsh-design / data-xsh-density on the xsh-app root.
Prefer design tokens over hard-coded overrides so components remain coherent across personalities.
What to verify before shipping
- Confirm every documented class used by the feature exists in the release CSS.
- Navigate controls using Tab, Shift+Tab, Enter, Space and Escape where appropriate.
- Test with reduced motion, high contrast, 200% text zoom and a narrow mobile viewport.
- Verify disabled, loading, empty, error and long-content states where relevant.
- Check actual application behavior independently of the preview: these examples use illustrative data.