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.
XSHNA.CSS 3.0 / PRODUCTION HANDBOOK
Xshna Studio
Design tokens and visual export. Practical engineering and integration guidance for serious commercial applications.
Interactive setup
Open tools/studio/index.html on your web host. Choose Design DNA, light/dark/auto, density, motion and brand color. Preview both dashboard and marketing compositions. Select fluid, mobile or tablet canvas widths; the preview updates immediately with the actual distributed CSS.
Export format
Export design kit downloads a ZIP with xshna-theme.css, design-tokens.json, an integration HTML example and README. It does not download a duplicate of the framework core: copy the matching Xshna dist stylesheet and optional runtime to your site. Import JSON accepts only recognized enum values, a six-digit opaque hexadecimal brand and a card radius between 0 and 30.
Contrast constraints
The primary text foreground is chosen to contrast with the selected opaque brand color at least 4.5:1 in the basic helper. This does not validate every derived surface, hover state, alert, brand image or focus indicator. Confirm the actual final UI with automated contrast tooling and manual review.
Commercial use
Keep token files in source control and test a design change on the full product surface. Changing density or the visual personality can alter line wrapping, table fit and interactive target dimensions. Enterprise design approval should examine mobile, tablet and desktop views, not the default preview alone.
Launch Studio
Release status: Use the acceptance checklist before representing any feature as independently certified or accessible in all browsers. Tests delivered with the package are evidence of only the checks actually performed.
Files, tokens and configuration
| Surface | Source of truth | What to check |
|---|---|---|
dist/xshna.min.css | Compiled framework | Styling and responsive behavior |
dist/xshna.min.js | Optional interactions | Lifecycle, event handling and teardown |
src/css/ | Readable source | Public class names and token definitions |
src/contracts/ | Published component contracts where available | State, configuration and behavioral support |
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.