@open-inwoner/design-tokens/src/brand/openinwoner/color.tokens.json

Design tokens for Open Inwoner

{
  "oip": {
    "color": {
      "$extensions": {
        "dte.metadata": {
          "groupDescription": "Globally tweak commonly used colors."
        }
      },
      "primary": {
        "value": "#0065BD",
        "comment": "The primary color makes up a large part of the theme, it is used in buttons for example.",
        "$extensions": {
          "dte.metadata": {
            "isCurated": true,
            "category": "color"
          }
        }
      },
      "primary-light": {},
      "secondary": {
        "value": "#006A0F",
        "comment": "The secondary compliments the primary color and serves as the default for text-links.",
        "$extensions": {
          "dte.metadata": {
            "isCurated": true,
            "category": "color"
          }
        }
      },
      "accent": {
        "value": "#E10019",
        "comment": "The accent color is usually the main identity color for a municipality",
        "$extensions": {
          "dte.metadata": {
            "isCurated": true,
            "category": "color"
          }
        }
      },
      "info": {
        "value": "#2566A7",
        "comment": "The dark blue text color for informational states and/or messages.",
        "$extensions": {
          "dte.metadata": {
            "isCurated": true,
            "category": "color"
          }
        }
      },
      "info-light": {
        "value": "#D5E6F6",
        "comment": "The light blue background color for informational states and/or messages.",
        "$extensions": {
          "dte.metadata": {
            "isCurated": true,
            "category": "color"
          }
        }
      },
      "success": {
        "value": "#4A7746",
        "comment": "The dark green text color for success states and/or messages."
      },
      "success-light": {
        "value": "#ecf4ec",
        "comment": "The light green background color for success states and/or messages."
      },
      "warning": {
        "value": "#704000",
        "comment": "The dark orange text color for warning states and/or messages."
      },
      "warning-light": {
        "value": "#ffdcad",
        "comment": "The light orange background color for warning states and/or messages."
      },
      "danger": {
        "value": "#5c000f",
        "comment": "The dark red text color for error/critical states and/or messages."
      },
      "danger-light": {
        "value": "#ffdbe1",
        "comment": "The light red background color for error/critical states and/or messages."
      },
      "bg": {
        "value": "#ffffff",
        "comment": "Background color for the (main) user interface."
      },
      "fg": {
        "value": "#4b4b4b",
        "comment": "Blackish foreground color for the (main) user interface."
      },
      "fg-lighter": {
        "value": "#676767",
        "comment": "Blackish foreground color for lighter text elements (eg date)."
      },
      "fg-muted": {
        "value": "#949494",
        "comment": "Font/foreground color for non-actionable or less-important content."
      },
      "fg-heading": {
        "value": "#000000",
        "comment": "Black foreground color for fully black elements."
      },
      "border": {
        "value": "#d2d2d2",
        "comment": "Default color for borders."
      },
      "focus": {
        "$extensions": {
          "dte.metadata": {
            "stateType": "userAction"
          }
        },
        "border": {}
      },
      "red-notification": {
        "value": "#e50026",
        "comment": "The bright red color for notification badges and texts."
      }
    }
  }
}