# kView Design System For kView INVESTOR

Source: `C:/Users/guill/Downloads/02_kView/Produit & Design/kView (3).zip`.

kView INVESTOR currently serves product routes with Blade/CSS/vanilla JavaScript and
adds Inertia/Vue/TypeScript route by route. Do not import React components from
the design-system ZIP. Extract tokens, icon paths, rules, and interaction
behavior into the owning kView Blade/Vue adapters instead.

The versioned agent contract lives in `.agents/skills/kview_investor-ui-development/`. Package setup and reuse are documented in `dev_guide/kview-ui-packages.md`. Keep these references aligned whenever foundational tokens, typography, asset ownership, reusable component APIs, or accessibility rules change.

The local Storybook-style catalogue is documented in
`dev_guide/kview-component-lab.md` and is available at `/__kview` in local and
testing environments.

## Tokens

- Colors live in `packages/kview-ui-core/resources/css/tokens.css` under `:root`.
- Keep compatibility aliases: `--color-kview`, `--color-kview-light`, `--color-ink`, `--color-border`.
- Preferred semantic tokens: `--primary`, `--accent`, `--slate-*`, `--dark-*`, `--surface*`, `--text-*`, `--success`, `--warning`, `--error`, `--info`, `--pos`, `--neg`.
- Text tokens used on the default light surfaces are guarded at WCAG 2.2 AA:
  `--text-secondary` and `--text-muted` on `--surface`, `--accent-600` on
  `--accent-50`, and `--info-fg` on `--info-bg`.
- Use `--gradient-sidebar`, `--gradient-accent-rail`, `--gradient-brand`, `--gradient-login`, and `--gradient-surface` instead of ad hoc gradients.

## Typography

- Body: `--font-body` = DM Sans.
- Headings/display: `--font-display` / `--font-heading` = Poppins.
- Numeric/technical labels: `--font-mono` = JetBrains Mono.
- kView INVESTOR intentionally keeps `letter-spacing: 0` for app readability, even when the source design-system examples use negative tracking.

## Radius

- `--radius-xs`: 4px, compact details and keycaps.
- `--radius-sm`: 6px, small icon buttons.
- `--radius-md`: 10px, form controls and small panels.
- `--radius-lg`: 14px, popovers.
- `--radius-xl`: 20px, cards and table shells.
- `--radius-pill`: 999px, avatars, badges, pills.

## Motion

- Durations: `--dur-fast` 120ms, `--dur-base` 200ms, `--dur-slow` 320ms, `--dur-page` 500ms.
- Curves: `--ease-out`, `--ease-in-out`, `--ease-spring`.
- Prefer `--transition-fast` or `--transition-base`.
- Always preserve the application-level `prefers-reduced-motion` guard in `resources/css/app.css`.

## Breakpoints

- `--bp-sm`: 640px.
- `--bp-md`: 768px.
- `--bp-lg`: 1024px.
- `--bp-xl`: 1280px.
- `--bp-2xl`: 1536px.
- CSS custom properties cannot be used directly in media query conditions reliably. Use the numeric values and keep them synced with these tokens.

## Icons

- Use `<x-ui.icon name="..." />` in Blade.
- Use `window.kviewIconMarkup(name)` in dynamic vanilla JS HTML.
- Use `KviewIcon` from `@kview/ui-core/vue` in Vue.
- Add names, legacy aliases, fallbacks, and SVG fragments only to
  `packages/kview-ui-core/resources/icons/kview-icons.json`; PHP and TypeScript
  registries adapt this same catalog.
- Icons are inline SVG, `24x24` viewBox, no fill, `currentColor`, stroke `1.75`, round joins/caps.
- Do not add a new icon library for app chrome unless the kView icon set cannot cover the need.

## Component Rules

- Dense SaaS/ERP screens should favor tables, panels, filters, and toolbars over marketing-style cards.
- Cards and table shells use `--radius-card`; controls use `--radius-control`.
- Popovers must sit above sidebars/topbars using `--z-dropdown`, `--z-overlay`, or `--z-modal`.
- Table rows should use density variables: `--d-row-h`, `--d-pad-y`, `--d-pad-x`.
- Use `data-density="compact"` or `data-density="spacious"` only at a deliberate screen/container boundary.