Interface Systems Lab is an interactive observatory for three coordinated, independently useful CSS libraries. It demonstrates how structure, visual identity, and interaction can share one semantic HTML contract.
- Live site: foscat.github.io/interface-systems-lab
- Source: Foscat/interface-systems-lab
- Deployment: GitHub Pages through the repository's verified Actions workflow
| Layer | Package | Repository | Wiki | npm | Demo |
|---|---|---|---|---|---|
| Structure | layout-style-css@1.1.2 |
Repository | Wiki | npm | Live demo |
| Identity | ui-style-kit-css@2.0.3 |
Repository | Wiki | npm | Live demo |
| Behavior | interactive-surface-css@1.3.0 |
Repository | Wiki | npm | Live demo |
Install the package layers in dependency order:
npm install layout-style-css@1.1.2 ui-style-kit-css@2.0.3 interactive-surface-css@1.3.0Then load styles in cascade order. Identity establishes the design tokens, behavior consumes those tokens, and structure loads last so layout utilities retain their intended geometry.
@import "ui-style-kit-css/with-bridge.css";
@import "interactive-surface-css/interactive-surface.css";
@import "layout-style-css/bridge.css";
@import "layout-style-css";Keep this exact order in the document head:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ui-style-kit-css@2.0.3/dist/ui-style-kit.with-bridge.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/interactive-surface-css@1.3.0/interactive-surface.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layout-style-css@1.1.2/dist/layout-style-css.min.css">The versions are intentionally pinned so production interfaces do not change when a package publishes a new release.
The libraries coordinate through four root attributes while preserving semantic HTML:
<main
class="ly-root"
data-layout="bento"
data-ui="minimal-saas"
data-theme="midnight-gold"
data-mode="dark"
>
<!-- Semantic application content -->
</main>