# 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: premium-dashboard (Premium Dashboard).
- Direction: Dashboard-first MVP style with stronger density, metrics, cards, tables, and command surfaces.
- Presets are compact SDTK-DESIGN guidance adapted from reference patterns, not imported runtime code.

## Typography

- Use Inter-like system sans with tabular numerals for metrics.
- Use a 34/24/18/14/12px hierarchy with heavier labels and compact metadata.
- Reserve monospace only for technical IDs, timestamps, or compact metric labels.
- Do not scale font size with viewport width; keep letter spacing at 0.

## Color Tokens

- `color-bg`: #0B1020 for a deep operational shell or #F5F7FB for light dashboards.
- `color-surface`: #FFFFFF for light cards or #111827 for dark panels.
- `color-text`: #111827 on light surfaces and #F8FAFC on dark surfaces.
- `color-muted`: #64748B for secondary text.
- `color-primary`: #0F766E for primary actions and active states.
- `color-accent`: #2563EB for one chart or selected metric highlight.
- `color-border`: #D8E0EA for light mode or rgba(255,255,255,0.10) for dark panels.

## Surface / Background Strategy

- Use a structured dashboard shell with cards, tables, and status surfaces. Shadows can be slightly stronger but must stay functional.

## 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: Primary CTA should be compact and task-oriented, such as Add lead or Review pipeline.

## 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 higher density: 12px row gaps, 14-16px card padding, aligned KPI tracks, and scannable table rows.

## Table / Dashboard Density

- Lead with 4 KPI cards, then a pipeline/list region. Keep status, follow-up, and note snippets visible without opening details.

## 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

- KPI card: label, value, trend, comparison.
- Pipeline panel: status pill, count, next action.
- Command surface: compact primary action plus one secondary filter/control.

## Mobile Layout Rules

- Stack metric cards into two columns then one column; avoid horizontal scrolling for core lead data.
- 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: Status color must always pair with text. Keep focus rings visible on dense controls.
- 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.