Pier Sass framework

Lightweight primitives for enduring design systems

Pier ships mixins, layout patterns, and UI components that compile with your Sass build. Import one file for the full experience or cherry-pick only what you need.

@use "pier/_all" as *; @include pier-apply-theme($pier-theme);

Theme swatches

Background
Surface
Accent
Success
Warning
Danger

Typography

Fluid type powered by clamp() and the pier-text mixin. Roles for lead copy, small text, and code provide consistent rhythm.

Display heading

Section heading

Sub heading

Supporting heading

Minor heading
Eyebrow

Pier keeps defaults human sized so you can ship without tuning every variable. The lead class uses relaxed line height and the accent display family.

Regular body copy inherits the fluid scale. Use the .muted role for de-emphasised text and .mono for inline code like npm run build:css.

Small text helps with captions and legal copy. The mixin accepts size, weight, line height, and tracking tokens.

body { @include pier-text(md); }
code { @include pier-text(sm, $line: 1.6); }

Layout primitives

.stack

Stacked item one
Stacked item two
Stacked item three

.cluster

Tag Cluster Wraps Nicely

.sidebar

Primary column

Use the sidebar pattern for documents with a persistent aside. Set --sidebar-side for custom ratios.

Secondary

On small screens this collapses into a vertical stack.

Cover layout

Center any content block both vertically and horizontally. Perfect for hero panels and callouts.

Buttons

Forms

Outline variant with default spacing.

Looks great!
🔒
Use at least eight characters.
Required field.
📁 Drag a file or click to browse

Utilities

Spacing utilities

Use m-*, p-*, and gap-* classes to set consistent spacing.

Alignment helpers Aligned

Sizing

.w-50
.max-w-prose keeps text readable.

Utilities compile only when their partials are imported. Disable the feature flags in pier/_utilities.scss to tree-shake them.

Tooltips

Tooltips are CSS-only. Reduced motion preferences disable transitions.

Accessibility & states

Focus rings respect prefers-reduced-motion and colour tokens for each theme.