STE SystemsSanderson Technology

Configurable package workbench

Configure the system. Inspect every layer.

Change layout, visual style, palette, and mode, then inspect how the foundational layers behave on the same semantic markup, then try lifecycle motion on separate shells.

Jump to the workbenchView installation options
Interface Observatory: choose structure, identity, or behavior to inspect the matching ecosystem library.
Oneinterface core
  1. 01
    Structurelayout-style-css
  2. 02
    Identityui-style-kit-css
  3. 03
    Behaviorinteractive-surface-css
  4. 04
    Motion@sanderson-technology-enterprises/motion-style-css

Try this in the Lab

  1. Open lab configuration and change Layout. Follow the same Northstar project cards as the workspace rearranges.
  2. Change Visual style and Palette. The content and controls stay in place while their appearance changes.
  3. Use Tab to inspect keyboard focus, then visit the interaction examples to compare pressed and disabled controls.

The client workspace shows one set of project information across configurations. Focused demos isolate each library; component guides explain the APIs and copyable examples for adoption.

Example client workspace

See all three layers in one workspace.

Explore a sample project workspace built with all three libraries. Layout Style CSS arranges the content, UI Style Kit CSS controls its appearance, and Interactive Surface CSS styles control states.

Northstar rebrandDelivery command center
Client workspace

A confident path to launch

Dark mode
Delivery health
On track
Approved milestones
06 / 08
Launch window
18 days
Design system72%

Northstar interface language

Responsive structure, accessible visual identity, and state mechanics prepared as one maintainable system.

72%
Latest activity

Decisions stay visible

  • Navigation model approved by the client team.
  • High-contrast interface review completed.
  • Responsive content model ready for handoff.
Semantic DOM order remains the mobile order.Last synchronized today

Layout laboratory

Test responsive layout recipes.

Choose a layout preset in the configuration menu to rearrange these examples. Reading and keyboard order stay the same. Explore the grids, panes, page recipes, Mosaic, and Action Bar layouts available in Layout Style CSS 3.2.3.

Base gridThis unqualified .ly-grid makes every personality's column rhythm visible.

01Plan02Compose03Review04Deliver
View six layout recipes

Dashboard

header / nav / main / aside / footer
Pipeline overview
Delivery velocity

Milestone flow stays central at every width.

Updated today

Documentation

header / nav / main / aside / footer
System handbook
Authoritative content

The reading path remains first in the source.

Version 3.2.3

List detail

primary / secondary / actions
Project index

Northstar · Beacon · Field Notes

Northstar

Brand and interface system delivery.

Review · Export · Share

Split hero

content / media / actions
Structure that keeps its promise

Content leads before media at narrow widths.

Responsive media field
Inspect recipe · Read API

Gallery

repeated direct children
Research
Identity
Prototype
Launch

Card grid

repeated direct children
Audit

One bounded responsibility.

Compose

One bounded responsibility.

Validate

One bounded responsibility.

Ship

One bounded responsibility.

View composition primitives
StackFirst blockSecond block
ClusterAlphaBetaGamma
Center

Bounded and centered.

TopCover centerBottom
SwitcherFlexible peer
Sidebar sideFlexible content region
Intrinsic gridTwoThree
Mosaic canvas

Primary work stays first in reading and keyboard order.

Signal health
System status remains reachable at every width.
Action Bar
SplitBalanced peer
Two panesInspector
Three panesCanvasInspector
Media objectContent follows the asset.Open · Save
ReelSecondThirdFourth
Frame 16:9
Scroll region

Bounded content remains reachable.

Overscroll stays contained.

Keyboard focus remains visible.

Logical sizing supports writing modes.

View wrappers and utilities
Plain wrapperPersonality-sensitive measure
compactExplicit semantic measure
proseExplicit semantic measure
contentExplicit semantic measure
workspaceExplicit semantic measure
wideExplicit semantic measure
fullExplicit semantic measure
Breakout content lane
Feature lane
Full lane
ly-gap-0ly-gap-1ly-gap-2ly-gap-3ly-gap-4ly-gap-5ly-gap-6ly-gap-7ly-gap-8ly-gap-9ly-pad-0ly-pad-2ly-pad-4ly-pad-6ly-pad-8
Alignment hooks
ly-items-startly-items-centerly-items-endly-items-stretchly-justify-startly-justify-centerly-justify-endly-justify-between

