Secondary surface

Context flows automatically.

This whole section sits on .surface-secondary. Headings, body copy, links, and button labels auto-pick the right tokens through the cascade — no per-element overrides required.

Primary action Secondary action A link on secondary →

Typography Scale

Fluid type using clamp(). Resize the preview to watch it breathe.

Heading 1 — The quick brown fox

Heading 2 — jumps over the lazy dog

Heading 3 — pack my box with

Heading 4 — five dozen liquor jugs

Heading 5 — sphinx of black quartz

Body text — Design tokens are the single source of truth for your visual language. They describe colors, typography, spacing, and elevation in a way that can be shared across platforms and frameworks. When the tokens change, the entire interface adapts in a single, coherent motion.

Components

Buttons, badges, and cards share the token language.

Primary Success Warning Danger Info

Color

Every brand starts with color. Your palette propagates automatically to every surface.

Type

Fluid scales keep your hierarchy responsive across devices without media-query gymnastics.

Space

A unified spacing scale enforces rhythm across components and layouts.

Cards on colored surfaces

The same .card markup, placed inside different surface contexts. Headings, body text, and buttons auto-select the right role tokens through the cascade.

on-primary

Card on primary

This card sits on a primary background. All text, headings, and button labels pick their on-primary variants automatically.

Ghost Outline

on-secondary

Card on secondary

Same markup, different context. The secondary surface cascade remaps every role token — no per-element overrides.

Ghost Outline

on-surface

Card on surface

The default: sits on the neutral surface token. Shown here side-by-side so you can compare all three contexts on the same card component.

Primary Ghost

Card Hover Effects

Sitestream card patterns — headline visible by default, description revealed on hover. Full polish requires the Sitestream framework.

Fade Variant

Description fades into view with a subtle gradient backdrop when the card is hovered.

Slide-up Variant

Description slides upward from the footer as the headline nudges up to make room.

Overlay Variant

Dark gradient intensifies on hover, revealing fuller description copy over the image.

Team Collaboration

Connecting cross-functional teams through clear systems and shared design tokens.

Software Development

Product work built on composable primitives, not one-off screens.

UX Design

Interfaces that stay calm at rest and reward curiosity with motion on demand.

Scroll Animations

Viewport-triggered entrance animations. Scroll back up to retrigger where supported.

↑

Fade up

Default entrance — element rises and fades in as it enters the viewport.

←

Slide from left

Use to lead the eye toward the next block of content.

→

Slide from right

Pairs with slide-from-left for balanced two-column reveals.

◎

Scale in

Gentle zoom-in for hero callouts and key statistics.

○

Fade only

Quiet option — opacity without movement, for dense content.

✦

Staggered

Combine with delay utilities to cascade multiple tiles.

Feature Grid

Sitestream-style feature tiles pairing iconography with short copy.

◆

Composable tokens

Every component reads from the same spacing, color, and type scale.

✱

Framework swap

Flip between Tailwind, Bootstrap, Foundation, Sitestream, or pure CSS output.

◐

Dark-mode aware

Neutral ramp auto-inverts with a single attribute flip.

▲

Export-ready

Copy section HTML with or without resolved inline styles.

Data Table

Token	Category	Purpose
`--color-primary`	Color	Primary brand accent
`--text-h1`	Typography	Fluid heading level 1
`--space-lg`	Spacing	Default vertical rhythm
`--radius-md`	Shape	Standard component radius
`--shadow-md`	Elevation	Raised surface

Pricing

Three tiers, one token system. The featured plan inherits the primary color.

Starter

$0 /mo

1 project
Community support
Basic exporters
Local presets

Choose Starter

Testimonials

What teams say after wiring their design system to a single source of truth.

LSD collapsed three days of palette bikeshedding into a 20-minute working session. We left with tokens our engineers actually shipped.

Mira Okafor Design Lead, Northwind

Being able to swap frameworks live and watch the same showcase respond is the demo that finally got our director to greenlight the rebrand.

Daniel Reyes Front-end Architect, Helio Labs

The exporter output dropped straight into our Tailwind config. No translation layer, no design-to-code handoff doc.

Priya Shah Staff Engineer, Quill

Alerts & Code

Status messaging styled by semantic color tokens, plus a token-aware code surface.

Heads up

A new version of the exporter is available in the drawer.

Saved

Your preset “Brand v3” was written to local storage.

Contrast low

Body text on surface fails WCAG AA. Consider darkening the text token.

Import failed

Could not parse pasted CSS. Check that variables use the --color-* prefix.

import { createStore, resolveTokens } from './state';

const store = createStore(defaultState);

store.subscribe((state) => {
  const tokens = resolveTokens(state);
  applyToIframe(tokens, state.framework);
});

store.patch({ tokens: { colors: { primary: '#7c5cff' } } });

Frequently asked

Answers to the questions we hear most often from teams evaluating LSD.

Can I use LSD with my existing design system?

Yes. Paste your existing CSS variables into the import panel and LSD will parse them into editable tokens. From there, every change re-exports cleanly back to your chosen framework.

Does it work with Tailwind, Bootstrap, and Foundation?

All three plus Sitestream and a framework-agnostic CSS variables mode. Swap the target from the drawer and the preview re-renders with the matching stylesheet loaded live.

How do I share presets with my team?

Presets can be saved locally for personal iteration, or pushed to the shared Bun server. Teams on the Pro plan get cloud sync so everyone stays on the same tokens.

Can I export to a format my build pipeline understands?

LSD ships exporters for CSS variables, SCSS, Tailwind config, Bootstrap overrides, Foundation settings, and Sitestream tokens. Pick a target and copy the output straight into your repo.

Is there an AI-assisted mode?

The MCP server exposes your tokens and presets to Claude and other agents, so you can ask for "a fintech palette with tighter spacing" and let the agent draft a preset you can then refine by hand.

Product timeline

A snapshot of how the LSD showcase has evolved.

2026 · Q1

Scaffold & palette engine

Vite shell lands. The 26-template HSLA-difference palette engine is preserved verbatim from the legacy tool and wrapped in a typed ColorToken layer.
2026 · Q1

Designer suite complete

Token editors, six exporters, copy-HTML bridge, dark-mode variants, OKLCH contrast badges, and per-section copy ship together.
2026 · Q2

Bun API & MCP server

A local Bun HTTP server backs shared presets, and an MCP stdio server exposes the same surface to Claude and other AI agents.
2026 · Q3

AI authoring

Natural-language token generation and live HTML authoring land, letting designers describe a brand and watch the showcase converge on it.

By the numbers

A few vanity metrics to show how trend indicators and display type react to token changes.

Active users 48.2k ↑ 12% vs last month

Uptime 99.98% ↑ 0.02% vs last quarter

Avg. response 142ms ↓ 4% vs last week

Presets shared 3,812 ↑ 28% vs last month

Designing systems, not screens.