Documentation

A framework-agnostic CSS foundation, four packages covering tokens, reset, layouts and components.

Overview

What Socle is, how the four packages stack, and where this documentation comes from.

Getting started

Installing the four packages, declaring the cascade layer order, and the build step every environment needs.

design-tokens

Framework-agnostic primitive and semantic design tokens, authored in DTCG JSON and shipped as CSS custom properties.

component-tokens

Component-scoped CSS design tokens, layer 3 of the architecture, mapping semantic values onto the parts of a component.

css-base

Framework-agnostic CSS foundation, providing a reset, native element styles and layout primitives.

css-components

Framework-agnostic CSS component implementations, driven entirely by component tokens and scoped to @layer components.