Local colors + Markdown export

Design System Studio

Start from a practical preset, tune the core colors, see the whole template update immediately, and export readable design-system notes.

Preset starters

Pick a direction, then tune the colors below.

Color tokens

Every change is saved locally and reflected across the UI.

BackgroundThe page canvas behind every section.SurfaceCards, panels, inputs, and raised areas.TextPrimary copy and headings.Muted textSecondary copy, labels, and metadata.BorderBorders, dividers, and quiet outlines.PrimaryPrimary actions, active states, and highlights.SuccessPositive status and completion feedback.WarningCaution states and important notices.

Starter AppAuto-saved

Live Preview

Selected colors stay visible

Buttons, panels, form fields, status messages, and navigation use the same tokens.

Saved locallyYour palette persists in this browser.

Project name

Primary#0f766e

Used for calls to action and active states.

# Starter App Design System

Generated from Cloudflare Pages PWA Template.

Theme: Light

## Intent
A balanced system for focused app shells, PWA install flows, and compact tools.

Bright surfaces for productivity and scanning.

## Color Tokens
- `--color-background`: #f7f8fb
- `--color-surface`: #ffffff
- `--color-ink`: #151922
- `--color-muted`: #5f6675
- `--color-line`: #d9dee8
- `--color-accent`: #0f766e
- `--color-accent-ink`: #ffffff
- `--color-success`: #15803d
- `--color-warning`: #b45309

## Typography
- Use system UI fonts for fast rendering and native platform feel.
- Keep page headings between 32px and 56px; keep panel headings at 18px to 24px.
- Use 0 letter spacing and 1.45 line height for body copy.

## Spacing
- Use an 8px spacing base.
- Keep content width between 1040px and 1180px on desktop.
- Use 16px mobile gutters and 24px desktop gutters.

## Component Rules
- Use solid buttons for primary actions and quiet bordered buttons for secondary actions.
- Keep cards at 8px border radius unless the card represents a device or browser shell.
- Prefer segmented controls for mode switching and toggles for binary settings.

## Accessibility Notes
- All interactive controls need visible focus states.
- Preserve color contrast at 4.5:1 for body text.
- Use live regions only for state changes that users need to notice immediately.

## PWA And Cloudflare Pages Defaults
- Build command: `npx next build`
- Output directory: `out`
- Keep `output: "export"` in `next.config.ts`
- Keep the app shell, manifest, icons, and service worker deployable as static assets.