Identity

Test visual styles and native controls.

Choose a visual style, palette, and display mode in the configuration menu. These examples use the selected preset’s component classes to show how it styles surfaces, text, and native HTML controls.

Active preset typography

Identity without structural lock-in

Semantic roles stay readable

The selected preset supplies font character, hierarchy, and color.

A plain paragraph establishes the surrounding document baseline.

Body copy uses the preset's published reading treatment.

PrimarySecondaryAccentSuccessWarningDangerMuted
CardComputed paint signature for preset, theme, and mode.
PanelLonger-running workspace content.
Surface
Small surface
Large surface
Well
Inset
Preset hover lift

Featured system

Media treatment
Feature card composition
UIService card composition
Stable semantic feature
View buttons and component states
View alerts, status, and badges
BasePrimarySecondarySuccessWarningDangerVerified seal
View form recipes and native-first choices

This preset publishes an optional custom-choice visual recipe; the fully visible native controls below remain the functional cross-preset baseline.

View progress, loading, and tooltips
Above the anchorBeside the anchorBelow the anchorBefore the anchor
Static tooltip surface
View navigation, toolbar, and table
Ownership by layer
LayerOwner
PaintUI Style Kit
MechanicsInteractive Surface
View shape, state, and accessibility helpers
Primary backgroundSecondary backgroundBorderRoundedRounded largeRounded extra largePill
Skip to UI laboratory headingScreen-reader-only helperVisually hidden helper
View current preset extras

Extras come directly from the published manifest and render only for the active preset.

Nothing waiting for reviewThe empty-state helper owns the calm product moment.
Coverage100%

Manifest extras exposed here: none.

Native HTML controls

Native controls with theme styling

The theme styles the parts of native controls that browsers expose to CSS. System pickers and some popups retain their browser or operating-system appearance.

Input type atlas

These inputs use native HTML without component classes. The active theme styles them, and the browser supplies their built-in behavior.

Range value: 68

File selector states
View select, datalist, textarea, and popups

Color, date/time, and file chooser dialogs also remain platform-owned; only their exposed host boxes and supported indicators are painted.

View checkbox, radio, switch, and indeterminate states
Native choice controls
View native validation and control states
View progress, meter, output, details, and scrollbars
Native summary marker

Details stay keyboard-operable without custom disclosure code.

  • Native list marker
  • Theme-aware semantic list content

Select this sentence to inspect the active native selection paint.

Supported Chromium/WebKit scrollbars inherit track and thumb tokens. Firefox keeps its platform scrollbar paint because the release does not claim a scrollbar-color contract.

Range progress and meter distinctions also vary by engine; track, thumb, and value styling applies only where the engine exposes a safe pseudo-element.

Open a real modal dialog

Browser top layer

Native dialog specimen

This modal uses showModal(), the browser backdrop, native Escape handling, and a method="dialog"close action.

View native support and public tokens

The hybrid-native policy paints safe boxes and exposed subparts while leaving inaccessible browser and operating-system popups untouched.

Fully Themed

a, abbr, address, article, aside, b, bdi, bdo, blockquote, body, button, caption, cite, code, data, dd, del, details, dfn, dialog, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, input, ins, kbd, label, legend, li, main, mark, menu, meter, nav, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, search, section, select, small, span, strong, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, tr, u, ul, var

Progressively Enhanced

area, audio, br, canvas, col, colgroup, embed, iframe, img, map, math, object, optgroup, option, picture, selectedcontent, slot, svg, video, wbr

Platform Owned

audio-controls, color-picker-dialog, datalist-popup, date-time-picker-dialog, select-popup, video-controls

Non Rendered

base, datalist, head, link, meta, noscript, script, source, style, template, title, track

Standard parts

accent-color, choice-control, color-scheme, dialog-backdrop, file-selector-button, list-marker, placeholder, selection, summary-marker

