Stylescape

Stylescape ships design primitives, component modules, layout patterns and utility classes as a single curated SCSS bundle. Every selector is namespaced and emitted inside a predictable @layer cascade, so the system composes cleanly with application styles without specificity wars.

The output is ordered into named layers, lowest to highest:

1. ss.reset — element resets
2. ss.lexicon — design tokens (color, space, type)
3. ss.rhythm — vertical & baseline rhythm
4. ss.typography — typographic primitives
5. ss.flow — content flow helpers
6. ss.layout — page & frame layouts
7. ss.appearance — surfaces, depth, shadows
8. ss.components — components (buttons, cards, …)
9. ss.utilities — single-purpose helpers
10. ss.overrides — your application overrides

All selectors use the ss- namespace with a layer hint:

• ss-c-* — components / modules (e.g. ss-c-button)
• ss-l-* — layout primitives (e.g. ss-l-frame, ss-l-canvas)
• ss-t-* — typography helpers
• ss-f-* — flow helpers
• ss-a-* — appearance helpers
• ss-o-* — semantic objects
• ss-u-* — utilities (e.g. ss-u-cursor--pointer)

Variants follow BEM: ss-c-button--primary, ss-c-card__header.

Components currently shipped in @layer ss.components:

• accordion, alert, badge, box, breadcrumb
• button, button-group, card, chat, demo
• form, graphic, headline, hero, image
• input, input-group, map, modal, navigation
• pagination, placeholder, popover, preloader, preview
• progress, ribbon, select, social, table
• tabs, tooltip, validation, video

• ss-l-frame — top / sides / bottom shell
• ss-l-page — page-level scaffolds
• ss-l-canvas — full-bleed canvas (with optional viewport / gradient)
• ss-l-interface — pointer-transparent overlay surface
• ss-l-main, ss-l-rail — content rails

• Semantic elements
• Typography
• Media
• Page layout
• Screen layout

npm install stylescape

Then in your SCSS entry:

@use "stylescape";

Or drop the prebuilt bundle into your page:

<link rel="stylesheet" href="/css/stylescape.css">