# IA Design Language — Figma-trained product designer guide **MANDATORY** when the user asks for Item Smart, Baseprice, planning, pricing, or “match our Figma”. Read this **before** generating UI. Compose **Impact Nova** components only — this doc maps Figma intent to Nova tokens and patterns. **Source files (canonical):** | Product | Figma file | Reference node | |---------|------------|----------------| | IA Design System v3.1 | [IA-Design-System-v3.1](https://www.figma.com/design/a3elYamUGSeoXJiHPyJaVx/IA-Design-System-v3.1?node-id=43847-13043&m=dev) | `43847:13043` Dashboard shell | | Item Smart V3 | [Itemsmart_V3_May2025](https://www.figma.com/design/LHeXzFSqMoimKclEZJuQqK/Itemsmart_V3_May2025?node-id=12981-190049&m=dev) | `12981:190049` Item management dashboard | | Baseprice V3 | [Baseprice_V3](https://www.figma.com/design/UZra9BoBuZc6pgobmysBQt/Baseprice_V3?node-id=14884-265189&m=dev) | `14884:265189` KPI overview chart card | Also read: `impact-nova://tokens`, `impact-nova://product-quality-bar`, `impact-nova://real-world-patterns`. --- ## Designer mindset (how IA products feel) 1. **Chrome before content** — Users never land on a raw grid. Breadcrumb → optional filter strip → collapsible KPI bands → white data card. 2. **Quiet canvas, loud cards** — Page wash is cool grey-blue; every data surface is **white** with **8px** radius and subtle border or shadow. 3. **Density without clutter** — Controls are **32px** tall. Tables default **compact**. Numbers right-aligned; links in brand blue. 4. **Hierarchy through weight, not size jumps** — Most UI is **14px Manrope**. Titles use **SemiBold/ExtraBold**, never random font sizes. 5. **Filters are first-class** — Applied filters are always visible as chips after apply; panel is a **sidebar-tab sheet**, not inline forms on the page. 6. **Motion is subtle** — Collapsible sections fade height; no bouncy animations on enterprise grids. --- ## App shell (all three Figma files) ``` ┌─ Sidebar 64px (#0D152C) ─┬─ Header 52px (white, shadow) ─────────────┐ │ Active: 4px green bar │ Logo │ Title 16px ExtraBold │ actions │ ├──────────────────────────┼─ Breadcrumb 56px (sticky) ─────────────────┤ │ │ Home › Module [tertiary actions right] │ │ ├─ Filter strip 48px (white, optional) ────┤ │ │ Applied filters: [chips] … All Filters │ │ ├─ Page body (#EFF2FA / bg-brand-subtle) ───┤ │ │ KPI accordion → white sections │ │ │ Table/chart card (white, rounded-md) │ └──────────────────────────┴──────────────────────────────────────────┘ ``` | Region | Figma spec | Impact Nova / Tailwind | |--------|------------|-------------------------| | Sidebar width | 64px | `Sidebar` offcanvas, `id="app-sidebar"` | | Sidebar bg | `#0D152C` | `--color-sidebar-background` / navy token | | Active nav indicator | 4px `#3BB273` right edge | Sidebar active state (built-in) | | Header height | 52px | `Header` | | Header bg | white | default | | Header shadow | `0 8px 10px/2 rgba(0,0,0,0.06)` | built into `Header` | | Header padding | 24px × 8px | `HeaderLeft` / `HeaderRight` | | App title | Manrope **800** 16px `#0D152C` | `HeaderTitle` + `HeaderBadge` “Prototype” | | Avatar | 36px circle, green `#3BB273` / `#31935F` | `Avatar size="sm"` + green fallback | | Ask Alan / bot CTA | `#0D152C` fill, `#2AC2EE` 1.2px border | `HeaderBotButton` when enabled | | Page canvas | `#EFF2FA` | `bg-brand-subtle` via `PageShell` | | Content inset | 24px horizontal from main column | `px-6` on page sections | **Header actions (right cluster, gap 24px):** Command palette icon → Help → Notifications → Avatar. Icon buttons are **ghost**, grey icon, **20–24px** SVG. Tooltips show effective keybindings. --- ## Breadcrumb bar | Spec | Value | |------|-------| | Height | 56px | | Horizontal padding | 24px | | Home icon | 16×16 | | Separator | `>` character, same line as labels | | Current page label | Manrope **600** 14px, `#0D152C` or body color | | Right actions | Tertiary text buttons **32px** height — “Hide filters”, “Hide KPIs”, currency dropdown | **Impact Nova:** `PageStickyHeader` / `BreadcrumbHeader` with `headerActions` slot for tertiary `Button variant="tertiary" size="sm"`. **Never** put workflow tabs in the breadcrumb row — tabs belong in `DataTableToolbar`. --- ## Filter strip (Item Smart `12981:190059`, IA DS `43847:13058`) | Spec | Value | |------|-------| | Height | 48px | | Background | white | | Vertical padding | 8px | | Label | “Applied filters:” — Body 14px `#1F2B4D` | | Chip / tag | 28–32px height, 8px horizontal padding inside tag | | Dimension layout | `Label` + `Tag` pairs separated by **vertical hairlines** | | Right cluster | Chevron group + divider + **“All Filters”** button (102px) | **Chip content pattern:** `Department` **Rugs** · `Channel` **All** — label in label color, value in tag. **Impact Nova:** `FilterStrip` with `filters`, `savedFilters`, `onAllFiltersClick`, `onFilterRemove`, `onClearAll`. **Collapse:** Wrap strip in `CollapsibleSection` (Item Smart uses collapsible filter strip toggled from breadcrumb / Option+S). **Phase rule:** Filter strip renders **only after** filters are applied. Before apply → empty state only. --- ## Empty state (pre-filter) | Copy (Item Smart) | Element | |-------------------|---------| | Title | “Welcome to your planning workspace!” | | Description | “Click Select Filters to load your items” | | CTA | **Select filter** (primary) | **Impact Nova:** `EmptyStateView` / `EmptyContainer` + `FilterPanel` on CTA. --- ## Filter panel (Item Filters) | Spec | Value | |------|-------| | Pattern | Right sheet with **left sidebar tabs** | | Tabs | Product *, Channels *, Plan Period *, Landing Screen, Saved Filters | | Tab icons | 16px, with optional count badges | | Field height | 32px | | Field border | `#C3C8D4`, radius **8px** | | Field padding | 12px horizontal | | Floating labels | 12px `#60697D`, positioned above-left of field | | Footer | Cancel (secondary) · Save filter (secondary) · **Apply filters** (primary) | **Impact Nova:** `FilterPanel`, `FilterPanelSidebar`, `FilterPanelBody`, `FilterPanelFooter`. --- ## KPI sections ### Item Smart dashboard accordion (`accordion/item management`) Two stacked white panels inside page body: 1. **KPIs** — collapsible header row: light grey pill button `#F5F6FA`, **SemiBold 14px** “KPIs”, chevron, horizontal scroller of KPI cards below. 2. **Item groups** — **ExtraBold 14px** section title, primary CTA “Create new product group” (`#4259EE` fill, white 14px Medium), mini-table of groups + metrics. | KPI card rail | Spec | |---------------|------| | Scroller | `HorizontalScroller`, `estimateSize={448}`, `controlsPosition="split"` | | Card width | ~448px fixed | | Card gap | 16px (`pr-4` between cards) | | Pin control | Pin/Unpin icon on card | | Reorder | Drag-sort (`@dnd-kit` + `SortableContext`) | **Impact Nova:** `Accordion` for section chrome; `SummaryMetricCard` or recipe `KpiCard`; template `useKpiCardOrder` + `kpi-order-store`. ### Baseprice KPI overview chart (`14884:265189`) White card **1296×513**, padding **24px**, radius **8px**. | Region | Spec | |--------|------| | Title | “KPI overview” — **Bold 14px** `#0D152C`, tracking **-0.14px** | | Header controls | Toggle “Detailed breakdown” + **Select KPI** dropdown + **View by** dropdown | | Dropdown | 200px wide, 32px tall, label “Select KPI” / “View by” at 12px `#60697D` | | Chart area | Stacked columns: `#6682D2` (base), `#89D1AB` (promo), `#EDD77F` (optimized) | | Axis labels | 12px `#60697D` (Y), **SemiBold 14px** (X months) | | Legend | 10px rounded squares, 12px labels, gap **12px** between series | **Impact Nova:** `Card` wrapper + `Chart` (Highcharts) with IA series colors; header controls via `Select` + `Switch` + tertiary links. --- ## Data tables (Item Smart item groups grid) | Element | Figma | Code | |---------|-------|------| | Table card | white, `rounded-md`, fills remaining viewport | `DataTable` + `module-table-container` | | Header row height | **80px** | column group headers | | Header bg | `#F5F6FA` | AG Grid header class / Nova theme | | Header text | **Bold 14px** `#0D152C` or `#404B62` | | | Body row height | **46px** (compact) | `DataTableDefaultDensity` compact | | Cell padding | 16px horizontal, 13px vertical | | | Borders | `#D9DDE7` subtle horizontal, `#C3C8D4` vertical on header | | | Link cells | `#3649C6` Medium 14px | `LinkCellRenderer` | | Numeric cells | right-aligned `#1F2B4D` | `ag-right-aligned-cell` | | Info pill | bg `#F1F3FE`, text `#5267F4`, pill radius 1000px | `Badge variant="subtle"` or info badge | | Toolbar | Inside white card top — workflow tabs + actions + ⋮ menu | `DataTableToolbar` | **Mandatory:** `DataTableSheet` → Columns + Format tabs, `singleClickEdit`, Update/Cancel + `toast()`. --- ## Typography (Manrope — IA DS v3.1) | Token | Weight | Size / Line | Use | |-------|--------|-------------|-----| | Heading4 | 800 | 16 / 24 | App title in header | | Heading6 / 7 / 8 | 600–800 | 14 / 21 | Section titles, accordion triggers | | Body2 / MediumMedium | 500 | 14 / 20 | Default UI text, buttons, table cells | | Body3 / Body4 | 500 | 12 / 16 | Labels, legend, filter chip labels | | SmallBold | 700 | 14 / 21 | KPI subsection titles | **Never** use Inter, system-ui, or ad-hoc px sizes. **Never** use `font-normal` for section headers — use **semibold** or **extrabold**. --- ## Color semantics (Figma variables → Tailwind) | Role | Hex | Tailwind / CSS var | |------|-----|-------------------| | Page wash | `#EFF2FA` | `bg-brand-subtle` | | Title text | `#0D152C` | `text-content-primary` / title token | | Body text | `#1F2B4D` | `text-content-primary` | | Subtitle | `#31416E` | `text-content-secondary` | | Label / muted | `#60697D` | `text-content-tertiary` | | Border default | `#C3C8D4` | KPI card borders, inputs | | Border subtle | `#D9DDE7` | table gridlines | | Surface lighter | `#F5F6FA` | accordion triggers, table header bg | | Primary CTA | `#4259EE` / `#5267F4` | `Button variant="default"` | | Primary link | `#3649C6` | table links | | Success | `#3BB273` | avatar, positive diff, sidebar active | | Destructive | `#E15656` | alerts | | Info badge bg | `#F1F3FE` | “Data Heavy”, “New Styles” pills | | Chart series (pricing) | `#6682D2`, `#89D1AB`, `#EDD77F` | Highcharts `colors[]` | | Sidebar navy | `#0D152C` | sidebar shell | --- ## Spacing & radius (4px grid) | Token | px | Usage | |-------|-----|-------| | pd-08 | 8 | Button padding, filter strip vertical | | pd-12 | 12 | Input horizontal padding, small gaps | | pd-16 | 16 | Section padding, table cell | | pd-24 | 24 | Page/card horizontal padding | | gap-12 | 12 | Header icon cluster, filter chip groups | | gap-24 | 24 | Header right section | | r3 | 8px | Buttons, inputs, cards, accordion | | r12 | 12px | Avatar | **Card shadow (small):** `0 0 16px 2px rgba(0,0,0,0.06)` on floating panels — prefer Nova `Card` over custom box-shadow. --- ## Z-index stack (page chrome) | Layer | z-index | |-------|---------| | Breadcrumb sticky | 30 | | Filter strip sticky | 100 | | Filter panel / sheets | overlay (Nova default) | | Command palette | top portal | --- ## Product-specific patterns ### Item Smart (planning) - Three phases: empty → filter panel → workspace (strip + KPI accordion + grid). - **Pinned KPI welcome band** — white `rounded-xl` card above KPI accordion; shows cards user pinned via card hover actions; toggled from breadcrumb tertiary actions. - **KPI section toolbar** — right-aligned row inside KPI accordion: Difference toggle, Versions select, Save view, Expand; sits above horizontal scroller rail. - **KPI rail** — `HorizontalScroller` + `@dnd-kit` drag reorder; order persisted per module (`kpi-order-store`). - **Item Groups accordion** — page-level white table card (not inside AG Grid); status badges per group row. - **Alert Groups accordion** — same pattern as Item Groups; priority badges (`high` / `medium` / `low`). - Receipt workflow tabs (**Sales / Inventory / Receipts**) inside **toolbar**, not page root. - Unsaved grid edits → `Prompt` before filter change (`FilterChangePrompt`). - **Alert-style toasts** — `ToastNotification` registers `window.toastNotification`; renders `Alert` inside toast with optional action button (e.g. Download on export). - **Module tabs pattern** (Approval Hub) — secondary tabs below breadcrumb for sub-modules within a route; not mixed with filter strip. - **Notification panel** — header bell opens `NotificationPanel` sheet; inbox/archived + category tabs; seed data via `notification-store`. ### Baseprice (pricing / analytics) - KPI overview **chart card** with metric + period dropdowns in card header. - Stacked bar legend semantics: volume / promo / optimized (or Current / Finalized / IA Recommended). - “Detailed breakdown” toggle — use `Switch` + conditional detail panel. ### IA Design System (Campaign comparison reference) - Breadcrumb: “Campaign comparison” with **All currency** dropdown + primary action in breadcrumb right. - Same shell as Item Smart; swap module body for campaign widgets. --- ## Anti-patterns (design review reject) | Wrong | Right | |-------|-------| | `bg-white` full page | `bg-brand-subtle` page + white cards | | `bg-canvas-wash` on module pages | `bg-brand-subtle` | | Grid visible before filters | Empty state first | | Native `