sprig-design

sprig-design contains the shared design primitives used across the sprig and prose ecosystem.

This repository is intentionally small and boring.

It defines:

• three base font sizes (tiny, small, body)
• heading sizes (h1, h2, h3)
• line-height rhythm
• spacing tokens
• (eventually) semantic colors and typography tokens

It does not include:

• components
• layout systems
• CSS resets
• texture generation
• JavaScript

sprig-design exists to make calm, readable interfaces repeatable.

Usage

sprig-design is pure CSS.

Import the stylesheet you need (or index.css for everything), and apply the namespace to the part of your app that should use sprig’s design language.

Example:

<div class="sprig-design">
  <!-- sprig UI, docs, or prose-rendered content -->
</div>

@import '@sprig-and-prose/sprig-design/index.css';

All design tokens are exposed as CSS variables under the .sprig-design namespace.

Font Sizes

sprig-design uses exactly three base text sizes:

• --sp-font-tiny: 0.75rem (12px) — non-critical / tertiary text only
• --sp-font-small: 0.875rem (14px) — smallest "critical" text
• --sp-font-body: 1rem (16px) — default everyday text (including prose)

Plus heading sizes:

• --sp-font-h1: 3rem (48px) — upper bound
• --sp-font-h2: 1.5rem (24px)
• --sp-font-h3: 1.25rem (20px)

Philosophy

sprig-design favors:

• small, constrained scales
• semantic naming
• explicit opt-in
• calm defaults

It is designed to coexist with other systems, not replace them.

Status

This package is evolving.

Versions are published as 0.x while the design language settles.