# 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: ecommerce-retail (E-Commerce Retail).
- Direction: Product-forward storefront style with photography-led cards, a single confident accent for CTA and price, and a sticky cart/checkout rail.
- Presets are compact SDTK-DESIGN guidance adapted from reference patterns, not imported runtime code.

## Typography

- Use a clean geometric/grotesque system sans: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif.
- Use a 36/26/20/15/13px hierarchy; keep product names at 15-16px medium weight and prices at 18-20px bold.
- Use tabular numerals for prices and quantities; keep letter spacing at 0 except optional 0.06em uppercase micro-labels for badges (SALE, NEW).
- Do not scale font size with viewport width; keep letter spacing at 0.

## Color Tokens

- `color-bg`: #FFFFFF for the product canvas; let photography carry the visual weight.
- `color-surface`: #FFFFFF for product cards on a #F6F7F9 alternating page tint.
- `color-text`: #1A1D21 for product names, prices, and primary copy.
- `color-muted`: #6B7280 for secondary metadata, shipping notes, and review counts.
- `color-primary`: #4338CA indigo for the add-to-cart / checkout CTA and active filters.
- `color-accent`: #E8590C pumpkin for price emphasis, sale tags, and the wishlist heart.
- `color-success`: #1B873F in-stock, `color-warning`: #B7791F low-stock, `color-danger`: #C2330E out-of-stock or error.
- `color-border`: #E6E8EB for quiet card edges, dividers, and input outlines.

## Surface / Background Strategy

- Use white product cards with 14-20px corner radius on a soft page tint; let product imagery sit edge-to-edge with gentle rounding. Prefer hairline borders over heavy shadows; reserve a soft lift only for the sticky cart panel.

## 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 dominant filled primary CTA per surface (Add to cart / Checkout); secondary actions (wishlist, compare) stay outlined or icon-only. Keep price and CTA visually paired.

## 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 a responsive product grid (2-4 columns) with 16-20px gutters and generous whitespace around hero and category bands; keep cart/line-item rows compact at 12-14px.

## Depth & Elevation

- Keep most surfaces flat with hairline borders; use a single soft shadow (0 8px 24px rgba(16,24,40,0.10)) only for the sticky cart/checkout rail and modal overlays; product cards lift only on hover, not at rest.

## Table / Dashboard Density

- For seller/order views, use order-status pills with text, a compact line-item table, and clear fulfillment states; do not borrow heavy analytics chrome onto the storefront.

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

- Product card: image, name, price, rating/review count, add-to-cart.
- Cart line item: thumbnail, name, variant, quantity stepper, line total, remove.
- Sticky order summary: subtotal, shipping, total, primary checkout CTA.
- Filter rail: category, price range, in-stock toggle with applied-filter chips.

## Do's and Don'ts

- Do let product photography be the hero; keep chrome quiet around it.
- Do pair price and the add-to-cart CTA so the buying decision is one glance.
- Don't use more than one accent color; reserve the accent for price and sale signals.
- Don't stack nested cards or decorative gradients that compete with product imagery.

## Mobile Layout Rules

- Collapse the grid to two then one column under 760px; pin the add-to-cart / total bar to the bottom on product and cart screens; keep tap targets at least 44px.
- 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 stock or price state by color alone — pair with text and icons; maintain 4.5:1 contrast on price and CTA text; keep focus rings visible on cards, filters, and quantity steppers.
- 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.