Vendor Specific parts

calendar-picker-indicator, color-swatch, number-spinner, progress-indeterminate, progress-track, progress-value, range-progress, range-thumb, range-track, scrollbar, search-cancel-button, select-indicator

Platform Owned parts

color-picker-dialog, datalist-popup, date-time-picker-dialog, select-option-rendering, select-popup

Non Rendered parts

datalist

Public native tokens

--usk-native-control-min-block-size--usk-native-control-padding-block--usk-native-control-padding-inline--usk-native-subcontrol-padding-block--usk-native-subcontrol-padding-inline--usk-native-border-width--usk-native-field-gap--usk-native-panel-padding--usk-native-range-track-size--usk-native-range-track-background--usk-native-range-track-radius--usk-native-range-progress-background--usk-native-range-thumb-size--usk-native-range-thumb-background--usk-native-range-thumb-border--usk-native-range-thumb-radius--usk-native-file-button-background--usk-native-file-button-border--usk-native-file-button-radius--usk-native-file-button-shadow--usk-native-indicator

Behavior

Test interaction states and precedence.

Try hover, keyboard focus, pressed, busy, and disabled states. Compare which state takes precedence when several apply. UI Style Kit CSS supplies the appearance, and Layout Style CSS arranges the examples.

Six semantic variants

Variant comparisons use level 2 so paint depth stays constant.

Three surface levels

Level 1 is deliberately subtle; level 3 mixes the active identity into the strongest depth.

Outcome feedback

Interactive Surface 1.7 renders one-shot semantic outcomes while the application keeps responsibility for accessible status text.

Choose an outcome to preview its feedback.

View semantic attributes and class API parity
Current

Successful guarded activations: 0

State-collision console

Toggle only documented ARIA and class hooks. Move the pointer onto the specimen for real hover, then hold the primary button for real :active.

Precedence overrides
Persistent collision state

Effective precedence: base

Disabled > busy/loading > real active > persistent active/pressed/selected/current > real hover > base. Focus-visible remains independent.

Motion Style CSS / New to STE

Motion with a clear beginning and end.

Ten paired presets for entrances, exits, and coordinated content. Motion works on a dedicated shell; structure, appearance, and interaction feedback keep their own layers.

Surface level 1

Shared component paint and interaction depth stay inside the motion shell.

Surface level 2

Shared component paint and interaction depth stay inside the motion shell.

Surface level 3

Shared component paint and interaction depth stay inside the motion shell.

Ready. Choose an effect and play a phase.

Reduced motion is respected automatically. Completed exits hide the specimen; the controls remain available to bring it back.

Isolated integration laboratory

Verify each adoption path in isolation.

The complete-stack examples follow your current Lab settings. Single- and two-library examples use fixed settings so you can compare what each combination provides.

Isolated proof

ui-style-kit-css + interactive-surface-css + layout-style-css

Complete three-library stack

Paint, state mechanics, and intrinsic structure compose in the documented ownership order.

Isolated proof

ui-style-kit-css + interactive-surface-css + layout-style-css + @sanderson-technology-enterprises/motion-style-css

Four CSS layers with motion

Structure, appearance, and interaction remain inside dedicated lifecycle motion shells.

View single-package fixtures

Isolated proof

layout-style-css

Layout Style CSS standalone

Intrinsic layout primitives and adaptive grid geometry without companion paint or state mechanics.

Isolated proof

ui-style-kit-css

UI Style Kit CSS standalone

Theme paint, native controls, and component identity without structural or interaction dependencies.

Isolated proof

interactive-surface-css

Interactive Surface CSS standalone

Portable neutral paint and complete interaction mechanics from the standalone preset.

Isolated proof

@sanderson-technology-enterprises/motion-style-css

Motion Style CSS standalone

Lifecycle effects on dedicated shells without layout, component paint, or interaction dependencies.

View two-package fixtures

Isolated proof

ui-style-kit-css + layout-style-css

Layout plus UI

Intrinsic layout geometry and visual identity remain complementary without richer surface mechanics.

Isolated proof

interactive-surface-css + layout-style-css

Layout plus interaction

