foundry-nextgen-frontend

name

foundry-nextgen-frontend

description

Build elegant frontend UIs following Microsoft Foundry's NextGen Design System using Vite + React + pnpm. Use when creating dashboards, agent builders, data grids, entity management interfaces, or any application matching Foundry's refined dark-themed aesthetic. Triggers on requests for Foundry-style UI, NextGen design system, Microsoft Foundry interfaces, or enterprise admin dashboards with data tables, detail panels, and charts.

Microsoft Foundry NextGen Frontend Skill

Build elegant, production-ready interfaces following Microsoft Foundry's NextGen Design System - a refined neutral dark-themed design language with minimal purple accents for primary actions only.

⚠️ CRITICAL: Color Usage Rules

Purple (#8251EE / #A37EF5) is ONLY for:

• Primary action buttons (filled background)
• Active tab indicators (2px underline)
• Row selection indicators (left border bar)
• Active sidebar navigation icons
• Links and interactive text
• Progress indicators and sliders (track fill)
• Focus rings on inputs

Everything else uses NEUTRAL DARK GREYS:

• Backgrounds: Near-black and dark greys (#0A0A0A, #141414, #1C1C1C)
• Cards/Surfaces: Dark grey (NOT purple-tinted)
• Text: White (#FFFFFF), grey (#A1A1A1), muted (#6B6B6B)
• Secondary buttons: Grey outline with white text (NOT purple)
• Borders: Subtle dark grey (#2A2A2A, #333333)
• Inactive tabs: Grey text (#6B6B6B)

Preferred Stack

Vite + React + pnpm - Fast, modern, elegant.

pnpm create vite@latest my-foundry-app --template react-ts
cd my-foundry-app
pnpm install
pnpm add lucide-react recharts

Core Design Tokens

:root {
  /* =================================
     BACKGROUNDS - Neutral Dark Greys
     ================================= */
  --bg-page: #0A0A0A;         /* Page background - near black */
  --bg-sidebar: #0D0D0D;      /* Sidebar and topbar */
  --bg-card: #141414;         /* Cards, panels, dialogs - dark grey */
  --bg-surface: #1C1C1C;      /* Elevated surfaces */
  --bg-elevated: #242424;     /* Dropdowns, popovers */
  --bg-hover: #2A2A2A;        /* Hover states */
  --bg-active: #333333;       /* Pressed states */

  /* =================================
     TEXT - Neutral Whites/Greys
     ================================= */
  --text-primary: #FFFFFF;    /* Main body text - pure white */
  --text-secondary: #A1A1A1;  /* Secondary text - medium grey */
  --text-muted: #6B6B6B;      /* Placeholder, disabled, inactive tabs */
  --text-disabled: #4A4A4A;   /* Disabled text */
  --text-link: #A37EF5;       /* Links - this can be purple */

  /* =================================
     BRAND PURPLE - Use Sparingly!
     ================================= */
  --brand-primary: #8251EE;   /* Primary buttons, active indicators */
  --brand-hover: ;     
  : ;     
  : (, , , );  
  : ;      

  
  : ;   
  : ;  
  : ;   
  : ;    

  
  : ;
  : (, , , );
  : ;
  : (, , , );
  : ;
  : (, , , );
  : ;

  
  : ;
  : ;
  : ;
  : ;
  : ;
  : ;

  
  : ;
  : ;
  : ;
  : ;

  
  : -apple-system, BlinkMacSystemFont, , sans-serif;
}

Component Color Summary Table

Component	Uses Purple?	Actual Colors
Primary Button	✅ YES	Purple bg (#8251EE), white text
Secondary Button	❌ NO	Transparent bg, grey border (#333), white text
Cards	❌ NO	Dark grey bg (#141414), grey border (#2A2A2A)
Page Background	❌ NO	Near-black (#0A0A0A)
Sidebar	❌ NO	Dark grey bg (#0D0D0D)
Active Tab	✅ YES	White text + purple underline
Inactive Tab	❌ NO	Grey text (#6B6B6B)
Row Selection	✅ YES	Purple left indicator bar
Sidebar Active Icon	✅ YES	Purple icon color
Sidebar Inactive Icon	❌ NO	Grey icons (#6B6B6B)
Input Fields	❌ NO	Dark grey bg (#1C1C1C), grey border
Primary Text	❌ NO	White (#FFFFFF)
Secondary Text	❌ NO	Grey (#A1A1A1)
Data Table Headers	❌ NO	Grey text (#A1A1A1)
Links	✅ YES	Purple text (#A37EF5)

Button Examples

{/* ✅ CORRECT: Primary button uses purple */}
<button className="btn-primary">Create</button>

{/* ✅ CORRECT: Secondary button uses GREY, not purple */}
<button className="btn-secondary">Cancel</button>

{/* ❌ WRONG: Don't use purple for secondary buttons! */}
<button className="bg-purple-900 border-purple-700">Cancel</button>

.btn-primary {
  background: var(--brand-primary);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-md);
}
.btn-primary:hover { background: var(--brand-hover); }

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  padding: 8px 16px;
  border-radius: var(--radius-md);
}
.btn-secondary:hover { background: var(--bg-hover); }

Card Examples

{/* ✅ CORRECT: Card uses neutral dark grey */}
<div className="card">
  <h3>Card Title</h3>
  <p>Description in grey</p>
</div>

{/* ❌ WRONG: Don't use purple for cards! */}
<div className="bg-purple-900 border-purple-700">...</div>
<div style={{background: '#2B1D44'}}>...</div>

/* Cards are NEUTRAL GREY, not purple */
.card {
  background: var(--bg-card);    /* #141414 */
  border: 1px solid var(--border-default);  /* #2A2A2A */
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

Critical Don'ts ❌

• Don't use purple backgrounds for cards, panels, or surfaces - use #141414
• Don't use purple-tinted backgrounds (#2B1D44, #1A1326) - use #141414, #1C1C1C
• Don't use lavender/purple text (#E1CEFC, #AF86F5) - use white #FFFFFF or grey #A1A1A1
• Don't use purple borders except on focused inputs
• Don't make everything purple - purple is ONLY for primary CTAs and active indicators
• Don't use purple for secondary buttons - use grey outline
• Don't use light backgrounds - dark-theme-only system
• Don't use rounded-full buttons - use 4-8px radius
• Don't over-animate - subtlety is elegance

Critical Do's ✅

• Use neutral dark greys (#0A0A0A, #141414, #1C1C1C) for ALL backgrounds
• Use white (#FFFFFF) for primary text
• Use grey (#A1A1A1) for secondary/muted text
• Reserve purple (#8251EE) ONLY for:
  • Primary buttons
  • Active tab underlines
  • Active sidebar icons
  • Row selection indicators
  • Links
• Use grey outlines for secondary buttons
• Use subtle grey borders (#2A2A2A) sparingly

File References

• Design Tokens: See references/design-tokens.md for complete color, typography, and spacing scales
• Components: See references/components.md for Badge, Button, DataGrid, Tabs, Input, Panel specs
• Patterns: See references/patterns.md for page layouts (Entity List, Detail Page, Dashboard)