Design every layer.
Keep one interface.

Combine structure, visual identity, and interaction without rebuilding your markup.

Open the workbench View on GitHub

01
Structurelayout-style-css
02
Identityui-style-kit-css
03
Behaviorinteractive-surface-css

Live workbench

The client-ready workbench

Change any control. The product shell, native elements, and interactive states update together.

LayoutBentoStyleMinimal SaaSPaletteMidnight GoldModeDarkApplied live

Good afternoon, Maya.

Your week at a glance

Active projects: 08
On-time delivery: 96%
Client rating: 4.9

Featured projectIn progress

Northstar brand system

Identity refresh, digital guidelines, and launch-ready component foundations.

Progress72%

72%

Four attributes. One shared contract.<main class="ly-root" data-layout="bento" data-ui="minimal-saas" data-theme="midnight-gold" data-mode="dark">

Install

Install the complete system

Package installation follows the ecosystem layers. Stylesheet order follows the cascade: identity, behavior, then structure.

npm

Install all three

npm install layout-style-css@1.1.2 ui-style-kit-css@2.0.3 interactive-surface-css@1.3.0

CSS imports

Load the cascade

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

CDN

Use immutable CDN links

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

Library resources

One job per package

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

01
Structure
layout-style-css
Responsive shells, wrappers, grids, panes, and switchable layout personalities.
v1.1.2
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)
02
Identity
ui-style-kit-css
Visual systems, palettes, native-element coverage, and display modes.
v2.0.3
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)
03
Behavior
interactive-surface-css
Consistent hover, focus-visible, active, pressed, and disabled states.
v1.3.0
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)

Architecture

Three layers. One shared contract.

Each package owns one concern, so geometry, identity, and behavior can evolve independently.

01
Structure
layout-style-css
Responsive shells, wrappers, grids, panes, and switchable layout personalities.
data-layout="bento"
02
Identity
ui-style-kit-css
Visual systems, palettes, native-element coverage, and display modes.
data-ui="minimal-saas"
03
Behavior
interactive-surface-css
Consistent hover, focus-visible, active, pressed, and disabled states.
class="interactive-surface"

Root markup<main class="ly-root" data-layout="bento" data-ui="minimal-saas" data-theme="midnight-gold" data-mode="dark">

Design every layer.Keep one interface.