The ecosystem, explained

Components & library guides

Four CSS libraries for structure, appearance, interaction, and motion. One React library that brings them together. Learn the essentials here, then explore the complete system in the Lab.

View full Lab Read all guides without interactive previews

01 / Structure

Layout Style CSS

v3.2.3

Build responsive grids, readable pages, and application shells. Layout Style CSS handles structure and spacing independently of your visual theme.

Start here

Install the package, then load its stylesheet at your application entry point.

npm install layout-style-css@3.2.3

import "layout-style-css";

Essential API

Layout Style CSS essentials
Use	What it does
`.ly-wrapper`	Constrain page width and add responsive gutters. Choose prose for reading or workspace for application screens.
`.ly-grid · .ly-stack`	Arrange content in a responsive grid or vertical stack. Items reflow according to their size and the available space.
`.ly-sidebar`	Pair regions using data-ly-sidebar="side" and data-ly-sidebar="content". The regions wrap when space runs out.
`data-ly-recipe · data-ly-area`	Choose a shell such as docs or app-shell, then assign named header, nav, main, aside, and footer areas.
`data-ly-density`	Set compact, normal, or spacious on a container to adjust spacing within that region.
`data-ly-layout`	Select a layout personality on .ly-root. Structure stays independent of component colors and interaction states.

Use this library on its own, or combine it with the other layers. These previews include supporting layout and theme classes to keep their content readable.

See it in context

A responsive project grid

Cards share the available width and wrap as space changes. UI classes style the cards; ly-grid arranges them.

In review

Customer portal

A welcoming home for project updates and shared files.

Design team · 3 tasks remaining

Ready

Team directory

Help everyone find the right person for their next idea.

People team · Ready for handoff

<div class="ly-grid ly-gap-4" style="--ly-grid-min: 12rem">
  <article class="usk-card ly-stack ly-gap-3 ly-pad-4">
    <span class="usk-badge">In review</span>
    <h4>Customer portal</h4>
    <p>A welcoming home for project updates and shared files.</p>
    <small>Design team · 3 tasks remaining</small>
  </article>
  <article class="usk-card ly-stack ly-gap-3 ly-pad-4">
    <span class="usk-badge" data-ui-variant="success">Ready</span>
    <h4>Team directory</h4>
    <p>Help everyone find the right person for their next idea.</p>
    <small>People team · Ready for handoff</small>
  </article>
</div>

A workspace with context

Named side and content regions share a row when space permits, then reflow for smaller screens.

<div class="ly-sidebar ly-gap-4" style="--ly-sidebar-size: 8rem; --ly-sidebar-content-min: 14rem">
  <aside class="usk-panel ly-stack ly-gap-3 ly-pad-4" data-ly-sidebar="side">
    <strong>Workspace</strong>
    <span>Projects · 3</span>
    <span>Team · 8</span>
  </aside>
  <article class="usk-card ly-stack ly-gap-3 ly-pad-4" data-ly-sidebar="content">
    <small>THIS WEEK</small>
    <h4>Customer preview</h4>
    <p>Review the welcome flow and collect feedback before Thursday.</p>
    <span class="usk-badge">Next milestone</span>
  </article>
</div>

02 / Visual identity

UI Style Kit CSS

v2.7.1

Style components and native HTML with a consistent theme. Presets define typography, colors, and surface treatments; palettes and display modes let you adjust them.

Start here

Install the package, then load its stylesheet at your application entry point.

npm install ui-style-kit-css@2.7.1

import "ui-style-kit-css/visual.css";

Essential API

UI Style Kit CSS essentials
Use	What it does
`data-ui`	Choose a preset such as minimal-saas on the containing element. Semantic usk-* classes work across presets.
`data-theme · data-mode`	Use a shared theme with light, dark, or contrast mode. Omit data-theme to use the preset’s native palette.
`.usk-card · .usk-badge`	Build surfaces and status labels with semantic component classes; keep layout composition in Layout Style CSS.
`.usk-field · .usk-input`	Pair visible labels and helper text with native controls. The library styles them; your app owns values and validation.
`.usk-alert`	Compose an alert title and body, then select its visual variant with data-ui-variant.
`Native HTML`	Headings, lists, tables, and form elements inherit the active visual scope. Keep their native semantics and accessible labels.

