STE SystemsSanderson Technology

Four focused CSS libraries

Design every layer.
Keep one interface.

Reusable rules keep related screens consistent while layout and appearance change independently. Inspect structure, visual styling, and interaction states in a working interface.

Open the labRead component guides

Need an application for your business? Explore Customized Platforms (opens in a new tab)

Four independent CSS libraries orbit one semantic interface. Select a layer to inspect its package resources.
218,400design combinations
How this count is calculated

Four focused CSS libraries

Use one layer or compose all four.

Each package owns one interface layer and remains useful on its own. Combine them when you need the complete system.

  1. 01

    Structure

    Layout Style CSS

    layout-style-css@3.2.3

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

    Test this layernpm for Layout Style CSS (opens in a new tab)Live demo for Layout Style CSS (opens in a new tab)
  2. 02

    Identity

    UI Style Kit CSS

    ui-style-kit-css@2.7.1

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

    Test this layernpm for UI Style Kit CSS (opens in a new tab)Live demo for UI Style Kit CSS (opens in a new tab)
  3. 03

    Behavior

    Interactive Surface CSS

    interactive-surface-css@1.7.3

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

    Test this layernpm for Interactive Surface CSS (opens in a new tab)Live demo for Interactive Surface CSS (opens in a new tab)
  4. 04

    Motion

    Motion Style CSS

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

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

    Test this layernpm for Motion Style CSS (opens in a new tab)Live demo for Motion Style CSS (opens in a new tab)

Technical reference

How this count is calculated

218,400 combinations describe the choices supported by this showcase’s installed libraries. Motion presets are documented separately and do not multiply the design-configuration count.

20 layouts × 7 recipes × 3 spacing densities × 20 visual presets × (25 shared themes + 1 native scheme per preset) = 218,400.Light, dark, and high-contrast display modes are excluded. A narrower count that omits spacing densities and native schemes will differ, even with the same layout and preset inventory.

Versions used by this showcase

  • 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

These are installed versions, not a claim about the latest registry release. The total is an inventory of supported choices, not proof that every combination has passed end-to-end accessibility or production testing.

Install examples pin these versions so you can reproduce the setup. Review the guides, exercise the controls your application uses, and verify them in your own browsers and workflows before release.

Beyond the interface

Systems built for client applications.

Sanderson Technology Enterprises LLC builds reusable interface components, application foundations, and developer tools for custom client applications. The three systems below are part of that toolkit.

Interface composition

STE USK React

Private source · Public npm distribution

Accessible React components that compose the foundational CSS libraries and optional Motion Style CSS. They power parts of this website and provide reusable interface building blocks for client applications. Version 2.3.0 is publicly distributed through npm; that does not make its source repository public.

Application foundation

STE-Core

Private foundation

A shared runtime that manages application configuration, execution context, and module lifecycles. It defines how modules connect, while each client application supplies its own business workflows.

Developer tooling

STE-SDK

Private tooling

Developer tools for inspecting module definitions, validating configuration, and checking compatibility with STE-Core. These checks help developers identify integration problems as they build client applications.

Quick start

Install the complete stack.

Install the exact CSS package versions used by this site. Choose the imports for the libraries your application needs.

View every installation option
npm install ui-style-kit-css@2.7.1 layout-style-css@3.2.3 interactive-surface-css@1.7.3

Interactive lab

Configure once. Inspect every layer.

Explore 218,400 supported combinations across layout presets, page structures, spacing, visual styles, and color schemes. Light, dark, and high-contrast modes are available in addition to these combinations.

Open the configurable lab

About the studio

Software built around your business.

Sanderson Technology Enterprises LLC builds custom applications and the reusable systems behind them. STE Systems introduces its public CSS libraries and private application toolkit.