:::warning AUTO-GENERATED — do not edit
This page is generated from the MCP server snapshot content/guide-mcp.json.
Edit the source MCP server (not this file), then run npm run generate.
:::
Design Tokens
The authoritative design tokens for Rystad dashboards.
{
"colors": {
"primary": {
"50": "#E8F0FE",
"100": "#B8D4FC",
"200": "#88B8FA",
"300": "#589CF8",
"400": "#2880F6",
"500": "#0064D9",
"600": "#0050AE",
"700": "#003C82",
"800": "#002857",
"900": "#00142B"
},
"secondary": {
"50": "#FFF3E0",
"100": "#FFE0B2",
"200": "#FFCC80",
"300": "#FFB74D",
"400": "#FFA726",
"500": "#FF9800",
"600": "#FB8C00",
"700": "#F57C00",
"800": "#EF6C00",
"900": "#E65100"
},
"neutral": {
"0": "#FFFFFF",
"50": "#F8F9FA",
"100": "#F1F3F5",
"200": "#E9ECEF",
"300": "#DEE2E6",
"400": "#CED4DA",
"500": "#ADB5BD",
"600": "#868E96",
"700": "#495057",
"800": "#343A40",
"900": "#212529"
},
"semantic": {
"success": "#28A745",
"warning": "#FFC107",
"error": "#DC3545",
"info": "#17A2B8"
},
"chart": [
"#0064D9",
"#FF9800",
"#28A745",
"#DC3545",
"#9C27B0",
"#00BCD4",
"#FF5722",
"#607D8B"
]
},
"typography": {
"fontFamily": {
"primary": "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
"mono": "'JetBrains Mono', 'Fira Code', monospace"
},
"fontSize": {
"xs": "0.75rem",
"sm": "0.875rem",
"base": "1rem",
"lg": "1.125rem",
"xl": "1.25rem",
"2xl": "1.5rem",
"3xl": "1.875rem",
"4xl": "2.25rem"
},
"fontWeight": {
"regular": 400,
"medium": 500,
"semibold": 600,
"bold": 700
},
"lineHeight": {
"tight": 1.25,
"normal": 1.5,
"relaxed": 1.75
}
},
"spacing": {
"xs": "0.25rem",
"sm": "0.5rem",
"md": "1rem",
"lg": "1.5rem",
"xl": "2rem",
"2xl": "3rem",
"3xl": "4rem"
},
"borderRadius": {
"sm": "0.25rem",
"md": "0.5rem",
"lg": "0.75rem",
"xl": "1rem",
"full": "9999px"
},
"shadows": {
"sm": "0 1px 2px rgba(0, 0, 0, 0.05)",
"md": "0 4px 6px rgba(0, 0, 0, 0.07)",
"lg": "0 10px 15px rgba(0, 0, 0, 0.1)",
"xl": "0 20px 25px rgba(0, 0, 0, 0.15)"
},
"breakpoints": {
"sm": "640px",
"md": "768px",
"lg": "1024px",
"xl": "1280px",
"2xl": "1536px"
},
"zIndex": {
"dropdown": 1000,
"sticky": 1020,
"fixed": 1030,
"modal": 1040,
"popover": 1050,
"tooltip": 1060
},
"shadcnOverrides": {
"description": "Rystad-specific overrides for shadcn CSS variables. Baked into index.css at scaffold time.",
"light": {
"--background": "0 0% 100%",
"--foreground": "210 11% 15%",
"--card": "0 0% 100%",
"--card-foreground": "210 11% 15%",
"--popover": "0 0% 100%",
"--popover-foreground": "210 11% 15%",
"--primary": "222.58, 54.39%, 22.35%",
"--primary-foreground": "0 0% 100%",
"--secondary": "25.56, 75.7%, 58.04%",
"--secondary-foreground": "0 0% 100%",
"--muted": "210 17% 95%",
"--muted-foreground": "215 14% 34%",
"--accent": "210 17% 95%",
"--accent-foreground": "210 11% 15%",
"--destructive": "354 70% 54%",
"--destructive-foreground": "0 0% 100%",
"--border": "214 20% 88%",
"--input": "214 20% 88%",
"--ring": "222.58, 54.39%, 22.35%",
"--radius": "0.5rem",
"--chart-1": "222.58, 54.39%, 22.35%",
"--chart-2": "25.56, 75.7%, 58.04%",
"--chart-3": "134 61% 41%",
"--chart-4": "354 70% 54%",
"--chart-5": "282 68% 43%"
},
"dark": {
"--background": "210 11% 15%",
"--foreground": "210 17% 95%",
"--card": "210 11% 19%",
"--card-foreground": "210 17% 95%",
"--popover": "210 11% 19%",
"--popover-foreground": "210 17% 95%",
"--primary": "210 100% 50%",
"--primary-foreground": "0 0% 100%",
"--secondary": "25.56, 75.7%, 58.04%",
"--secondary-foreground": "0 0% 100%",
"--muted": "215 14% 25%",
"--muted-foreground": "215 14% 64%",
"--accent": "215 14% 25%",
"--accent-foreground": "210 17% 95%",
"--destructive": "354 70% 54%",
"--destructive-foreground": "0 0% 100%",
"--border": "215 14% 25%",
"--input": "215 14% 25%",
"--ring": "210 100% 50%",
"--chart-1": "210 100% 50%",
"--chart-2": "33 100% 55%",
"--chart-3": "134 61% 50%",
"--chart-4": "354 70% 60%",
"--chart-5": "282 68% 55%"
}
}
}