Use this library on its own, or combine it with the other layers. These previews include supporting layout and theme classes to keep their content readable.

See it in context

One visual language, different roles

A card, native field, badge, and alert share a fixed theme. Edit the sample field to try its native behavior.

Ready for review

Customer portal

Keep your projects, people, and progress together.

Workspace name Visible to your project team.

<div data-ui="minimal-saas" data-theme="midnight-gold" data-mode="dark" class="ly-stack ly-gap-4">
  <article class="usk-card ly-stack ly-gap-4 ly-pad-6">
    <span class="usk-badge" data-ui-variant="success">Ready for review</span>
    <h4>Customer portal</h4>
    <p>Keep your projects, people, and progress together.</p>
    <label class="usk-field">
      <span class="usk-label">Workspace name</span>
      <input class="usk-input" value="Northstar Studio" aria-describedby="guide-workspace-help">
      <span class="usk-help-text" id="guide-workspace-help">Visible to your project team.</span>
    </label>
  </article>
  <aside class="usk-alert" data-ui-variant="success">
    <strong class="usk-alert-title">All set for Thursday</strong>
    <p class="usk-alert-body">The team can review the latest design updates.</p>
  </aside>
</div>

03 / Behavior

Interactive Surface CSS

v1.7.3

Make controls respond consistently to mouse, keyboard, and persistent application state, while keeping their native behavior.

Start here

Install the package, then load its stylesheet at your application entry point.

npm install interactive-surface-css@1.7.3

import "interactive-surface-css/standalone-preset.css";

Essential API

Interactive Surface CSS essentials
Use	What it does
`.interactive-surface`	Add consistent interaction styling to a native button or link. Use the standalone preset when installing this library on its own.
`data-surface-variant`	Choose a semantic surface variant, such as accent or subtle, to communicate emphasis.
`data-surface-level · .size-*`	Set elevation levels 1–3 and control sizes sm, md, or lg without changing application behavior.
`aria-pressed · aria-current`	Reflect persistent toggle and navigation state in ARIA. Application code must update the value; CSS presents it.
`disabled · aria-busy`	Native disabled prevents activation. aria-busy communicates work in progress; your application owns the operation.
`prefers-reduced-motion`	Motion adapts to the user’s preference. Keep visible focus and understandable state changes available without animation.

Use this library on its own, or combine it with the other layers. These previews include supporting layout and theme classes to keep their content readable.

See it in context

States that explain themselves

Hover or focus the controls, then pin the project. Loading and unavailable examples are deliberately disabled.

Project is not pinned.

<div class="ly-cluster ly-gap-3">
  <button class="interactive-surface" data-surface-variant="accent" data-surface-level="2" type="button" aria-pressed="false">Pin project</button>
  <button class="interactive-surface size-sm" type="button" aria-busy="true" disabled>Saving…</button>
  <button class="interactive-surface" type="button" disabled>Unavailable</button>
</div>

The snippet shows the initial state. Your application updates aria-pressed when the toggle is activated; CSS alone does not change application state.

04 / Lifecycle motion

Motion Style CSS

v1.0.0

Motion Style CSS is the newest addition to STE's web development system. Use ten paired entrance/exit presets and coordinated movement while leaving layout, paint, and control feedback with their existing owners.

Start here

Install the package, then load its stylesheet at your application entry point.

npm install @sanderson-technology-enterprises/motion-style-css@1.0.0

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.

Essential API

Motion Style CSS essentials
Use	What it does
`presets / enter / exit`	Choose an exported preset and animate a dedicated shell after mount. Motion never removes DOM or moves focus for you.
`stagger / replace / cancel`	Coordinate repeated shells, sequence a content replacement, and cancel superseded effects during cleanup.
`direction / duration / delay`	Slide and curtain support left, right, up, and down. Timing values are in milliseconds.
`Reduced motion`	User preferences remain enabled by default. Content stays usable when effects are skipped.
`React /motion adapter`	Use the optional STE USK React Motion shell for controlled presence, retained exits, and effect cleanup. Import the motion stylesheet once.

