Create pipeline-dashboard/public/design-tokens.css:
/* Typography from your brand or choose your own */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
:root {
/* Fonts */
--font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'Courier New', monospace;
/* Colors - Customize these to match your brand */
--color-primary-400: #fb923c;
--color-primary-500: #f97316; /* Orange accent */
--color-secondary-500: #3fb950; /* Success green */
}💡 Tip: Replace the color values with your own brand colors. The primary color is used for accents, highlights, and interactive elements.