Design every layer.
Keep one interface.

Build responsive layout, accessible visual identity, and dependable interaction mechanics on one semantic interface.

Launch the workbench Visit Sanderson Technology Enterprises

Oneinterface core

01
Structurelayout-style-css
02
Identityui-style-kit-css
03
Iconographyui-style-kit-icons
04
Behaviorinteractive-surface-css

Selected layer

Structure

Responsive shells, wrappers, grids, panes, and switchable layout personalities.

data-ly-layout="bento"

Live client outcome

One workspace. Four proven layers.

A realistic delivery workspace doubles as a developer proof: the recipe owns its geometry, the active UI preset paints every rich surface, and interaction state remains independent.

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.

Layout laboratory

Layout laboratory: geometry with intent

Change the global personality above. The same semantic recipe and primitive hooks recompute their geometry without moving a single node in reading or keyboard order. This laboratory targets Layout Style CSS 3.0.0 with intrinsic grids, intrinsic panes, and canonical attribute recipes.

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

01Plan02Compose03Review04Deliver

Explore the six supporting recipes

Dashboard

header / nav / main / aside / footer

Pipeline overview

Delivery velocity

Milestone flow stays central at every width.

Documentation

header / nav / main / aside / footer

System handbook

Authoritative content

The reading path remains first in the source.

List detail

primary / secondary / actions

Project index

Northstar · Beacon · Field Notes

Northstar

Brand and interface system delivery.

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.

Inspect every composition primitive

StackFirst blockSecond block

ClusterAlphaBetaGamma

Center

Bounded and centered.

TopCover centerBottom

SwitcherFlexible peer

Intrinsic gridTwoThree

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.

Review wrappers, breakout lanes, and utilities

Plain wrapperPersonality-sensitive measure

compactExplicit semantic measure

proseExplicit semantic measure

contentExplicit semantic measure

wideExplicit semantic measure

fullExplicit semantic measure

Breakout content lane

Feature lane

Full lane

ly-gap-0ly-gap-2ly-gap-4ly-gap-6ly-gap-8ly-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

UI laboratory: preset paint on one semantic system

Every visual class is constructed from the active manifest prefix. Themes, modes, components, and native controls change without loading inactive preset classes into the specimen DOM.

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

Buttons, standalone pill, and component states

Alerts, status, and badges

Informational status

The same semantic structure accepts every active preset.

SuccessAll interface layers agree.

WarningReview platform-owned behavior.

DangerInvalid state needs correction.

BasePrimarySecondarySuccessWarningDanger

Prefixed form recipes and native-first choices

Project namePrefixed fields remain optional over the native baseline.Review laneNotes

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

Include audit notesRelease review

Announce changes

Progress, loading, and directional tooltips

Navigation, toolbar, and table

Ownership by layer
Layer	Owner
Paint	UI Style Kit
Mechanics	Interactive Surface

Shape, state, and accessibility helpers

Primary backgroundSecondary backgroundBorderRoundedRounded largeRounded extra largePill

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: empty-state, metric, metric-label, metric-value.

Hybrid native coverage

Native laboratory: platform semantics, exposed paint

Safe boxes and supported subparts inherit the active identity; inaccessible pickers, popups, and operating-system surfaces stay platform-owned.

Input type atlas

Every control below is classless. The active root configuration supplies native paint while the browser retains semantics.

TextSearchEmailURLTelephonePasswordNumberDateTimeDate and timeMonthWeekColorFileRange

Range value: 68

File selector states

EnabledFocusHoverActiveDisabled

Select, datalist, textarea, and platform-owned popups

Grouped selectThe select popup remains platform-owned; the closed control and supported picker indicator inherit the active preset.DatalistThe input is themed; its datalist popup remains platform-owned and is not replaced with a less-accessible imitation.Textarea and placeholder

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

Checkbox, radio, switch-like, and indeterminate controls

Native validation and control states

Progress, meter, output, details, markers, and scrollbars

Determinate progress68%Indeterminate progressLoadingOptimum meter92Suboptimal meter58Low meter18

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

Native support classifications 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, color-scheme, dialog-backdrop, file-selector-button, list-marker, placeholder, selection, summary-marker

Vendor Specific parts

calendar-picker-indicator, color-swatch, number-spinner, progress-track, progress-value, 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-track--usk-native-track-fill--usk-native-thumb--usk-native-thumb-border--usk-native-indicator

