# 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: fintech-trust (Fintech Trust).
- Direction: Trust-forward financial style with dense data surfaces, tabular numerals, a restrained palette, and strong status semantics.
- Presets are compact SDTK-DESIGN guidance adapted from reference patterns, not imported runtime code.

## Typography

- Use a precise system sans with tabular numerals enabled everywhere numbers appear: system-ui, Inter, Segoe UI, Roboto, sans-serif.
- Use a 30/22/18/14/12px hierarchy with heavier labels and compact metadata; align figures on the decimal.
- Reserve monospace for account IDs, reference numbers, and timestamps only.
- Do not scale font size with viewport width; keep letter spacing at 0.

## Color Tokens

- `color-bg`: #F4F6FB for the application background.
- `color-surface`: #FFFFFF for balance cards, statements, and tables.
- `color-text`: #0F172A for balances, labels, and primary copy.
- `color-muted`: #5A6678 for secondary metadata and helper text.
- `color-primary`: #1E3A8A deep navy for primary actions and active states.
- `color-accent`: #0E7C66 teal for positive balance highlights and one chart series.
- `color-success`: #1B873F credit/up, `color-warning`: #B7791F pending/review, `color-danger`: #C2330E debit/down or error.
- `color-border`: #DCE2EC for table rules, card edges, and input outlines.

## Surface / Background Strategy

- Use structured white cards and tables with crisp 8-10px radius on a cool page tint; keep rules and dividers hairline. Money and status must read instantly; avoid decorative surfaces that obscure figures.

## 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, explicit, and reassuring (Transfer, Confirm payment); destructive or irreversible actions require a clear confirm step.

## 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 high density: 10-12px table row gaps, aligned numeric columns with right-aligned figures, and scannable statement rows; keep summary cards calm with one headline figure each.

## Depth & Elevation

- Keep surfaces flat and trustworthy with hairline borders; use a single restrained shadow (0 1px 2px rgba(15,23,42,0.08)) for cards and a slightly stronger lift only for modals/confirm dialogs; avoid playful depth.

## Table / Dashboard Density

- Lead with 3-4 balance/KPI cards (tabular figures + trend), then a transactions table with status pills; keep gains/losses signed and color-paired with text.

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

- Balance card: account label, balance (tabular), signed trend, last-updated.
- Transaction row: date, payee, category, signed amount, status pill.
- Confirm dialog: amount, recipient, fee, irreversible-action confirm.
- Status pill: text label plus color (cleared, pending, failed).

## Do's and Don'ts

- Do use tabular numerals and align figures so balances are scannable.
- Do pair every up/down or credit/debit signal with a sign, arrow, and text.
- Don't decorate money surfaces with gradients or imagery that reduce legibility.
- Don't hide the active account's primary action below the fold on mobile.

## Mobile Layout Rules

- Stack balance cards to one column; keep transaction rows readable without horizontal scroll; pin the primary action for the active account.
- 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: Never signal up/down or credit/debit by color alone — pair with sign, arrow, and text; maintain 4.5:1 contrast on figures; keep focus rings visible on dense controls and table actions.
- 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.