Intrinsic responsive composition combines with the neutral standalone interaction presentation.

Isolated proof

ui-style-kit-css + interactive-surface-css

UI plus interaction

UI paint feeds one canonical interaction-state engine.

Install

Install one package or the complete stack.

Each option uses exact package versions and includes npm, bundler, and CDN instructions. Choose the libraries your application needs. Use one CSS library, combine the foundational layers, or add lifecycle motion. The React guide shows how the component integration connects these same CSS responsibilities without taking ownership of their styling.

Read the React integration guide for installed exports, props, and a working example.

Adoption path

layout-style-css + ui-style-kit-css + interactive-surface-css + @sanderson-technology-enterprises/motion-style-css

Four CSS layers with lifecycle motion

Compose structure, appearance, and interaction with optional lifecycle motion on separate shells.

  1. 01
    npm

    Install all four CSS libraries

    npm install ui-style-kit-css@2.7.1 layout-style-css@3.2.3 interactive-surface-css@1.7.3 @sanderson-technology-enterprises/motion-style-css@1.0.0
  2. 02
    Imports

    Import the stylesheets

    import "ui-style-kit-css/visual.css";
import "ui-style-kit-css/interactive-surface-theme.css";
import "interactive-surface-css/state-core.css";
import "layout-style-css";
import "@sanderson-technology-enterprises/motion-style-css/styles.css";
import { enter, exit, cancel, stagger } from "@sanderson-technology-enterprises/motion-style-css";
// Call enter(shell) after mount; cancel(shell) during cleanup.
  3. 03
    CDN

    Load exact versions from a CDN

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.7.1/dist/ui-style-kit.visual.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.7.1/styles/interactive-surface-theme.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/interactive-surface-css@1.7.3/state-core.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.2.3/dist/layout-style-css.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sanderson-technology-enterprises/motion-style-css@1.0.0/src/motion.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@sanderson-technology-enterprises/motion-style-css@1.0.0/src/index.js"></script>

Adoption path

layout-style-css + ui-style-kit-css + interactive-surface-css

The canonical three-library stack

Install the three CSS libraries used together in this Lab: layout, visual styling, and interaction states.

  1. 01
    npm

    Install all three

    npm install ui-style-kit-css@2.7.1 layout-style-css@3.2.3 interactive-surface-css@1.7.3
  2. 02
    Imports

    Import the stylesheets

    import "ui-style-kit-css/visual.css";
import "ui-style-kit-css/interactive-surface-theme.css";
import "interactive-surface-css/state-core.css";
import "layout-style-css";
  3. 03
    CDN

    Load exact versions from a CDN

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.7.1/dist/ui-style-kit.visual.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.7.1/styles/interactive-surface-theme.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/interactive-surface-css@1.7.3/state-core.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.2.3/dist/layout-style-css.min.css">
View single-package options

Adoption path

@sanderson-technology-enterprises/motion-style-css

Motion Style CSS

Add lifecycle effects to a dedicated shell without adopting other CSS libraries.

  1. 01
    npm

    Install Motion Style CSS

    npm install @sanderson-technology-enterprises/motion-style-css@1.0.0
  2. 02
    Imports

    Import the stylesheets

    import "@sanderson-technology-enterprises/motion-style-css/styles.css";
import { enter, exit, cancel, stagger } from "@sanderson-technology-enterprises/motion-style-css";
// Call enter(shell) after mount; cancel(shell) during cleanup.
  3. 03
    CDN

    Load exact versions from a CDN

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@sanderson-technology-enterprises/motion-style-css@1.0.0/src/motion.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@sanderson-technology-enterprises/motion-style-css@1.0.0/src/index.js"></script>

Adoption path

layout-style-css

Layout Style CSS

Add responsive layouts while keeping your existing component appearance and interaction styling.

  1. 01
    npm

    Install Layout Style CSS

    npm install layout-style-css@3.2.3
  2. 02
    Imports

    Import the stylesheets

    import "layout-style-css";
  3. 03
    CDN

    Load exact versions from a CDN

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.2.3/dist/layout-style-css.min.css">

Adoption path