Iconography laboratory

One meaning, styled for every interface.

Visual Style selects the artwork pack automatically. Palette and mode then supply color and contrast without changing semantics.

Dashboarddashboard

Browserbrowser

Visual identitypalette

Layerslayers

Activityactivity

Securityshield

Datadatabase

Commercecredit-card

Communicationmessage

Feedbackwarning

Developer toolsterminal

Deliveryrocket

Standalone meaningful icons announce a label; icons beside visible text are decorative.

Bauhaus intentionally uses the neutral System pack. Retrofuturism uses Synthwave artwork.

Behavior

Interaction laboratory: one predictable mechanics layer

Hover, focus-visible, active, persistent, busy, and disabled states stay semantic while UI Style Kit supplies paint and Layout Style supplies composition.

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.

Inspect 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.

Effective precedence: base

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

Isolated integration laboratory

Prove every adoption boundary.

Each iframe uses a fixed baseline configuration and local CSS copied from the pinned packages. That isolation keeps comparisons stable while the surrounding showcase changes personality, preset, theme, and mode.

Isolated proof

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

Complete four-package stack

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

Use one package at a time

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

ui-style-kit-icons

UI Style Kit Icons standalone

Semantic SVG artwork with readable fallback paint and no required visual-theme dependency.

Isolated proof

interactive-surface-css

Interactive Surface CSS standalone

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

Compose two independent layers

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

ui-style-kit-css + ui-style-kit-icons

UI plus icons

The selected UI preset supplies icon artwork while palette and mode supply coordinated paint.

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 all four, or adopt by layer.

Every path pins the aligned releases and preserves ownership across identity, iconography, behavior, and structure.

Adoption path

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

The canonical all-four stack

Use the complete ownership-separated stack demonstrated by the flagship page.

npm

Install all four

npm install ui-style-kit-css@2.1.0 ui-style-kit-icons@1.0.0 layout-style-css@3.0.0 interactive-surface-css@1.5.0

Imports

Load the ownership-separated stack

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 "ui-style-kit-icons/css.css";
import "ui-style-kit-icons/element";

CDN

Use immutable CDN links

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.1.0/dist/ui-style-kit.visual.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.1.0/styles/interactive-surface-theme.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/interactive-surface-css@1.5.0/state-core.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@3.0.0/dist/layout-style-css.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-icons@1.0.0/dist/ui-style-kit-icons.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/ui-style-kit-icons@1.0.0/dist/ui-style-kit-icons.js"></script>

Install one independent package

Adoption path

layout-style-css

Layout Style CSS

Adopt responsive structure without changing component paint or state behavior.

01
npm
Install Layout Style CSS
```
npm install layout-style-css@3.0.0
```
02
Imports
Load the ownership-separated stack
```
import "layout-style-css";
```

CDN

Use immutable CDN links

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

Adoption path

ui-style-kit-css

UI Style Kit CSS

Adopt themes, component paint, and native-control styling without a layout dependency.

01
npm
Install UI Style Kit CSS
```
npm install ui-style-kit-css@2.1.0
```
02
Imports
Load the ownership-separated stack
```
import "ui-style-kit-css/visual.css";
```

CDN

Use immutable CDN links

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

Adoption path

ui-style-kit-icons

UI Style Kit Icons

Adopt semantic SVG artwork that follows the selected UI style without a layout dependency.

01
npm
Install UI Style Kit Icons
```
npm install ui-style-kit-icons@1.0.0
```

Imports

Load the ownership-separated stack

import "ui-style-kit-icons/css.css";
import "ui-style-kit-icons/element";

CDN

Use immutable CDN links

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-icons@1.0.0/dist/ui-style-kit-icons.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/ui-style-kit-icons@1.0.0/dist/ui-style-kit-icons.js"></script>

Adoption path

interactive-surface-css

Interactive Surface CSS

Adopt portable state mechanics with the package's neutral standalone presentation.

npm

Install Interactive Surface CSS

npm install interactive-surface-css@1.5.0

Imports

Load the ownership-separated stack

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

CDN

Use immutable CDN links

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/interactive-surface-css@1.5.0/standalone-preset.css">

Compose two independent layers

Adoption path

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

Layout plus UI

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

npm

Install Layout and UI

npm install layout-style-css@3.0.0 ui-style-kit-css@2.1.0

Imports

