{
  "aliases": {
    "accent": {
      "value": "#3559c7"
    },
    "secondary": {
      "value": "#0c1a3d"
    },
    "dark": {
      "value": "#667680"
    },
    "light": {
      "value": "#f6f8f8"
    },
    "white": {
      "value": "#fff"
    },
    "error": {
      "value": "#d24023"
    },
    "success": {
      "value": "#1d8633"
    }
  },
  "props": {
    "n_color_accent": {
      "type": "color",
      "category": "color",
      "name": "n_color_accent",
      "value": "rgb(53, 89, 199)",
      "title": "Color Accent",
      "description": "Accent color for Therapy. Used as primary button background, hero area background, and as a link color. This color provides accessible contrast when used for text on light background.",
      "theme": "nord",
      "originalValue": "{!accent}"
    },
    "n_color_accent_secondary": {
      "type": "color",
      "category": "color",
      "name": "n_color_accent_secondary",
      "value": "rgb(53, 89, 199)",
      "title": "Color Accent Secondary",
      "description": "Used for theming purposes to style the background of the top bar in addition to the navigation header. By default, this aliases the accent color, but can be set to a custom color if necessary.",
      "theme": "nord",
      "originalValue": "{!accent}"
    },
    "n_color_text": {
      "type": "color",
      "category": "color",
      "name": "n_color_text",
      "value": "rgb(12, 26, 61)",
      "title": "Color Text",
      "description": "Default text color. Used as the main text color throughout the UI. Provides good and legible contrast for our content.",
      "theme": "nord",
      "originalValue": "{!secondary}"
    },
    "n_color_text_link": {
      "type": "color",
      "category": "color",
      "name": "n_color_text_link",
      "value": "rgb(53, 89, 199)",
      "title": "Color Text Link",
      "description": "Default link text color for Therapy. Used for all paragraph level links in an user interface.",
      "theme": "nord",
      "originalValue": "{!accent}"
    },
    "n_color_text_weak": {
      "type": "color",
      "category": "color",
      "name": "n_color_text_weak",
      "value": "rgb(54, 67, 74)",
      "title": "Color Text Weak",
      "description": "Weak text color for Therapy. Used for e.g. introduction paragraphs and help texts that are coupled with form elements.",
      "theme": "nord",
      "originalValue": "#36434A"
    },
    "n_color_text_weaker": {
      "type": "color",
      "category": "color",
      "name": "n_color_text_weaker",
      "value": "rgb(102, 118, 128)",
      "title": "Color Text Weaker",
      "description": "Weaker text color for Therapy. Used for e.g. disabled buttons, footers, table headings, captions and placeholder texts.",
      "theme": "nord",
      "originalValue": "{!dark}"
    },
    "n_color_text_weakest": {
      "type": "color",
      "category": "color",
      "name": "n_color_text_weakest",
      "value": "rgb(178, 186, 191)",
      "title": "Color Text Weakest",
      "description": "Weakest text color for Therapy. Used for e.g. disabled input text and placeholder text in focused inputs.",
      "theme": "nord",
      "originalValue": "#B2BABF"
    },
    "n_color_text_on_accent": {
      "type": "color",
      "category": "color",
      "name": "n_color_text_on_accent",
      "value": "rgb(255, 255, 255)",
      "title": "Color Text on Accent",
      "description": "Default text on accent color for Therapy. Used when text sits on the acccent color or a dark background.",
      "theme": "nord",
      "originalValue": "{!white}"
    },
    "n_color_text_error": {
      "type": "color",
      "category": "color",
      "name": "n_color_text_error",
      "value": "rgb(210, 64, 35)",
      "title": "Color Text Error",
      "description": "Default text color for error messages for Therapy. Also used for the danger badge text.",
      "theme": "nord",
      "originalValue": "{!error}"
    },
    "n_color_text_danger": {
      "type": "color",
      "category": "color",
      "name": "n_color_text_danger",
      "value": "rgb(178, 48, 21)",
      "title": "Color Text Danger",
      "description": "Default text color for danger messages for Therapy. Also used for the danger badge text.",
      "theme": "nord",
      "originalValue": "#b23015"
    },
    "n_color_text_success": {
      "type": "color",
      "category": "color",
      "name": "n_color_text_success",
      "value": "rgb(17, 118, 39)",
      "title": "Color Text Success",
      "description": "Default text color for success messages for Therapy. Also used for the success badge text.",
      "theme": "nord",
      "originalValue": "#117627"
    },
    "n_color_text_neutral": {
      "type": "color",
      "category": "color",
      "name": "n_color_text_neutral",
      "value": "rgb(85, 89, 93)",
      "title": "Color Text Neutral",
      "description": "Neutral text color. Used for the neutral badge text.",
      "theme": "nord",
      "originalValue": "#55595d"
    },
    "n_color_text_neutral_strong": {
      "type": "color",
      "category": "color",
      "name": "n_color_text_neutral_strong",
      "value": "rgb(17, 24, 28)",
      "title": "Color Text Neutral Strong",
      "description": "Strong neutral text color. Used for the strong neutral badge text.",
      "theme": "nord",
      "originalValue": "#11181c"
    },
    "n_color_text_warning": {
      "type": "color",
      "category": "color",
      "name": "n_color_text_warning",
      "value": "rgb(148, 105, 0)",
      "title": "Color Text Warning",
      "description": "Warning text color. Used for the warning badge text.",
      "theme": "nord",
      "originalValue": "#946900"
    },
    "n_color_text_warning_strong": {
      "type": "color",
      "category": "color",
      "name": "n_color_text_warning_strong",
      "value": "rgb(51, 40, 16)",
      "title": "Color Text Warning Strong",
      "description": "Strong warning text color. Used for the strong warning badge text.",
      "theme": "nord",
      "originalValue": "#332810"
    },
    "n_color_text_highlight": {
      "type": "color",
      "category": "color",
      "name": "n_color_text_highlight",
      "value": "rgb(121, 58, 175)",
      "title": "Color Text Highlight",
      "description": "Highlight text color. Used for the highlight badge text.",
      "theme": "nord",
      "originalValue": "#793aaf"
    },
    "n_color_text_info": {
      "type": "color",
      "category": "color",
      "name": "n_color_text_info",
      "value": "rgb(52, 81, 178)",
      "title": "Color Text Info",
      "description": "Info text color. Used for the info badge text.",
      "theme": "nord",
      "originalValue": "#3451b2"
    },
    "n_color_text_progress": {
      "type": "color",
      "category": "color",
      "name": "n_color_text_progress",
      "value": "rgb(1, 109, 131)",
      "title": "Color Text Progress",
      "description": "Progress text color.",
      "theme": "nord",
      "originalValue": "#016d83"
    },
    "n_color_nav_surface": {
      "type": "color",
      "category": "color",
      "name": "n_color_nav_surface",
      "value": "rgb(255, 255, 255)",
      "title": "Color Nav Surface",
      "description": "Default surface color for sidebar navigation. Used as alias for default button hover background and active hover color as well.",
      "theme": "nord",
      "originalValue": "{!white}"
    },
    "n_color_nav_heading": {
      "type": "color",
      "category": "color",
      "name": "n_color_nav_heading",
      "value": "rgb(143, 161, 170)",
      "title": "Color Nav Heading",
      "description": "Default heading color for sidebar navigation.",
      "theme": "nord",
      "originalValue": "#8fa1aa"
    },
    "n_color_nav_hover": {
      "type": "color",
      "category": "color",
      "name": "n_color_nav_hover",
      "value": "rgb(246, 248, 248)",
      "title": "Color Nav Hover",
      "description": "Default hover color for sidebar navigation.",
      "theme": "nord",
      "originalValue": "{!light}"
    },
    "n_color_border": {
      "type": "color",
      "category": "color",
      "name": "n_color_border",
      "value": "rgb(216, 222, 228)",
      "title": "Color Border",
      "description": "Default border color for Therapy.",
      "theme": "nord",
      "originalValue": "#d8dee4"
    },
    "n_color_border_strong": {
      "type": "color",
      "category": "color",
      "name": "n_color_border_strong",
      "value": "rgb(188, 197, 204)",
      "title": "Color Border Strong",
      "description": "Strong border color for Therapy for highlighting specific parts in the user interface.",
      "theme": "nord",
      "originalValue": "#bcc5cc"
    },
    "n_color_border_neutral": {
      "type": "color",
      "category": "color",
      "name": "n_color_border_neutral",
      "value": "rgb(215, 220, 224)",
      "title": "Color Border Neutral",
      "description": "Neutral border color. Used for the neutral badge border style.",
      "theme": "nord",
      "originalValue": "#d7dce0"
    },
    "n_color_border_warning": {
      "type": "color",
      "category": "color",
      "name": "n_color_border_warning",
      "value": "rgb(248, 216, 124)",
      "title": "Color Border Warning",
      "description": "Warning border color. Used for the warning badge border style.",
      "theme": "nord",
      "originalValue": "#f8d87c"
    },
    "n_color_border_highlight": {
      "type": "color",
      "category": "color",
      "name": "n_color_border_highlight",
      "value": "rgb(227, 204, 244)",
      "title": "Color Border Highlight",
      "description": "Highlight border color. Used for the highlight badge border style.",
      "theme": "nord",
      "originalValue": "#e3ccf4"
    },
    "n_color_border_danger": {
      "type": "color",
      "category": "color",
      "name": "n_color_border_danger",
      "value": "rgb(250, 199, 190)",
      "title": "Color Border Danger",
      "description": "Danger border color. Used for the danger badge border style.",
      "theme": "nord",
      "originalValue": "#fac7be"
    },
    "n_color_border_success": {
      "type": "color",
      "category": "color",
      "name": "n_color_border_success",
      "value": "rgb(183, 223, 186)",
      "title": "Color Border Success",
      "description": "Success border color. Used for the success badge border style.",
      "theme": "nord",
      "originalValue": "#b7dfba"
    },
    "n_color_border_info": {
      "type": "color",
      "category": "color",
      "name": "n_color_border_info",
      "value": "rgb(198, 212, 249)",
      "title": "Color Border Info",
      "description": "Info border color. Used for the info badge border style.",
      "theme": "nord",
      "originalValue": "#c6d4f9"
    },
    "n_color_border_progress": {
      "type": "color",
      "category": "color",
      "name": "n_color_border_progress",
      "value": "rgb(176, 229, 238)",
      "title": "Color Border Progress",
      "description": "Progress border color.",
      "theme": "nord",
      "originalValue": "#b0e5ee"
    },
    "n_color_surface": {
      "type": "color",
      "category": "color",
      "name": "n_color_surface",
      "value": "rgb(255, 255, 255)",
      "title": "Color Surface",
      "description": "Default application surface color for Therapy. Use this for e.g. card backgrounds.",
      "theme": "nord",
      "originalValue": "{!white}"
    },
    "n_color_background": {
      "type": "color",
      "category": "color",
      "name": "n_color_background",
      "value": "rgb(250, 251, 251)",
      "title": "Color Background",
      "description": "Default application background color for Therapy. Should be set to either html or body element.",
      "theme": "nord",
      "originalValue": "#fafbfb"
    },
    "n_color_surface_raised": {
      "type": "color",
      "category": "color",
      "name": "n_color_surface_raised",
      "value": "rgb(250, 251, 251)",
      "title": "Color Surface Raised",
      "description": "Default raised surface color for Therapy. Use this when you need to separate a specific layer from the surface color, e.g. table headers.",
      "theme": "nord",
      "originalValue": "#fafbfb"
    },
    "n_color_surface_lowered": {
      "type": "color",
      "category": "color",
      "name": "n_color_surface_lowered",
      "value": "rgb(230, 232, 235)",
      "title": "Color Surface Lowered",
      "description": "Default lowered surface color for Therapy. Use this when you need to make a specific layer to appear lower than the surface color, e.g. progress bar.",
      "theme": "nord",
      "originalValue": "#e6e8eb"
    },
    "n_color_overlay": {
      "type": "color",
      "category": "color",
      "name": "n_color_overlay",
      "value": "rgba(144, 152, 152, 0.4)",
      "title": "Color Overlay",
      "description": "Default overlay color for Therapy. Use this to distinguish modal and popout layers from the layer underneath.",
      "theme": "nord",
      "originalValue": "rgba(144, 152, 152, 0.4)"
    },
    "n_color_status_neutral": {
      "type": "color",
      "category": "color",
      "name": "n_color_status_neutral",
      "value": "rgb(255, 255, 255)",
      "title": "Color Status Neutral",
      "description": "Default neutral status color for Therapy.",
      "theme": "nord",
      "originalValue": "{!white}"
    },
    "n_color_status_warning": {
      "type": "color",
      "category": "color",
      "name": "n_color_status_warning",
      "value": "rgb(246, 205, 90)",
      "title": "Color Status Warning",
      "description": "Default warning status color for Therapy. Used to display information that needs user’s attention and may require further steps.",
      "theme": "nord",
      "originalValue": "#f6cd5a"
    },
    "n_color_status_highlight": {
      "type": "color",
      "category": "color",
      "name": "n_color_status_highlight",
      "value": "rgb(142, 78, 198)",
      "title": "Color Status Highlight",
      "description": "Default highlight status color for Therapy. Used to highlight specific items in the interface.",
      "theme": "nord",
      "originalValue": "#8e4ec6"
    },
    "n_color_status_danger": {
      "type": "color",
      "category": "color",
      "name": "n_color_status_danger",
      "value": "rgb(210, 64, 35)",
      "title": "Color Status Danger",
      "description": "Default danger status color for Therapy. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.",
      "theme": "nord",
      "originalValue": "{!error}"
    },
    "n_color_status_success": {
      "type": "color",
      "category": "color",
      "name": "n_color_status_success",
      "value": "rgb(29, 134, 51)",
      "title": "Color Status Success",
      "description": "Default success status color for Therapy. Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.",
      "theme": "nord",
      "originalValue": "{!success}"
    },
    "n_color_status_info": {
      "type": "color",
      "category": "color",
      "name": "n_color_status_info",
      "value": "rgb(62, 99, 221)",
      "title": "Color Status Info",
      "description": "Default info status color for Therapy. Used to convey something informal.",
      "theme": "nord",
      "originalValue": "#3e63dd"
    },
    "n_color_status_progress": {
      "type": "color",
      "category": "color",
      "name": "n_color_status_progress",
      "value": "rgb(0, 127, 153)",
      "title": "Color Status Progress",
      "description": "Default progress status color for Therapy. Used to convey something is in progress.",
      "theme": "nord",
      "originalValue": "#007f99"
    },
    "n_color_status_notification": {
      "type": "color",
      "category": "color",
      "name": "n_color_status_notification",
      "value": "rgb(231, 84, 54)",
      "title": "Color Status Notification",
      "description": "Default notification indicator color for Therapy. Used to convey unread information.",
      "theme": "nord",
      "originalValue": "#e75436"
    },
    "n_color_status_neutral_weak": {
      "type": "color",
      "category": "color",
      "name": "n_color_status_neutral_weak",
      "value": "rgb(241, 243, 245)",
      "title": "Color Status Neutral Weak",
      "description": "Weak neutral status color for Therapy. Used for the badge default state.",
      "theme": "nord",
      "originalValue": "#f1f3f5"
    },
    "n_color_status_warning_weak": {
      "type": "color",
      "category": "color",
      "name": "n_color_status_warning_weak",
      "value": "rgb(255, 250, 225)",
      "title": "Color Status Warning Weak",
      "description": "Weak warning status color. Used to display information that needs a user’s attention and may require further steps.",
      "theme": "nord",
      "originalValue": "#fffae1"
    },
    "n_color_status_highlight_weak": {
      "type": "color",
      "category": "color",
      "name": "n_color_status_highlight_weak",
      "value": "rgb(249, 241, 254)",
      "title": "Color Status Highlight Weak",
      "description": "Weak highlight status color. Used to highlight specific items in the interface.",
      "theme": "nord",
      "originalValue": "#f9f1fe"
    },
    "n_color_status_danger_weak": {
      "type": "color",
      "category": "color",
      "name": "n_color_status_danger_weak",
      "value": "rgb(255, 240, 238)",
      "title": "Color Status Danger Weak",
      "description": "Weak danger status color. Used to communicate problems that have to be resolved so that user can continue forward. This color should be always used for e.g. highlighting errors.",
      "theme": "nord",
      "originalValue": "#fff0ee"
    },
    "n_color_status_success_weak": {
      "type": "color",
      "category": "color",
      "name": "n_color_status_success_weak",
      "value": "rgb(235, 249, 235)",
      "title": "Color Status Success Weak",
      "description": "Weak success status color.  Used to convey success states. For example, you might show a success message that tells the user that changes were saved or something was completed.",
      "theme": "nord",
      "originalValue": "#ebf9eb"
    },
    "n_color_status_info_weak": {
      "type": "color",
      "category": "color",
      "name": "n_color_status_info_weak",
      "value": "rgb(240, 244, 255)",
      "title": "Color Status Info Weak",
      "description": "Weak info status color. Used to convey something informal.",
      "theme": "nord",
      "originalValue": "#f0f4ff"
    },
    "n_color_status_progress_weak": {
      "type": "color",
      "category": "color",
      "name": "n_color_status_progress_weak",
      "value": "rgb(231, 249, 251)",
      "title": "Color Status Progress Weak",
      "description": "Weak progress status color. Used to convey something is in progress.",
      "theme": "nord",
      "originalValue": "#e7f9fb"
    },
    "n_color_button": {
      "type": "color",
      "category": "color",
      "name": "n_color_button",
      "value": "rgb(255, 255, 255)",
      "title": "Color Button",
      "description": "Default button background color for Therapy.",
      "theme": "nord",
      "originalValue": "{!white}"
    },
    "n_color_button_hover": {
      "type": "color",
      "category": "color",
      "name": "n_color_button_hover",
      "value": "rgb(246, 248, 248)",
      "title": "Color Button Hover",
      "description": "Default button hover background color for Therapy.",
      "theme": "nord",
      "originalValue": "{!light}"
    },
    "n_color_border_hover": {
      "type": "color",
      "category": "color",
      "name": "n_color_border_hover",
      "value": "rgb(102, 118, 128)",
      "title": "Color Border Hover",
      "description": "Default border hover color for Therapy.",
      "theme": "nord",
      "originalValue": "{!dark}"
    },
    "n_color_icon": {
      "type": "color",
      "category": "color",
      "name": "n_color_icon",
      "value": "rgb(102, 118, 128)",
      "title": "Color Icon",
      "description": "Default icon color for Therapy.",
      "theme": "nord",
      "originalValue": "{!dark}"
    },
    "n_color_icon_hover": {
      "type": "color",
      "category": "color",
      "name": "n_color_icon_hover",
      "value": "rgb(12, 26, 61)",
      "title": "Color Icon Hover",
      "description": "Default icon hover color for Therapy.",
      "theme": "nord",
      "originalValue": "{!secondary}"
    },
    "n_color_active": {
      "type": "color",
      "category": "color",
      "name": "n_color_active",
      "value": "rgb(246, 248, 248)",
      "title": "Color Active",
      "description": "Default active color for Therapy.",
      "theme": "nord",
      "originalValue": "{!light}"
    },
    "n_color_header": {
      "type": "color",
      "category": "color",
      "name": "n_color_header",
      "value": "rgb(246, 248, 248)",
      "title": "Color Header",
      "description": "Default header background color for modals.",
      "theme": "nord",
      "originalValue": "{!light}"
    },
    "n_box_shadow": {
      "type": "...",
      "category": "box-shadow",
      "name": "n_box_shadow",
      "value": "0 1px 3px rgba(12, 12, 12, 0.09)",
      "title": "Box Shadow",
      "description": "Default box shadow. Used with buttons, active states, and such.",
      "theme": "nord",
      "originalValue": "0 1px 3px rgba(12, 12, 12, 0.09)"
    },
    "n_box_shadow_header": {
      "type": "...",
      "category": "box-shadow",
      "name": "n_box_shadow_header",
      "value": "0 1px 5px rgba(12, 12, 12, 0.05)",
      "title": "Box Shadow Header",
      "description": "Default box shadow for header component.",
      "theme": "nord",
      "originalValue": "0 1px 5px rgba(12, 12, 12, 0.05)"
    },
    "n_box_shadow_card": {
      "type": "...",
      "category": "box-shadow",
      "name": "n_box_shadow_card",
      "value": "0 0 0 1px var(--n-color-border), 0 1px 5px rgba(12, 12, 12, 0.05), 0 0 40px rgba(12, 12, 12, 0.015)",
      "title": "Box Shadow Card",
      "description": "Default box shadow for card component that creates drop shadow, raised surface, and a border around the card.",
      "theme": "nord",
      "originalValue": "0 0 0 1px var(--n-color-border), 0 1px 5px rgba(12, 12, 12, 0.05), 0 0 40px rgba(12, 12, 12, 0.015)"
    },
    "n_box_shadow_nav": {
      "type": "...",
      "category": "box-shadow",
      "name": "n_box_shadow_nav",
      "value": "0 0 0 1px var(--n-color-border), 0 5px 17px rgba(12, 12, 12, 0.14)",
      "title": "Box Shadow Nav",
      "description": "Default box shadow for navigation component. Used in collapsed state.",
      "theme": "nord",
      "originalValue": "0 0 0 1px var(--n-color-border), 0 5px 17px rgba(12, 12, 12, 0.14)"
    },
    "n_box_shadow_popout": {
      "type": "...",
      "category": "box-shadow",
      "name": "n_box_shadow_popout",
      "value": "0 4px 12px rgba(12, 12, 12, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)",
      "title": "Box Shadow Popout",
      "description": "Default box shadow to be used with all pop out windows.",
      "theme": "nord",
      "originalValue": "0 4px 12px rgba(12, 12, 12, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)"
    },
    "n_box_shadow_modal": {
      "type": "...",
      "category": "box-shadow",
      "name": "n_box_shadow_modal",
      "value": "0 24px 38px 3px rgba(12, 12, 12, 0.16), 0 9px 86px 8px rgba(12, 12, 12, 0.1), 0 11px 15px -7px rgba(12, 12, 12, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05)",
      "title": "Box Shadow Modal",
      "description": "Default box shadow for modal component. Used in dialogs, modals, and such.",
      "theme": "nord",
      "originalValue": "0 24px 38px 3px rgba(12, 12, 12, 0.16), 0 9px 86px 8px rgba(12, 12, 12, 0.1), 0 11px 15px -7px rgba(12, 12, 12, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05)"
    },
    "n_box_shadow_dark": {
      "type": "...",
      "category": "box-shadow",
      "name": "n_box_shadow_dark",
      "value": "0 1px 3px rgba(0, 0, 0, 0.2)",
      "title": "Box Shadow",
      "description": "Default box shadow. Used with buttons, active states, and such.",
      "theme": "nord-dark",
      "originalValue": "0 1px 3px rgba(0, 0, 0, 0.2)"
    },
    "n_box_shadow_header_dark": {
      "type": "...",
      "category": "box-shadow",
      "name": "n_box_shadow_header_dark",
      "value": "0 1px 5px rgba(0, 0, 0, 0.15)",
      "title": "Box Shadow Header",
      "description": "Default box shadow for header component.",
      "theme": "nord-dark",
      "originalValue": "0 1px 5px rgba(0, 0, 0, 0.15)"
    },
    "n_box_shadow_card_dark": {
      "type": "...",
      "category": "box-shadow",
      "name": "n_box_shadow_card_dark",
      "value": "0 0 0 1px var(--n-color-border), 0 1px 5px rgba(0, 0, 0, 0.15)",
      "title": "Box Shadow Card",
      "description": "Default box shadow for card component that creates both shadow and border around the card.",
      "theme": "nord-dark",
      "originalValue": "0 0 0 1px var(--n-color-border), 0 1px 5px rgba(0, 0, 0, 0.15)"
    },
    "n_box_shadow_nav_dark": {
      "type": "...",
      "category": "box-shadow",
      "name": "n_box_shadow_nav_dark",
      "value": "0 0 0 1px var(--n-color-border), 0 5px 17px rgba(0, 0, 0, 0.24)",
      "title": "Box Shadow Nav",
      "description": "Default box shadow for navigation component. Used in collapsed state.",
      "theme": "nord-dark",
      "originalValue": "0 0 0 1px var(--n-color-border), 0 5px 17px rgba(0, 0, 0, 0.24)"
    },
    "n_box_shadow_popout_dark": {
      "type": "...",
      "category": "box-shadow",
      "name": "n_box_shadow_popout_dark",
      "value": "0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--n-color-border)",
      "title": "Box Shadow Popout",
      "description": "Default box shadow to be used with all pop out windows.",
      "theme": "nord-dark",
      "originalValue": "0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 1px var(--n-color-border)"
    },
    "n_box_shadow_modal_dark": {
      "type": "...",
      "category": "box-shadow",
      "name": "n_box_shadow_modal_dark",
      "value": "0 0 0 1px var(--n-color-border), 0 24px 38px 3px rgba(0, 0, 0, 0.34), 0px 9px 86px 8px rgba(0, 0, 0, 0.28), 0px 11px 15px -7px rgba(0, 0, 0, 0.28)",
      "title": "Box Shadow Modal",
      "description": "Default box shadow for modal component. Used in dialogs, modals, and such.",
      "theme": "nord-dark",
      "originalValue": "0 0 0 1px var(--n-color-border), 0 24px 38px 3px rgba(0, 0, 0, 0.34), 0px 9px 86px 8px rgba(0, 0, 0, 0.28), 0px 11px 15px -7px rgba(0, 0, 0, 0.28)"
    },
    "n_font_size_xxxl": {
      "type": "number",
      "category": "font-size",
      "name": "n_font_size_xxxl",
      "value": "2.25rem",
      "title": "Font Size XXXL",
      "description": "This is the xxx-large font size.",
      "originalValue": "2.25rem"
    },
    "n_font_size_xxl": {
      "type": "number",
      "category": "font-size",
      "name": "n_font_size_xxl",
      "value": "1.5rem",
      "title": "Font Size XXL",
      "description": "This is the xx-large font size.",
      "originalValue": "1.5rem"
    },
    "n_font_size_xl": {
      "type": "number",
      "category": "font-size",
      "name": "n_font_size_xl",
      "value": "1.25rem",
      "title": "Font Size XL",
      "description": "This is the x-large font size.",
      "originalValue": "1.25rem"
    },
    "n_font_size_l": {
      "type": "number",
      "category": "font-size",
      "name": "n_font_size_l",
      "value": "1rem",
      "title": "Font Size L",
      "description": "This is the large font size.",
      "originalValue": "1rem"
    },
    "n_font_size_m": {
      "type": "number",
      "category": "font-size",
      "name": "n_font_size_m",
      "value": "0.875rem",
      "title": "Font Size M",
      "description": "This is the base font size.",
      "originalValue": "0.875rem"
    },
    "n_font_size_s": {
      "type": "number",
      "category": "font-size",
      "name": "n_font_size_s",
      "value": "0.75rem",
      "title": "Font Size S",
      "description": "This is the small font size.",
      "originalValue": "0.75rem"
    },
    "n_font_size_xs": {
      "type": "number",
      "category": "font-size",
      "name": "n_font_size_xs",
      "value": "0.6875rem",
      "title": "Font Size XS",
      "description": "This is the x-small font size.",
      "originalValue": "0.6875rem"
    },
    "n_font_family": {
      "type": "font",
      "category": "font",
      "name": "n_font_family",
      "value": "'Nordhealth Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
      "title": "Font Family",
      "description": "Inter is the default UI font family utilized by all our applications.",
      "originalValue": "'Nordhealth Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'"
    },
    "n_font_family_code": {
      "type": "font",
      "category": "font",
      "name": "n_font_family_code",
      "value": "'Nordhealth Mono', monospace, monospace",
      "title": "Font Family Code",
      "description": "This font family is utilized by all our themes for code.",
      "originalValue": "'Nordhealth Mono', monospace, monospace"
    },
    "n_font_features": {
      "type": "font",
      "category": "font",
      "name": "n_font_features",
      "value": "'kern' 1, 'tnum' 1, 'calt' 1, 'case' 1, 'cv05' 1, 'zero' 1, 'cv08' 0, 'ss03' 1",
      "title": "Font Features",
      "description": "This token includes the default font feature settings to be used together with our font family.",
      "originalValue": "'kern' 1, 'tnum' 1, 'calt' 1, 'case' 1, 'cv05' 1, 'zero' 1, 'cv08' 0, 'ss03' 1"
    },
    "n_font_features_reduced": {
      "type": "font",
      "category": "font",
      "name": "n_font_features_reduced",
      "value": "'kern' 1, 'tnum' 0, 'calt' 1, 'case' 1, 'cv05' 1, 'zero' 0, 'cv08' 0, 'ss03' 1",
      "title": "Font Features Reduced",
      "description": "This token includes a font feature variation with reduced legibility. This is mainly used for display headings.",
      "originalValue": "'kern' 1, 'tnum' 0, 'calt' 1, 'case' 1, 'cv05' 1, 'zero' 0, 'cv08' 0, 'ss03' 1"
    },
    "n_font_weight": {
      "type": "font",
      "category": "font",
      "name": "n_font_weight",
      "value": "400",
      "title": "Font Weight Default",
      "description": "Default font weight for body text.",
      "originalValue": "400"
    },
    "n_font_weight_active": {
      "type": "font",
      "category": "font",
      "name": "n_font_weight_active",
      "value": "500",
      "title": "Font Weight Active",
      "description": "Default font weight for active items.",
      "originalValue": "500"
    },
    "n_font_weight_heading": {
      "type": "font",
      "category": "font",
      "name": "n_font_weight_heading",
      "value": "600",
      "title": "Font Weight Heading",
      "description": "Default font weight for headings.",
      "originalValue": "600"
    },
    "n_font_weight_strong": {
      "type": "font",
      "category": "font",
      "name": "n_font_weight_strong",
      "value": "670",
      "title": "Font Weight Strong",
      "description": "Default font weight for strong.",
      "originalValue": "670"
    },
    "n_size_icon_xxs": {
      "type": "number",
      "category": "size",
      "name": "n_size_icon_xxs",
      "value": "8px",
      "title": "Size Icon XXS",
      "description": "This is a xx-small size for icons. Most commonly used for the caret icons inside navigation items and page progress icons.",
      "originalValue": "8px"
    },
    "n_size_icon_xs": {
      "type": "number",
      "category": "size",
      "name": "n_size_icon_xs",
      "value": "10px",
      "title": "Size Icon XS",
      "description": "This is a x-small size for icons. Most commonly used inside small form fields and buttons.",
      "originalValue": "10px"
    },
    "n_size_icon_s": {
      "type": "number",
      "category": "size",
      "name": "n_size_icon_s",
      "value": "12px",
      "title": "Size Icon S",
      "description": "This is a small size for icons. Most commonly used for icons inside buttons and select menu toggles.",
      "originalValue": "12px"
    },
    "n_size_icon_m": {
      "type": "number",
      "category": "size",
      "name": "n_size_icon_m",
      "value": "16px",
      "title": "Size Icon M",
      "description": "This is a medium size for icons. Most commonly used for icons that sit inside large buttons.",
      "originalValue": "16px"
    },
    "n_size_icon_l": {
      "type": "number",
      "category": "size",
      "name": "n_size_icon_l",
      "value": "24px",
      "title": "Size Icon L",
      "description": "This is a large size for icons. Most commonly used for illustrative purposes.",
      "originalValue": "24px"
    },
    "n_size_icon_xl": {
      "type": "number",
      "category": "size",
      "name": "n_size_icon_xl",
      "value": "36px",
      "title": "Size Icon XL",
      "description": "This is a x-large size for icons. Most commonly used for illustrative purposes.",
      "originalValue": "36px"
    },
    "n_size_icon_xxl": {
      "type": "number",
      "category": "size",
      "name": "n_size_icon_xxl",
      "value": "72px",
      "title": "Size Icon XXL",
      "description": "This is a xx-large size for icons. Most commonly used for illustrative purposes.",
      "originalValue": "72px"
    },
    "n_size_top_bar": {
      "type": "number",
      "category": "size",
      "name": "n_size_top_bar",
      "value": "52px",
      "title": "Size Top Bar",
      "description": "This is the default height of the top bar. It is also used for the small header variant.",
      "originalValue": "52px"
    },
    "n_space_xxl": {
      "type": "number",
      "category": "space",
      "name": "n_space_xxl",
      "value": "72px",
      "title": "Space XXL",
      "description": "This is a xx-large space.",
      "originalValue": "72px"
    },
    "n_space_xl": {
      "type": "number",
      "category": "space",
      "name": "n_space_xl",
      "value": "36px",
      "title": "Space XL",
      "description": "This is a x-large space.",
      "originalValue": "36px"
    },
    "n_space_l": {
      "type": "number",
      "category": "space",
      "name": "n_space_l",
      "value": "24px",
      "title": "Space L",
      "description": "This is a large space.",
      "originalValue": "24px"
    },
    "n_space_m": {
      "type": "number",
      "category": "space",
      "name": "n_space_m",
      "value": "16px",
      "title": "Space M",
      "description": "This is a medium space.",
      "originalValue": "16px"
    },
    "n_space_s": {
      "type": "number",
      "category": "space",
      "name": "n_space_s",
      "value": "8px",
      "title": "Space S",
      "description": "This is a small space.",
      "originalValue": "8px"
    },
    "n_space_xs": {
      "type": "number",
      "category": "space",
      "name": "n_space_xs",
      "value": "4px",
      "title": "Space XS",
      "description": "This is a x-small space.",
      "originalValue": "4px"
    },
    "n_border_radius_sharp": {
      "type": "number",
      "category": "border-radius",
      "name": "n_border_radius_sharp",
      "value": "0.02em",
      "title": "Border Radius Sharp",
      "description": "This is sharp border radius.",
      "originalValue": "0.02em"
    },
    "n_border_radius_s": {
      "type": "number",
      "category": "border-radius",
      "name": "n_border_radius_s",
      "value": "3px",
      "title": "Border Radius Small",
      "description": "This is small border radius.",
      "originalValue": "3px"
    },
    "n_border_radius": {
      "type": "number",
      "category": "border-radius",
      "name": "n_border_radius",
      "value": "5px",
      "title": "Border Radius",
      "description": "This is the default border radius.",
      "originalValue": "5px"
    },
    "n_border_radius_pill": {
      "type": "number",
      "category": "border-radius",
      "name": "n_border_radius_pill",
      "value": "999px",
      "title": "Border Radius Pill",
      "description": "This is for creating pill shaped tags and similar.",
      "originalValue": "999px"
    },
    "n_border_radius_circle": {
      "type": "number",
      "category": "border-radius",
      "name": "n_border_radius_circle",
      "value": "50%",
      "title": "Border Radius Circle",
      "description": "This is for creating rounded avatars and similar objects.",
      "originalValue": "50%"
    },
    "n_transition_quickly": {
      "type": "...",
      "category": "transition",
      "name": "n_transition_quickly",
      "value": "0.05s ease",
      "title": "Transition Quickly",
      "description": "Use this design token for a quick transition. Most often used for quick hover effects on things such as links, icons and more.",
      "originalValue": "0.05s ease"
    },
    "n_transition_slowly": {
      "type": "...",
      "category": "transition",
      "name": "n_transition_slowly",
      "value": "0.2s ease",
      "title": "Transition Slowly",
      "description": "Use this design token for a slow transition. Used for example in modals, tooltips, collapsing elements, and more.",
      "originalValue": "0.2s ease"
    },
    "n_transition_mobile": {
      "type": "...",
      "category": "transition",
      "name": "n_transition_mobile",
      "value": "0.4s ease",
      "title": "Transition Mobile",
      "description": "Use this design token for mobile menu transitions. Used for example in the mobile version of popout and dropdown.",
      "originalValue": "0.4s ease"
    },
    "n_line_height_tight": {
      "type": "number",
      "category": "line-height",
      "name": "n_line_height_tight",
      "value": "1.15",
      "title": "Line Height Tight",
      "description": "This token can be used when you don’t want line height taking any extra space.",
      "originalValue": "1.15"
    },
    "n_line_height_heading": {
      "type": "number",
      "category": "line-height",
      "name": "n_line_height_heading",
      "value": "1.2",
      "title": "Line Height Heading",
      "description": "This is the default line height for headings.",
      "originalValue": "1.2"
    },
    "n_line_height_caption": {
      "type": "number",
      "category": "line-height",
      "name": "n_line_height_caption",
      "value": "1.3",
      "title": "Line Height Caption",
      "description": "This is the default line height for captions, hint texts and form errors.",
      "originalValue": "1.3"
    },
    "n_line_height": {
      "type": "number",
      "category": "line-height",
      "name": "n_line_height",
      "value": "1.5",
      "title": "Line Height",
      "description": "This is the default line height for body text.",
      "originalValue": "1.5"
    },
    "n_line_height_form": {
      "type": "number",
      "category": "line-height",
      "name": "n_line_height_form",
      "value": "20px",
      "title": "Line Height Form",
      "description": "This is the default line height for form inputs, textareas and buttons.",
      "originalValue": "20px"
    },
    "n_index_deep": {
      "type": "number",
      "category": "z-index",
      "name": "n_index_deep",
      "value": "-999999",
      "title": "Z-Index: Deep",
      "description": "Deep z-index is used to stack something behind everything else.",
      "originalValue": "-999999"
    },
    "n_index_default": {
      "type": "number",
      "category": "z-index",
      "name": "n_index_default",
      "value": "1",
      "title": "Z-Index: Default",
      "description": "The default z-index for components and elements inside components.",
      "originalValue": "1"
    },
    "n_index_masked": {
      "type": "number",
      "category": "z-index",
      "name": "n_index_masked",
      "value": "100",
      "title": "Z-Index: Masked",
      "description": "Default z-index for masked interface elements.",
      "originalValue": "100"
    },
    "n_index_mask": {
      "type": "number",
      "category": "z-index",
      "name": "n_index_mask",
      "value": "200",
      "title": "Z-Index: Mask",
      "description": "Default z-index for masking interface elements.",
      "originalValue": "200"
    },
    "n_index_sticky": {
      "type": "number",
      "category": "z-index",
      "name": "n_index_sticky",
      "value": "300",
      "title": "Z-Index: Sticky",
      "description": "Default z-index for sticky interface elements.",
      "originalValue": "300"
    },
    "n_index_nav": {
      "type": "number",
      "category": "z-index",
      "name": "n_index_nav",
      "value": "400",
      "title": "Z-Index: Navigation",
      "description": "Default z-index for navigation.",
      "originalValue": "400"
    },
    "n_index_top_bar": {
      "type": "number",
      "category": "z-index",
      "name": "n_index_top_bar",
      "value": "500",
      "title": "Z-Index: Top bar",
      "description": "Default z-index for top bar.",
      "originalValue": "500"
    },
    "n_index_overlay": {
      "type": "number",
      "category": "z-index",
      "name": "n_index_overlay",
      "value": "600",
      "title": "Z-Index: Overlay",
      "description": "Default z-index for modal and popup overlays.",
      "originalValue": "600"
    },
    "n_index_spinner": {
      "type": "number",
      "category": "z-index",
      "name": "n_index_spinner",
      "value": "700",
      "title": "Z-Index: Spinner",
      "description": "Default z-index for spinners, stacking on top of overlay.",
      "originalValue": "700"
    },
    "n_index_popout": {
      "type": "number",
      "category": "z-index",
      "name": "n_index_popout",
      "value": "800",
      "title": "Z-Index: Popout",
      "description": "Default z-index for popouts that stacks on top of all other elements.",
      "originalValue": "800"
    },
    "n_index_toast": {
      "type": "number",
      "category": "z-index",
      "name": "n_index_toast",
      "value": "900",
      "title": "Z-Index: Toast",
      "description": "Default z-index for toast messages.",
      "originalValue": "900"
    },
    "n_index_modal": {
      "type": "number",
      "category": "z-index",
      "name": "n_index_modal",
      "value": "1000",
      "title": "Z-Index: Modal",
      "description": "Default z-index for modals that stacks on top of overlays and other elements, but still allows popups to be visible.",
      "originalValue": "1000"
    }
  }
}