ui-style-kit-css

UI Style Kit CSS

Add themes and styling for components and native controls. No layout library is required.

  1. 01
    npm

    Install UI Style Kit CSS

    npm install ui-style-kit-css@2.7.1
  2. 02
    Imports

    Import the stylesheets

    import "ui-style-kit-css/visual.css";
  3. 03
    CDN

    Load exact versions from a CDN

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.7.1/dist/ui-style-kit.visual.min.css">

Adoption path

interactive-surface-css

Interactive Surface CSS

Style hover, focus, pressed, and disabled states with the package’s neutral standalone preset.

  1. 01
    npm

    Install Interactive Surface CSS

    npm install interactive-surface-css@1.7.3
  2. 02
    Imports

    Import the stylesheets

    import "interactive-surface-css/standalone-preset.css";
  3. 03
    CDN

    Load exact versions from a CDN

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/interactive-surface-css@1.7.3/standalone-preset.css">
View two-package options

Adoption path

layout-style-css + ui-style-kit-css

Layout plus UI

Combine structural recipes with visual identity while retaining existing interaction behavior.

  1. 01
    npm

    Install Layout and UI

    npm install layout-style-css@3.2.3 ui-style-kit-css@2.7.1
  2. 02
    Imports

    Import the stylesheets

    import "ui-style-kit-css/visual.css";
import "layout-style-css";
  3. 03
    CDN

    Load exact versions from a CDN

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.7.1/dist/ui-style-kit.visual.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.2.3/dist/layout-style-css.min.css">

Adoption path

layout-style-css + interactive-surface-css

Layout plus interaction

Combine responsive geometry with standalone interaction surfaces and states.

  1. 01
    npm

    Install Layout and Interaction

    npm install layout-style-css@3.2.3 interactive-surface-css@1.7.3
  2. 02
    Imports

    Import the stylesheets

    import "interactive-surface-css/standalone-preset.css";
import "layout-style-css";
  3. 03
    CDN

    Load exact versions from a CDN

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/interactive-surface-css@1.7.3/standalone-preset.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.2.3/dist/layout-style-css.min.css">

Adoption path

ui-style-kit-css + interactive-surface-css

UI plus interaction

Combine UI themes with interaction styling while keeping your existing layout system.

  1. 01
    npm

    Install UI and Interaction

    npm install ui-style-kit-css@2.7.1 interactive-surface-css@1.7.3
  2. 02
    Imports

    Import the stylesheets

    import "ui-style-kit-css/visual.css";
import "ui-style-kit-css/interactive-surface-theme.css";
import "interactive-surface-css/state-core.css";
  3. 03
    CDN

    Load exact versions from a CDN

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.7.1/dist/ui-style-kit.visual.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.7.1/styles/interactive-surface-theme.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/interactive-surface-css@1.7.3/state-core.css">

Directory

Package resources.

Adopt one layer or combine the four. Every library remains independently useful, documented, and versioned.

  1. 01
    Structure

    layout-style-css

    Responsive page layouts, content wrappers, grids, and panes with interchangeable layout presets.

    v3.2.3Recommended entry pointlayout-style-css
    View Layout Style CSS standalone proof (opens in a new tab)
  2. 02
    Identity

    ui-style-kit-css

    Component themes, color palettes, typography, and native HTML styling with light, dark, and high-contrast modes.

    v2.7.1Recommended entry pointui-style-kit-css/visual.css
    View UI Style Kit CSS standalone proof (opens in a new tab)
  3. 03
    Behavior

    interactive-surface-css

    Consistent hover, focus-visible, active, pressed, and disabled states.

    v1.7.3Recommended entry pointinteractive-surface-css/standalone-preset.css
    View Interactive Surface CSS standalone proof (opens in a new tab)
  4. 04
    Motion

    @sanderson-technology-enterprises/motion-style-css

    The newest addition to the STE web development system: paired entrances, exits, and choreography on dedicated shells, with reduced-motion support.

    v1.0.0Recommended entry point@sanderson-technology-enterprises/motion-style-css/styles.css
    View Motion Style CSS standalone proof (opens in a new tab)