Load the ownership-separated stack

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

CDN

Use immutable CDN links

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

Adoption path

ui-style-kit-css + ui-style-kit-icons

UI plus icons

Pair UI style tokens with semantic SVG artwork that inherits the selected visual language.

npm

Install UI and Icons

npm install ui-style-kit-css@2.1.0 ui-style-kit-icons@1.0.0

Imports

Load the ownership-separated stack

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

CDN

Use immutable CDN links

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.1.0/dist/ui-style-kit.visual.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-icons@1.0.0/dist/ui-style-kit-icons.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/ui-style-kit-icons@1.0.0/dist/ui-style-kit-icons.js"></script>

Adoption path

layout-style-css + interactive-surface-css

Layout plus interaction

Combine responsive geometry with standalone interaction surfaces and states.

npm

Install Layout and Interaction

npm install layout-style-css@3.0.0 interactive-surface-css@1.5.0

Imports

Load the ownership-separated stack

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

CDN

Use immutable CDN links

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

Adoption path

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

UI plus interaction

Feed UI theme paint into the canonical state engine without adopting layout structure.

npm

Install UI and Interaction

npm install ui-style-kit-css@2.1.0 interactive-surface-css@1.5.0

Imports

Load the ownership-separated stack

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

CDN

Use immutable CDN links

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

Library resources

One job per package

Adopt one layer or all four. Every package remains independently useful, documented, and versioned.

01
Structure
layout-style-css
Responsive shells, wrappers, grids, panes, and switchable layout personalities.
v3.0.0Recommended entry pointlayout-style-css
Repository (opens in a new tab)Wiki (opens in a new tab)npm package (opens in a new tab)Live demo (opens in a new tab)
View Layout Style CSS standalone proof (opens in a new tab)
02
Identity
ui-style-kit-css
Visual systems, palettes, native-element coverage, and display modes.
v2.1.0Recommended entry pointui-style-kit-css/visual.css
Repository (opens in a new tab)Wiki (opens in a new tab)npm package (opens in a new tab)Live demo (opens in a new tab)
View UI Style Kit CSS standalone proof (opens in a new tab)
03
Iconography
ui-style-kit-icons
Semantic SVG artwork that automatically follows the selected UI style.
v1.0.0Recommended entry pointui-style-kit-icons/element
Repository (opens in a new tab)Wiki (opens in a new tab)npm package (opens in a new tab)Live demo (opens in a new tab)
View UI Style Kit Icons standalone proof (opens in a new tab)
04
Behavior
interactive-surface-css
Consistent hover, focus-visible, active, pressed, and disabled states.
v1.5.0Recommended entry pointinteractive-surface-css/standalone-preset.css
Repository (opens in a new tab)Wiki (opens in a new tab)npm package (opens in a new tab)Live demo (opens in a new tab)
View Interactive Surface CSS standalone proof (opens in a new tab)

Two paths forward

Build with the system or with its studio.

Explore the open CSS ecosystem directly, or bring Sanderson Technology Enterprises into a specialized delivery engagement.

For developers

Adopt the system at your own pace.

Start with one package or use the complete cascade. Every layer stays independently versioned, documented, and testable.

Review the source on GitHub

For organizations

Turn interface ambition into a delivery system.

Sanderson Technology Enterprises builds creator-owned platforms, private systems, admin tools, and operational workflows for specialized businesses.

Work with Sanderson Technology Enterprises

Design every layer.Keep one interface.

Structure

One workspace. Four proven layers.

Northstar interface language

Decisions stay visible

Layout laboratory: geometry with intent

UI laboratory: preset paint on one semantic system

Identity without structural lock-in

Semantic roles stay readable

Native laboratory: platform semantics, exposed paint

Input type atlas

File selector states

Fully Themed

Progressively Enhanced

Platform Owned

Non Rendered

Standard parts

Vendor Specific parts

Platform Owned parts

Non Rendered parts

Public native tokens

One meaning, styled for every interface.

Interaction laboratory: one predictable mechanics layer

Six semantic variants

Three surface levels

State-collision console

Prove every adoption boundary.

Install all four, or adopt by layer.

One job per package

layout-style-css

ui-style-kit-css

ui-style-kit-icons

interactive-surface-css

Build with the system or with its studio.

Adopt the system at your own pace.

Turn interface ambition into a delivery system.

Design every layer.
Keep one interface.