01-Core — Governance & Core

Foundation layer for configuration, prefixes, and external dependencies.

Layer Constitution

The core layer establishes the CSS layer order for the entire system.

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

Namespace Prefixes

StyleScape uses consistent prefixes for all generated classes and custom properties.

Type Prefix Example
Namespace ss .ss-button
Custom Properties --ss- --ss-color-primary
Typography ss-type- .ss-type-h1
Layout ss-layout- .ss-layout-grid

External Dependencies

External CSS files and third-party integrations are loaded in this layer.

  • Font imports
  • Icon libraries
  • Third-party component styles

Governance

Configuration and feature flags for the design system.

// Feature flags
$ss-enable-dark-mode: true;
$ss-enable-rtl: false;
$ss-enable-print-styles: true;
$ss-enable-reduced-motion: true;