Design

Starter Design

Neutral product UI direction with palette, type, spacing, components, and motion guidance.

Starter

hero / neutral starter system

Starter design system

A deliberately neutral starter kit with clear positioning, practical palette roles, readable type, simple spacing, reusable components, and restrained motion examples for future design previews.

starter preview

Base components before brand voice.

Palette

Type

Motion

palette / exact color swatches / roles

Color roles

Canvas

#ffffff

Base page canvas

Ink

#111827

Primary text

Surface

#f8fafc

Subtle section background

Border

#d1d5db

Component borders

Muted

#e5e7eb

Disabled surfaces

Primary

#2563eb

Default CTA

typography / token scale / line-height / tracking

Type hierarchy

typography.display

48px / 700 / 1.1

Starter headline

Hero and section heads

typography.title

24px / 600 / 1.25

Component title

Cards and modules

typography.body

16px / 400 / 1.55

Readable default body copy.

Paragraphs

typography.label

12px / 600 / 1.2

LABEL

Metadata labels

components / controls / states / forms

Signature components

component.button

Button

Primary, secondary, disabled, hover, and focus states.

component.card

Card

Simple bordered container for repeated content.

component.input

Input

Neutral form field with visible focus/error space.

component.motion

Motion Tile

Small transition specimen for starter motion guidance.

component.input-field / focus / error

Example field

Shows the form/input rule because the source design defines inputs, search, filters, fields, or forms.

spacing / radius / elevation depth

spacing.sm 12px

spacing.md 24px

spacing.lg 48px

rounded.sm 4px

rounded.md 8px

rounded.lg 12px

responsive behavior / breakpoints / media

mobile

Single-column stack with full-width controls.

tablet

Two-column component specimens.

desktop

Three-column grid for palette, type, and components.

# Starter Design

## Positioning

Starter Design is a neutral product interface direction for registry previews, documentation, and SaaS landing pages. It should feel precise, quiet, and immediately usable.

## Palette

- Background: `oklch(0.99 0.004 255)`
- Foreground: `oklch(0.18 0.025 255)`
- Primary: `oklch(0.42 0.14 250)`
- Accent: `oklch(0.93 0.03 250)`
- Success: `oklch(0.52 0.16 150)`
- Warning: `oklch(0.67 0.18 65)`
- Destructive: `oklch(0.58 0.22 25)`

## Type

- Family: Inter, system UI fallback
- Display: 48px, 56px line-height, 600 weight
- Heading: 32px, 40px line-height, 600 weight
- Body: 16px, 28px line-height, 400 weight
- Caption: 14px, 20px line-height, 500 weight

## Spacing

- Page gutters: 24px mobile, 32px tablet, 48px desktop
- Section padding: 64px mobile, 96px desktop
- Card padding: 20px compact, 24px default
- Grid gap: 16px compact, 24px default

## Components

- Buttons use 6px radius, medium weight labels, and clear hover states.
- Cards use 8px radius, a single border, and restrained shadow.
- Forms use visible labels and native inputs with strong focus rings.
- Navigation uses text links and compact spacing.

## Motion

- Motion should be functional and brief.
- Use 150ms for hover/focus transitions.
- Use 240ms for tab, disclosure, and panel transitions.
- Avoid decorative motion in dense product UI.