fc-design-system

Future Capital UI foundations — a living design system and component showcase.

Stack: Vite · React · TypeScript · Storybook · MUI v7 · AG Grid Community 35.2.0

---

Prerequisites

• Node.js LTS (see .nvmrc). Run nvm use if you use nvm.

---

Scripts

Command	Description
npm run dev	Vite showcase at http://localhost:5173
npm run storybook	Storybook at http://localhost:6006
npm run build	Production build of the Vite app
npm run build-storybook	Static Storybook export

---

Stack

MUI

@mui/material + Emotion. ThemeProvider + CssBaseline applied in both src/main.tsx (Vite app) and .storybook/preview.tsx (Storybook canvas).

• Theme: src/theme/fcTheme.ts
• Tokens (TS): src/theme/tokens.ts
• Tokens (CSS vars): src/theme/fc-tokens.css
• Type augmentation: src/theme/mui-augmentation.d.ts

AG Grid

ag-grid-community + ag-grid-react, pinned to 35.2.0. Uses the Theming API (themeQuartz.withParams()). Do not import legacy ag-grid.css or use ag-theme-quartz className.

Enterprise: Production uses AG Grid Enterprise. This repo standardizes look/feel on Community. Before engineering handoff: swap ag-grid-community → ag-grid-enterprise, register the license key, and keep the same 35.x version.

Fonts

Poppins + IBM Plex Mono via Google Fonts — loaded in index.html (Vite) and .storybook/preview-head.html (Storybook).

---

Token reference

Authoritative static lab (local): ../morgue/fc-lab/fc-design-system-v4a.html

Keep tokens.ts and fc-tokens.css in sync whenever the HTML lab changes.

---

Showcase sections

Section	File
Colors	src/sections/Colors.tsx
Typography	src/sections/TypeScale.tsx
Application nav	src/sections/ApplicationNav.tsx
Logos	src/sections/Logos.tsx
Buttons	src/sections/Buttons.tsx
Badges & status	src/sections/Badges.tsx
Alerts	src/sections/Alerts.tsx
Forms	src/sections/Forms.tsx
Metric cards	src/sections/MetricCards.tsx
Surface hierarchy	src/sections/SurfaceHierarchy.tsx
Content cards	src/sections/ContentCards.tsx
Data grid	src/sections/DataGrid.tsx

---

Project docs

• status.md — what's done, what's not, standing conventions
• log.md — change log

---

GitHub

Repo lives at FC-Innovation/fc-design-system (private).

# If remote isn't set yet:
gh repo create FC-Innovation/fc-design-system --private --source=. --remote=origin --push

# Or if the remote exists:
git push -u origin main