# Design System

## Product Direction

- Use a calm, work-focused interface that helps a solo founder move from idea to repeated MVP workflow.
- Favor clarity, scannability, and obvious next actions over decorative marketing composition.
- Primary repeated action: Add first lead.

## Visual Preset

- Preset: minimal-saas (Minimal SaaS).
- Direction: Clean solo-founder SaaS default with practical hierarchy, quiet surfaces, and low-decoration components.
- Presets are compact SDTK-DESIGN guidance adapted from reference patterns, not imported runtime code.

## Typography

- Use system UI, Segoe UI, Roboto, Helvetica, Arial, sans-serif.
- Use a clear 32/24/18/15/13px hierarchy for page, section, card, body, and label text.
- Keep letter spacing at 0 except optional uppercase micro-labels at 0.04em.
- Do not scale font size with viewport width; keep letter spacing at 0.

## Color Tokens

- `color-bg`: #F7F8FA for the application background.
- `color-surface`: #FFFFFF for panels, forms, and lists.
- `color-text`: #1F2933 for primary text.
- `color-muted`: #667085 for secondary text.
- `color-primary`: #2563EB for the main CTA and selected states.
- `color-success`: #0F8A5F, `color-warning`: #B7791F, `color-danger`: #B42318.
- `color-border`: #D9DEE7 for quiet dividers and input borders.

## Surface / Background Strategy

- Use white cards on a soft gray page. Prefer borders over shadows and keep radius at 8px or less.

## Spacing

- Base grid: 4px.
- Tight gap: 8px for label-control and icon-text pairs.
- Standard gap: 16px for form fields and list rows.
- Section gap: 24px for screen regions.
- Page padding: 20px mobile, 32px desktop.
- Keep fixed-format controls stable with explicit min-height and predictable grid tracks.

## Button Style

- Primary button: filled `color-primary`, white label, 40px minimum height, 8px radius.
- Secondary button: white surface, `color-border` outline, primary text.
- Icon buttons: square 36px control with tooltip when the icon is not self-evident.
- Disabled state: 45% opacity with no hover elevation.
- CTA copy should use verbs tied to the workflow, such as Add, Save, Continue, or Review.
- Preset CTA treatment: One filled primary CTA per screen; secondary actions should be outlined or text-only.

## Card Style

- Use cards only for repeated records or genuinely framed tool surfaces.
- Radius: 8px maximum.
- Border: 1px solid `color-border`; avoid heavy shadows.
- Card content order: status, title, next action, supporting metadata.
- Avoid nested cards and decorative gradient backgrounds.
- Preset density rule: Use medium density: 16px form/list gaps, 24px section gaps, and compact repeated cards.

## Table / Dashboard Density

- Use 3-4 summary cards, a simple list/table, status pills with text, and an obvious empty state.

## Form Style

- Place labels above inputs with concise helper text only when it reduces uncertainty.
- Required fields should be obvious before submit.
- Inline errors must identify the field and preserve entered values.
- Prefer segmented controls or toggles for short option sets.
- Forms should ask for the minimum needed before the first useful action.

## Component Recipe Hints

- Metric card: label, value, short delta.
- Lead card/table row: status, name, next action, note metadata.
- Form row: label, input, helper or inline error.

## Mobile Layout Rules

- Collapse grids to one column under 760px and keep controls at least 44px tall.
- Keep text within parent containers at mobile widths and avoid viewport-scaled type.

## Tone

- Use practical language around lead, follow-up, note, and pipeline; avoid enterprise jargon.
- Keep copy short, direct, and action-oriented.
- Empty states should explain what is missing and offer one next action.
- Success copy should confirm progress without celebration-heavy language.

## Accessibility Baseline

- Preset accessibility emphasis: Prioritize contrast, visible focus, labeled inputs, and text labels for status.
- Maintain visible keyboard focus for all interactive controls.
- Use 4.5:1 contrast for body text and 3:1 for large text and essential UI boundaries.
- Do not rely on color alone for status; pair status color with text or icon labels.
- All form inputs require labels; all icon-only controls require accessible names.
- Mobile targets should be at least 44px by 44px where practical.
- Error and success states must be announced through text in the layout.

## Boundaries

- This design system is guidance for SDTK-DESIGN artifacts, not generated production CSS.
- No Figma, Lovable, v0, or full app-builder replacement behavior is claimed.
- No network call, Pro entitlement, `.sdtk/atlas`, or SDTK-WIKI output is required.