Developer preview · design tokens

Next SST Template

This page verifies that fluid typography, colors, spacing, and feedback components resolve correctly. Resize the browser to see values change; click the toast buttons to preview live notifications.

How to use this page

  1. Resize the window — fluid type and spacing should scale smoothly.
  2. Compare the hierarchy block — Display should be largest, then Hero, Heading, Subheading.
  3. Click the toast buttons — live Sonner toasts (including auto-dismiss demo).
  4. Landscape — wider than tall; narrow-band xs-lds / sm-lds pills when applicable.
  5. Global CSS utilities — scroll hide, shake, loading bars, sparkles (section below).
  6. Viewport height — drag the bottom of the browser window to see the fluidVH bar grow.
  7. Dark mode — switch OS appearance (light/dark); tokens follow automatically.
  8. Remove this page when real UI replaces it.

What's covered

Included on this page

  • All 17 typography roles + 6 compact heading overrides
  • Semantic + toast + error colors
  • Spacing scales (all 6) + padding
  • Spinner (inline sm/md/lg + overlay demo) + live Sonner toasts + dismissInfoToast
  • globals.css utilities + landscape / xs-lds / sm-lds + fluidVH

Global CSS utilities

Classes from globals.css — font helpers, scrollbar hide, shake, and loading/sparkle animations.

Font weight helpers

font-template-sans-normal (400)

font-template-sans-medium (500)

font-template-sans-semibold (600)

font-template-sans-bold (700)

hide-scrollbar

Scroll line 1 — scrollbar hidden

Scroll line 2 — scrollbar hidden

Scroll line 3 — scrollbar hidden

Scroll line 4 — scrollbar hidden

Scroll line 5 — scrollbar hidden

Scroll line 6 — scrollbar hidden

Scroll line 7 — scrollbar hidden

Scroll line 8 — scrollbar hidden

shake

Validation field (shakes on click)

animate-account-loading-bar

animate-welcome-progress

60s loop — watch the bar fill slowly.

Sparkles

Modal decoration

Landscape

This box reacts to viewport shape: taller than wide = portrait, wider than tall = landscape. Resize the window, pick a device in DevTools, or rotate a phone — same rule everywhere.

Portrait — taller than wide

xs-lds inactivesm-lds inactive

Green pills = active band. Width: xs-lds 320–639px, sm-lds 640–767px. Shape: landscape orientation or aspect ≥ 4/3 (same rule as globals.css).

Viewport height (fluidVH)

Drag the bottom of the browser window (not just the responsive frame width). Bar height scales with 100vh via fluidVH().

fluidVH bar

Viewport height: … · Range 320–900px height → 40–240px bar

Type hierarchy (largest → smallest)

At your current width, the largest line should be Display, then Hero, then Heading, then Subheading.

Display — page marketing headline

Hero — primary hero headline

Heading — section title (h1/h2)

Subheading — section subtitle

Typography (all roles)

Display

The quick brown fox jumps.

Hero

The quick brown fox jumps.

Heading

The quick brown fox jumps.

Subheading

The quick brown fox jumps.

Lead

The quick brown fox jumps.

Body

The quick brown fox jumps.

Body lg

The quick brown fox jumps.

Body sm

The quick brown fox jumps.

Badge

The quick brown fox jumps.

Label

The quick brown fox jumps.

Nav

The quick brown fox jumps.

Button

The quick brown fox jumps.

Input

The quick brown fox jumps.

Item

The quick brown fox jumps.

Helper

The quick brown fox jumps.

Error

The quick brown fox jumps.

Legal

The quick brown fox jumps.

Compact headings (nav / menus)

Larger heading styles used on smaller breakpoints — common for nav labels and mobile menu CTAs.

xs → sm scale

The quick brown fox jumps.

xs → md scale

The quick brown fox jumps.

sm → md scale

The quick brown fox jumps.

sm → lg scale

The quick brown fox jumps.

md → lg scale

The quick brown fox jumps.

lg → xl scale

The quick brown fox jumps.

Nav CTA stack

The quick brown fox jumps.

Colors

Semantic tokens from CSS variables (injected via @template/shared/tokens). Dark mode: use your OS appearance setting — there is no in-app toggle yet.

Primary
Secondary
Muted
Accent
Destructive
Success
Brand grey
Primary / 20

Error surface

error-surface, error-border, error-text*

Toasts (Sonner)

Click a button below — a live toast appears in the corner (same as production).

Static cards below show the CSS variable colors — the buttons above trigger live toasts.

Success (static)

toast-success-* colors

Info (static)

toast-info-* colors

Error (static)

toast-destructive-* colors

Spinner

Production LoadingSpinner — sm, md (with label), lg; button below previews overlay mode.

Loading…

Spacing & padding

Each row demonstrates one scale. The gray area should grow or spread as you resize — that is the fluid spacing working. Layout differs per scale on purpose (padding vs gap).

container

Inner padding (p-template-*-container)

content

section

Vertical section rhythm (py-template-*-section)

section block

component

Padding around components (p-template-*-component)

chip

button

Horizontal button padding (px-template-*-button)

Button

form

Gap between fields (gap-template-*-form)

Field AField B

nav

Nav item padding (px-template-*-nav)

Nav link

Height — button & input

Use min-h-* when text may wrap; h-* for single-line controls.

Animations

Loading dots loop automatically. Use Replay fade-in or hover the wiggle button to preview micro-interactions.

Loading indicators

dot-wave (staggered)
dot-pulse (staggered)

Micro-interactions

throbGentle scale pulse
Demo exaggerates shake — production animate-wiggle is ±0.15°
clock-pulse — ring expands & fades
fade in