Interface Systems Lab

Interface Systems Lab is an interactive observatory for four coordinated, independently useful interface packages. It demonstrates how structure, visual identity, iconography, and interaction can share one semantic HTML contract.

• Product owner: Sanderson Technology Enterprises
• Live site: sanderson-technology-enterprises.github.io/interface-systems-lab
• Source: Sanderson-Technology-Enterprises/interface-systems-lab
• Deployment target: GitHub Pages

Ecosystem resources

Layer	Package	Repository	Wiki	npm	Demo
Structure	layout-style-css@3.0.0	Repository	Wiki	npm	Live demo
Identity	ui-style-kit-css@2.1.0	Repository	Wiki	npm	Live demo
Iconography	ui-style-kit-icons@1.0.0	Repository	Wiki	npm	Live demo
Behavior	interactive-surface-css@1.5.0	Repository	Wiki	npm	Live demo

Adoption matrix

Every package is independently useful. The showcase documents and renders all supported combinations so teams can begin with one responsibility and add layers without changing ownership boundaries.

Path	Packages	Recommended entry points
Layout only	Layout	layout-style-css
UI only	UI	ui-style-kit-css/visual.css
Icons only	Icons	ui-style-kit-icons/css.css, ui-style-kit-icons/element
Interaction only	Interaction	interactive-surface-css/standalone-preset.css
Layout + UI	Layout, UI	ui-style-kit-css/visual.css, layout-style-css
UI + icons	UI, icons	ui-style-kit-css/visual.css, ui-style-kit-icons/css.css, ui-style-kit-icons/element
Layout + interaction	Layout, interaction	interactive-surface-css/standalone-preset.css, layout-style-css
UI + interaction	UI, interaction	ui-style-kit-css/visual.css, ui-style-kit-css/interactive-surface-theme.css, interactive-surface-css/state-core.css
Canonical all-four	Layout, UI, icons, interaction	ui-style-kit-css/visual.css, ui-style-kit-css/interactive-surface-theme.css, interactive-surface-css/state-core.css, layout-style-css, ui-style-kit-icons/css.css, ui-style-kit-icons/element

Install with npm

Install the exact aligned releases:

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

Then load the package entry points in ownership order. UI Style Kit establishes paint and theme tokens, UI Style Kit Icons supplies semantic SVG artwork, Interactive Surface adds state mechanics, and Layout Style owns final geometry. Layout Style CSS 3.0.0 is a clean-break structural release: use its intrinsic grid and pane primitives, canonical recipe and area attributes, and application-owned container queries for product-specific topology.

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";

Use the libraries locally

The site itself installs the libraries as direct dependencies. Global CSS entry points load from app/layout.tsx, while app/components/UiIcon.tsx registers the UI Style Kit Icons custom-element runtime.

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";

Use the CDN

For static HTML consumers, keep this exact order in the document head:

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

The versions are intentionally pinned so production interfaces do not change when a package publishes a new release.

Isolated integration fixtures

The integration laboratory builds deterministic iframe fixtures from the exact installed package exports before local development or artifact inspection:

npm run fixtures:build

The predev, prebuild, and prebuild:pages hooks run the generator automatically. Generated files live under public/fixtures/generated/ and are intentionally ignored by Git. Each fixture copies CSS from local, pinned node_modules package exports; it does not load runtime styles from a CDN.

Validate the catalog, package versions, copied bytes, safe paths, semantic hooks, and deterministic output with:

npm run test:fixtures

Quality gate

Run the full source, export, and rendered browser gate before handoff:

npm run quality

quality includes formatting, linting, type checks, unit/source contracts, deterministic fixture safety and byte-parity checks, the GitHub Pages export build, export verification, exhaustive Chromium desktop/mobile QA, and representative Firefox and WebKit coverage.

Search ownership verification

Optional search-console verification is configured at build time through the server-owned GOOGLE_SITE_VERIFICATION and BING_SITE_VERIFICATION variables. Both values are blank by default in .env.example; the export omits each meta tag until a real, non-empty token is supplied. Never commit production tokens.

GitHub Pages project sites cannot publish the organization host's root /robots.txt from an individual repository. After the separately approved Pages-source handoff, submit the canonical sitemap directly in Google Search Console and Bing Webmaster Tools instead of relying only on project-scoped robots discovery:

https://sanderson-technology-enterprises.github.io/interface-systems-lab/sitemap.xml

Company and privacy

The developer path leads directly to the source, package resources, and exact adoption recipes. Organizations can work with Sanderson Technology Enterprises on creator-owned platforms, private systems, admin tools, and operational workflows.

The static showcase currently includes no analytics or tracking integration and sets no first-party cookies. It stores only the selected Lab UI configuration in browser localStorage; that preference remains on the device and is not transmitted by the site.

Local CSS policy

This project exists to demonstrate four packages, so local CSS should stay small. Prefer library classes such as ly-wrapper, ly-section, ly-grid, ly-card-grid, ly-stack, ly-cluster, ly-surface, ly-app-shell, and interactive-surface before adding a project-specific class.

Use app/globals.css only for site-specific glue: brand marks, the custom observatory orbit, a small number of semantic helper styles, and responsive connections that the packages cannot infer from the markup.

Shared markup contract

The libraries coordinate through four root attributes while preserving semantic HTML:

<main
  class="ly-root"
  data-ly-layout="bento"
  data-ui="minimal-saas"
  data-theme="midnight-gold"
  data-mode="dark"
>
  <!-- Semantic application content -->
</main>

Hero observatory interaction

The hero's InterfaceObservatory is intentionally interactive. The orbit controls select one ecosystem layer, update the package summary, and expose repository, wiki, npm, and demo links for that selected package.

When changing this component, keep the orbit controls as real buttons with visible focus states and aria-pressed state. If the visual treatment changes back toward pure decoration, remove button affordances instead of leaving non-functional clickable-looking dots.