Use this library on its own, or combine it with the other layers. These previews include supporting layout and theme classes to keep their content readable.

See it in context

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.

Motion preset

Motion direction

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.

05 / React composition

STE USK React

v2.3.0

Bring the foundational CSS libraries together through accessible React components and opt into lifecycle motion through the separate /motion entry. Use typed props, events, and local state while the CSS libraries handle structure, appearance, and interaction styling.

Start here

Install the package, then load its stylesheet at your application entry point.

npm install @sanderson-technology-enterprises/ste-usk-react@2.3.0 react@19.2.6 react-dom@19.2.6 layout-style-css@3.2.3 ui-style-kit-css@2.7.1 interactive-surface-css@1.7.3 @sanderson-technology-enterprises/motion-style-css@1.0.0

// Import once at your application entry point.
import "@sanderson-technology-enterprises/ste-usk-react/styles.css";

Essential API

STE USK React essentials
Use	What it does
`InterfaceRoot`	Set preset, theme, mode, and density for a group of components. These settings apply to components nested inside the root.
`Layout.Grid · Layout.Stack`	Compose responsive structure with React APIs backed by Layout Style CSS.
`Card.Header · Card.Body`	Build semantic component regions with compound APIs rather than duplicating their DOM structure.
`Form.Input · Button · Alert`	Use labeled controls, native events, and accessible feedback. React state remains owned by your application.
`surfaceVariant · surfaceLevel`	Pass interaction preferences through component props. CSS retains ownership of appearance and interaction styling.
`Compatible peers`	@sanderson-technology-enterprises/motion-style-css: ^1.0.0; interactive-surface-css: ^1.7.0; layout-style-css: ^3.2.0; react: >=18.2.0 <20; ui-style-kit-css: ^2.7.1

See it in context

A working React composition

Edit the project name and save the preview. This example uses local React state and sends no data.

"use client";

import { useState } from "react";
import {
  Alert,
  Button,
  Card,
  Form,
  InterfaceRoot,
  Layout,
} from "@sanderson-technology-enterprises/ste-usk-react";

/**
 * Composes the three CSS libraries through React APIs with preview-only state.
 * Import ste-usk-react/styles.css once at your application entry point.
 * This module is also displayed verbatim as the guide's copyable JSX example.
 */
export function ReactProjectExample() {
  const [name, setName] = useState("Customer portal");
  const [savedName, setSavedName] = useState("");

  return (
    <InterfaceRoot preset="minimal-saas" theme="midnight-gold" mode="dark">
      <Layout.Stack gap={4}>
        <Card>
          <Card.Header>
            <h4>Project settings</h4>
            <p>A shared home for your team’s latest work.</p>
          </Card.Header>
          <Card.Body>
            <Form
              onSubmit={(event) => {
                event.preventDefault();
                if (name.trim()) setSavedName(name.trim());
              }}
            >
              <Layout.Stack gap={4}>
                <Form.Input
                  label="Project name"
                  name="projectName"
                  value={name}
                  required
                  onChange={(event) => {
                    setName(event.target.value);
                    setSavedName("");
                  }}
                  helpText="Changes stay in this preview."
                />
                <Button type="submit" disabled={!name.trim()}>
                  Save preview
                </Button>
              </Layout.Stack>
            </Form>
          </Card.Body>
        </Card>
        {savedName ? (
          <Alert variant="success" role="status" title="Preview updated">
            Saved “{savedName}” in this preview. No data was sent.
          </Alert>
        ) : null}
      </Layout.Stack>
    </InterfaceRoot>
  );
}

Components & library guides

Start here

Essential API

Customer portal

Team directory

Customer preview

Start here

Essential API

Customer portal

Start here

Essential API

Start here

Essential API

Surface level 1

Surface level 2

Surface level 3

Start here

Essential API

See the whole system in action