StyleScape Architecture

Layered CSS architecture with numbered prefixes for explicit load order.

Layer Constitution

StyleScape uses a numbered prefix system for explicit CSS layer ordering. Each layer has a specific role in the cascade and should be loaded in order.

Layer Purpose Demo
01-core Governance, prefixes, external dependencies View Demo
11-reset Browser resets and normalization View Demo
12-lexicon Design tokens (color, spacing, typography scales) View Demo
13-rhythm Vertical rhythm and baseline grid View Demo
21-typography Character and paragraph typography View Demo
22-flow Content flow and spacing View Demo
23-layout Grid, flexbox, and layout patterns View Demo
24-appearance Visual appearance (borders, shadows, etc.) View Demo
31-modules Reusable component modules View Demo
32-utilities Utility classes View Demo
33-overrides Final override layer View Demo
91-development Development-only styles View Demo

CSS Layer Order

@layer ss.reset,
       ss.lexicon,
       ss.rhythm,
       ss.typography,
       ss.flow,
       ss.layout,
       ss.appearance,
       ss.components,
       ss.utilities,
       ss.overrides;