Founday Design System
Interactive design system extracted from the Figma file W32edVsk3tnXN7dFKF0lvE via MCP. Covers foundations, components and the 4 flows of the Replenishment module — ready for handoff and implementation.
Goals
- Consolidate Founday's visual language into reusable tokens.
- Reduce rework between Design and Eng with an executable specification (HTML + CSS vars).
- Serve as a reference for heuristic audits, critiques and onboarding of new designers.
Principles
Clarity, hierarchy and data density — in that order.
01 · Clarity before decoration
Neutral typography, monochromatic palette, functional accents. Color means state, not style.
02 · Density with breathing room
Dense tables (row 56px), cards with 24px padding. Users do a lot of scan reading — preserve quiet zones.
03 · Action always visible
Primary CTAs in solid black, always in the top-right corner. A single primary action per screen.
Colors
Neutral palette with functional accents. Base confirmed in Figma: #0a0a0a, #717182, #e5e7eb.
Neutral
Semantic
Surfaces
Typography
Inter 400/500/600. Tight scale (12 → 32), generous line-height for long reading.
Spacing
4pt grid. Use tokens, never arbitrary values.
--s-1 · 4px--s-2 · 8px--s-3 · 12px--s-4 · 16px--s-5 · 20px--s-6 · 24px--s-8 · 32px--s-10 · 40px--s-12 · 48px--s-16 · 64pxCard padding = --s-6. Gap between sections = --s-8. Grid gutter = --s-6.
Radius
Smooth. 4–12px for elements, full for avatars and dots.
Elevation
Four levels. Base surfaces use xs; popovers use lg.
Icons
Stroke 1.5, rounded corners, sizes 14/16/20. Source: Lucide (feather-like).
Input & Field
Height 36, radius 8, subtle border. Focus state with blue ring.
Select
Same height as input. Muted background when inactive (cf. Repeats, Facility Type).
Checkbox
Badge
Pills for count, status and inline indicators.
Segmented / Day Picker
Two compact controls used in the scheduling form.
Segmented — Run request
Day picker — Repeats every
Tabs
Indicator with blue underline. Active state in semibold weight.
Active tab: ongoing. Click tabs to switch.
Card
Base container for any content — radius 12, subtle border, padding 24.
Configuration Setup
Select the warehouses and inventory items to include in your workflow.
Table
High density, hover row, uppercase 12px header.
| Name | Created | Current Warehouse | Locations | Est. Sales Increase | Replen Units |
|---|
Screen · Replenishment (Home)
Request list with status tabs, search and primary CTA.
Replenishment
| Name | Created | Current Warehouse | Locations | Est. Sales Increase | Replen Units |
|---|
Screen · Step 1 · New Replenishment
Scheduling form with selective scope.
Step 1 of 2
New Replenishment
Configure your inventory request settings and schedule.
Screen · Step 2 · Configuration Setup
Selects primary warehouse, geographic coverage and products.
Configuration Setup
Select the warehouses and inventory items to include in your workflow.
Define geographic coverage
Select products
Screen · Step 3 · Review & Submit
Review screen with pre/post replenishment coverage.
Fall Season 2024
Central Distribution Hub
| Product Details | Current Units | Current Coverage | Replen Units | Coverage after Replen |
|---|
W32edVsk3tnXN7dFKF0lvE) — 4 top-level frames analyzed (1:112 Home, 1:2 Step 1, 1:405 Step 2, 1:513 Step 3) + 1 symbol (Menu, 1:377). shadcn/radix vocabulary detected. Base colors confirmed: #0a0a0a, #717182, #e5e7eb. Semantic palette inferred from screenshots (warning, accent, success).