:::warning AUTO-GENERATED — do not edit This page is generated from the MCP server snapshot content/guide-angular-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
  }
}