{
  "$description": "nol.satu design system v2.0. Source of truth for every generated file in /tokens. Format: W3C Design Tokens (DTCG). Semantic colours and shadows carry their dark value in $extensions[\"id.nolsatu.mode\"].dark.",
  "palette": {
    "$type": "color",
    "$description": "Raw colours. Use semantic color.* tokens in product code; reach for these only for illustration or the mark.",
    "teal": {
      "50": {
        "$value": "#F0F8F6"
      },
      "100": {
        "$value": "#E2F2EE"
      },
      "200": {
        "$value": "#BFE5DC"
      },
      "300": {
        "$value": "#86DCCB"
      },
      "400": {
        "$value": "#4CC9B0"
      },
      "500": {
        "$value": "#1E9985"
      },
      "600": {
        "$value": "#0F7466"
      },
      "700": {
        "$value": "#0B5C51"
      },
      "800": {
        "$value": "#0B463F"
      },
      "900": {
        "$value": "#0E332D"
      },
      "950": {
        "$value": "#06201B"
      }
    },
    "berry": {
      "50": {
        "$value": "#FCF0F5"
      },
      "100": {
        "$value": "#F8DCE8"
      },
      "200": {
        "$value": "#F2B9D1"
      },
      "300": {
        "$value": "#EB7BA8"
      },
      "400": {
        "$value": "#DB5590"
      },
      "500": {
        "$value": "#C23A74"
      },
      "600": {
        "$value": "#A3245A"
      },
      "700": {
        "$value": "#841D49"
      },
      "800": {
        "$value": "#641638"
      },
      "900": {
        "$value": "#3F0E24"
      }
    },
    "stone": {
      "0": {
        "$value": "#FFFFFF"
      },
      "25": {
        "$value": "#FAF9F6"
      },
      "50": {
        "$value": "#F3F1EC"
      },
      "100": {
        "$value": "#EAE7E0"
      },
      "200": {
        "$value": "#E3DFD6"
      },
      "300": {
        "$value": "#CFC9BE"
      },
      "400": {
        "$value": "#A69E93"
      },
      "450": {
        "$value": "#968E83"
      },
      "500": {
        "$value": "#857D72"
      },
      "550": {
        "$value": "#736B62"
      },
      "600": {
        "$value": "#6B645C"
      },
      "700": {
        "$value": "#4A443E"
      },
      "800": {
        "$value": "#34302A"
      },
      "850": {
        "$value": "#24201C"
      },
      "900": {
        "$value": "#1C1916"
      },
      "925": {
        "$value": "#181613"
      },
      "950": {
        "$value": "#14120F"
      }
    },
    "green": {
      "50": {
        "$value": "#E6F4E9"
      },
      "300": {
        "$value": "#9BE0AF"
      },
      "400": {
        "$value": "#5CCB7E"
      },
      "600": {
        "$value": "#1F7A3A"
      },
      "700": {
        "$value": "#17632E"
      },
      "900": {
        "$value": "#13301C"
      }
    },
    "amber": {
      "50": {
        "$value": "#FDF3DC"
      },
      "300": {
        "$value": "#F7D38A"
      },
      "400": {
        "$value": "#F2B533"
      },
      "500": {
        "$value": "#C98A04"
      },
      "700": {
        "$value": "#7A4F00"
      },
      "900": {
        "$value": "#3A2A07"
      }
    },
    "red": {
      "50": {
        "$value": "#FCE9E7"
      },
      "300": {
        "$value": "#F8A7A0"
      },
      "400": {
        "$value": "#F06B5F"
      },
      "600": {
        "$value": "#C0342B"
      },
      "700": {
        "$value": "#A02A22"
      },
      "900": {
        "$value": "#3D1614"
      }
    },
    "blue": {
      "50": {
        "$value": "#E8EEFC"
      },
      "300": {
        "$value": "#B0C6FA"
      },
      "400": {
        "$value": "#7FA2F5"
      },
      "600": {
        "$value": "#2F5FD0"
      },
      "700": {
        "$value": "#244CA8"
      },
      "900": {
        "$value": "#17254A"
      }
    }
  },
  "color": {
    "$type": "color",
    "canvas": {
      "$value": "{palette.stone.25}",
      "$extensions": {
        "id.nolsatu.mode": {
          "dark": "{palette.stone.950}"
        }
      },
      "$description": "App background behind everything."
    },
    "surface": {
      "default": {
        "$value": "{palette.stone.0}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.stone.900}"
          }
        },
        "$description": "Cards, panels, inputs, top bar."
      },
      "subtle": {
        "$value": "{palette.stone.50}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.stone.925}"
          }
        },
        "$description": "Sidebars, table headers, wells."
      },
      "hover": {
        "$value": "{palette.stone.100}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.stone.850}"
          }
        },
        "$description": "Hover and selected rows."
      },
      "inverse": {
        "$value": "{palette.stone.900}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.stone.50}"
          }
        },
        "$description": "Tooltips and snackbars."
      }
    },
    "line": {
      "default": {
        "$value": "{palette.stone.200}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.stone.800}"
          }
        },
        "$description": "Dividers and card borders."
      },
      "strong": {
        "$value": "{palette.stone.300}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.stone.700}"
          }
        },
        "$description": "Emphasised dividers, dashed drop zones."
      },
      "control": {
        "$value": "{palette.stone.450}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.stone.550}"
          }
        },
        "$description": "Borders of inputs, checkboxes and other controls (meets 3:1)."
      }
    },
    "fg": {
      "default": {
        "$value": "{palette.stone.900}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.stone.50}"
          }
        },
        "$description": "Primary text."
      },
      "muted": {
        "$value": "{palette.stone.600}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.stone.400}"
          }
        },
        "$description": "Secondary text, descriptions."
      },
      "subtle": {
        "$value": "{palette.stone.500}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.stone.500}"
          }
        },
        "$description": "Placeholders and disabled text only."
      },
      "inverse": {
        "$value": "{palette.stone.25}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.stone.900}"
          }
        },
        "$description": "Text on surface.inverse."
      }
    },
    "brand": {
      "default": {
        "$value": "{palette.teal.600}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.teal.400}"
          }
        },
        "$description": "Primary actions, selection, links."
      },
      "hover": {
        "$value": "{palette.teal.700}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.teal.300}"
          }
        }
      },
      "active": {
        "$value": "{palette.teal.800}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.teal.200}"
          }
        }
      },
      "subtle": {
        "$value": "{palette.teal.100}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.teal.900}"
          }
        },
        "$description": "Selected backgrounds, confirmation toasts."
      },
      "fg": {
        "$value": "{palette.teal.700}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.teal.300}"
          }
        },
        "$description": "Brand-coloured text on canvas or brand.subtle."
      }
    },
    "on-brand": {
      "$value": "{palette.stone.0}",
      "$extensions": {
        "id.nolsatu.mode": {
          "dark": "{palette.teal.950}"
        }
      },
      "$description": "Text and icons on brand.default."
    },
    "accent": {
      "default": {
        "$value": "{palette.berry.600}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.berry.300}"
          }
        },
        "$description": "Secondary emphasis. Use sparingly: new badges, highlights, the mark."
      },
      "hover": {
        "$value": "{palette.berry.700}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.berry.200}"
          }
        }
      },
      "subtle": {
        "$value": "{palette.berry.50}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.berry.900}"
          }
        }
      },
      "fg": {
        "$value": "{palette.berry.700}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.berry.200}"
          }
        }
      }
    },
    "on-accent": {
      "$value": "{palette.stone.0}",
      "$extensions": {
        "id.nolsatu.mode": {
          "dark": "{palette.berry.900}"
        }
      }
    },
    "focus": {
      "$value": "{palette.teal.600}",
      "$extensions": {
        "id.nolsatu.mode": {
          "dark": "{palette.teal.400}"
        }
      },
      "$description": "2px focus ring, 2px offset."
    },
    "scrim": {
      "$value": "rgba(20, 18, 15, 0.48)",
      "$extensions": {
        "id.nolsatu.mode": {
          "dark": "rgba(0, 0, 0, 0.64)"
        }
      },
      "$description": "Overlay behind modals."
    },
    "success": {
      "default": {
        "$value": "{palette.green.600}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.green.400}"
          }
        }
      },
      "subtle": {
        "$value": "{palette.green.50}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.green.900}"
          }
        }
      },
      "fg": {
        "$value": "{palette.green.700}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.green.300}"
          }
        }
      }
    },
    "on-success": {
      "$value": "{palette.stone.0}",
      "$extensions": {
        "id.nolsatu.mode": {
          "dark": "{palette.stone.950}"
        }
      }
    },
    "warning": {
      "default": {
        "$value": "{palette.amber.500}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.amber.400}"
          }
        }
      },
      "subtle": {
        "$value": "{palette.amber.50}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.amber.900}"
          }
        }
      },
      "fg": {
        "$value": "{palette.amber.700}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.amber.300}"
          }
        }
      }
    },
    "on-warning": {
      "$value": "{palette.stone.900}",
      "$extensions": {
        "id.nolsatu.mode": {
          "dark": "{palette.stone.950}"
        }
      }
    },
    "danger": {
      "default": {
        "$value": "{palette.red.600}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.red.400}"
          }
        }
      },
      "subtle": {
        "$value": "{palette.red.50}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.red.900}"
          }
        }
      },
      "fg": {
        "$value": "{palette.red.700}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.red.300}"
          }
        }
      }
    },
    "on-danger": {
      "$value": "{palette.stone.0}",
      "$extensions": {
        "id.nolsatu.mode": {
          "dark": "{palette.stone.950}"
        }
      }
    },
    "info": {
      "default": {
        "$value": "{palette.blue.600}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.blue.400}"
          }
        }
      },
      "subtle": {
        "$value": "{palette.blue.50}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.blue.900}"
          }
        }
      },
      "fg": {
        "$value": "{palette.blue.700}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.blue.300}"
          }
        }
      }
    },
    "on-info": {
      "$value": "{palette.stone.0}",
      "$extensions": {
        "id.nolsatu.mode": {
          "dark": "{palette.stone.950}"
        }
      }
    },
    "cat": {
      "action": {
        "$description": "Blocks that do something: buttons, forms, sign-ups. OKLCH hue 8. Light: solid L0.64 C0.16, subtle L0.95 C0.045, fg L0.42 C0.11. Dark: solid L0.74 C0.15, subtle L0.30 C0.06, fg L0.88 C0.09.",
        "default": {
          "$value": "#DA5B79",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#F87F99"
            }
          },
          "$description": "Dot, icon, drag handle, canvas outline."
        },
        "subtle": {
          "$value": "#FFE8EB",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#472028"
            }
          },
          "$description": "Tag background."
        },
        "fg": {
          "$value": "#7D2E41",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#FEC7CF"
            }
          },
          "$description": "Tag text."
        }
      },
      "idea": {
        "$description": "Words and messages: headlines, text, quotes. OKLCH hue 85. Light: solid L0.64 C0.16, subtle L0.95 C0.045, fg L0.42 C0.11. Dark: solid L0.74 C0.15, subtle L0.30 C0.06, fg L0.88 C0.09.",
        "default": {
          "$value": "#B08505",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#D6A20A"
            }
          },
          "$description": "Dot, icon, drag handle, canvas outline."
        },
        "subtle": {
          "$value": "#FCEDCD",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#3C2B02"
            }
          },
          "$description": "Tag background."
        },
        "fg": {
          "$value": "#624800",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#F3D392"
            }
          },
          "$description": "Tag text."
        }
      },
      "structure": {
        "$description": "Layout and data: sections, columns, pricing tables. OKLCH hue 255. Light: solid L0.64 C0.16, subtle L0.95 C0.045, fg L0.42 C0.11. Dark: solid L0.74 C0.15, subtle L0.30 C0.06, fg L0.88 C0.09.",
        "default": {
          "$value": "#408DEA",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#6DADFF"
            }
          },
          "$description": "Dot, icon, drag handle, canvas outline."
        },
        "subtle": {
          "$value": "#E4F0FE",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#182E4B"
            }
          },
          "$description": "Tag background."
        },
        "fg": {
          "$value": "#1D4D87",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#BEDAFE"
            }
          },
          "$description": "Tag text."
        }
      },
      "growth": {
        "$description": "Reach and results: newsletter, analytics, SEO. OKLCH hue 130. Light: solid L0.64 C0.16, subtle L0.95 C0.045, fg L0.42 C0.11. Dark: solid L0.74 C0.15, subtle L0.30 C0.06, fg L0.88 C0.09.",
        "default": {
          "$value": "#6B9E1F",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#8BBD50"
            }
          },
          "$description": "Dot, icon, drag handle, canvas outline."
        },
        "subtle": {
          "$value": "#E5F5D6",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#243411"
            }
          },
          "$description": "Tag background."
        },
        "fg": {
          "$value": "#385805",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#C4E4A5"
            }
          },
          "$description": "Tag text."
        }
      },
      "flow": {
        "$description": "Paths people follow: navigation, checkout, multi-step forms. OKLCH hue 48. Light: solid L0.64 C0.16, subtle L0.95 C0.045, fg L0.42 C0.11. Dark: solid L0.74 C0.15, subtle L0.30 C0.06, fg L0.88 C0.09.",
        "default": {
          "$value": "#D76821",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#F68A4F"
            }
          },
          "$description": "Dot, icon, drag handle, canvas outline."
        },
        "subtle": {
          "$value": "#FFEADF",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#462311"
            }
          },
          "$description": "Tag background."
        },
        "fg": {
          "$value": "#7B3606",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#FECBB1"
            }
          },
          "$description": "Tag text."
        }
      },
      "warmth": {
        "$description": "Human touches: testimonials, team, social proof. OKLCH hue 310. Light: solid L0.64 C0.16, subtle L0.95 C0.045, fg L0.42 C0.11. Dark: solid L0.74 C0.15, subtle L0.30 C0.06, fg L0.88 C0.09.",
        "default": {
          "$value": "#AA6CD4",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#C88EF1"
            }
          },
          "$description": "Dot, icon, drag handle, canvas outline."
        },
        "subtle": {
          "$value": "#F5E9FF",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#372544"
            }
          },
          "$description": "Tag background."
        },
        "fg": {
          "$value": "#5F3979",
          "$extensions": {
            "id.nolsatu.mode": {
              "dark": "#E7CAFF"
            }
          },
          "$description": "Tag text."
        }
      }
    },
    "mark": {
      "$description": "Logo colours. Left form = first founder, right form = second founder, overlap = the company.",
      "left": {
        "$value": "{palette.berry.600}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.berry.300}"
          }
        }
      },
      "right": {
        "$value": "{palette.teal.600}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.teal.400}"
          }
        }
      },
      "overlap": {
        "$value": "{palette.teal.900}",
        "$extensions": {
          "id.nolsatu.mode": {
            "dark": "{palette.stone.50}"
          }
        }
      }
    }
  },
  "font": {
    "family": {
      "$type": "fontFamily",
      "display": {
        "$value": [
          "Space Grotesk",
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "$description": "Headings, the wordmark, numbers that matter."
      },
      "sans": {
        "$value": [
          "Instrument Sans",
          "ui-sans-serif",
          "system-ui",
          "-apple-system",
          "Segoe UI",
          "sans-serif"
        ],
        "$description": "Everything people read and click."
      },
      "mono": {
        "$value": [
          "IBM Plex Mono",
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ],
        "$description": "Labels, tags, code, URLs, keyboard shortcuts."
      }
    },
    "weight": {
      "$type": "fontWeight",
      "regular": {
        "$value": 400
      },
      "medium": {
        "$value": 500
      },
      "semibold": {
        "$value": 600
      },
      "bold": {
        "$value": 700
      }
    }
  },
  "typography": {
    "$type": "typography",
    "$description": "Sizes marked fluid scale from their min at a 400px viewport to their full size at 1280px.",
    "display-xl": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "56px",
        "fontWeight": 700,
        "lineHeight": 1.05,
        "letterSpacing": "-0.035em"
      },
      "$extensions": {
        "id.nolsatu.fluid": {
          "min": "40px"
        }
      },
      "$description": "Marketing hero only."
    },
    "display-lg": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "44px",
        "fontWeight": 700,
        "lineHeight": 1.1,
        "letterSpacing": "-0.03em"
      },
      "$extensions": {
        "id.nolsatu.fluid": {
          "min": "32px"
        }
      },
      "$description": "Marketing section heads, empty-state heroes."
    },
    "h1": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "34px",
        "fontWeight": 600,
        "lineHeight": 1.15,
        "letterSpacing": "-0.025em"
      },
      "$extensions": {
        "id.nolsatu.fluid": {
          "min": "28px"
        }
      },
      "$description": "Page title."
    },
    "h2": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "26px",
        "fontWeight": 600,
        "lineHeight": 1.2,
        "letterSpacing": "-0.02em"
      },
      "$extensions": {
        "id.nolsatu.fluid": {
          "min": "22px"
        }
      },
      "$description": "Section title."
    },
    "h3": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "20px",
        "fontWeight": 600,
        "lineHeight": 1.3,
        "letterSpacing": "-0.015em"
      },
      "$description": "Panel and modal titles."
    },
    "h4": {
      "$value": {
        "fontFamily": "{font.family.display}",
        "fontSize": "16px",
        "fontWeight": 600,
        "lineHeight": 1.35,
        "letterSpacing": "-0.01em"
      },
      "$description": "Card and block titles."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "17px",
        "fontWeight": 400,
        "lineHeight": 1.6,
        "letterSpacing": "0em"
      },
      "$description": "Marketing and onboarding copy."
    },
    "body": {
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "15px",
        "fontWeight": 400,
        "lineHeight": 1.55,
        "letterSpacing": "0em"
      },
      "$description": "Default UI text."
    },
    "body-sm": {
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "13px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "0em"
      },
      "$description": "Dense UI: sidebars, tables, helper text."
    },
    "caption": {
      "$value": {
        "fontFamily": "{font.family.sans}",
        "fontSize": "12px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0.005em"
      },
      "$description": "Timestamps, meta, field hints."
    },
    "label": {
      "$value": {
        "fontFamily": "{font.family.mono}",
        "fontSize": "11px",
        "fontWeight": 500,
        "lineHeight": 1.45,
        "letterSpacing": "0.07em"
      },
      "$description": "UPPERCASE section labels and tags."
    },
    "code": {
      "$value": {
        "fontFamily": "{font.family.mono}",
        "fontSize": "13px",
        "fontWeight": 400,
        "lineHeight": 1.55,
        "letterSpacing": "0em"
      },
      "$description": "Code, URLs, IDs."
    }
  },
  "space": {
    "0": {
      "$value": "0px"
    },
    "1": {
      "$value": "4px"
    },
    "2": {
      "$value": "8px"
    },
    "3": {
      "$value": "12px"
    },
    "4": {
      "$value": "16px"
    },
    "5": {
      "$value": "20px"
    },
    "6": {
      "$value": "24px"
    },
    "8": {
      "$value": "32px"
    },
    "10": {
      "$value": "40px"
    },
    "12": {
      "$value": "48px"
    },
    "16": {
      "$value": "64px"
    },
    "20": {
      "$value": "80px"
    },
    "24": {
      "$value": "96px"
    },
    "$type": "dimension",
    "$description": "4px base unit. Tailwind: --spacing is 4px, so p-4 = 16px.",
    "0-5": {
      "$value": "2px"
    },
    "1-5": {
      "$value": "6px"
    }
  },
  "radius": {
    "$type": "dimension",
    "2xs": {
      "$value": "4px",
      "$description": "Checkboxes, kbd."
    },
    "xs": {
      "$value": "6px",
      "$description": "Menu items, tooltips."
    },
    "sm": {
      "$value": "12px",
      "$description": "Buttons, inputs, selects, toasts."
    },
    "md": {
      "$value": "18px",
      "$description": "Cards, blocks, popovers."
    },
    "lg": {
      "$value": "24px",
      "$description": "Modals, sheets, large feature panels."
    },
    "full": {
      "$value": "9999px",
      "$description": "Tags, toggles, avatars."
    }
  },
  "size": {
    "$type": "dimension",
    "control-sm": {
      "$value": "28px"
    },
    "control-md": {
      "$value": "34px"
    },
    "control-lg": {
      "$value": "42px"
    },
    "icon-sm": {
      "$value": "16px"
    },
    "icon-md": {
      "$value": "20px"
    },
    "icon-lg": {
      "$value": "24px"
    },
    "focus-ring": {
      "$value": "2px"
    },
    "focus-offset": {
      "$value": "2px"
    }
  },
  "shadow": {
    "$type": "shadow",
    "$description": "Stored as CSS box-shadow strings for portability.",
    "xs": {
      "$value": "0 1px 2px rgba(28, 25, 22, 0.06)",
      "$extensions": {
        "id.nolsatu.mode": {
          "dark": "0 1px 2px rgba(0, 0, 0, 0.4)"
        }
      },
      "$description": "Buttons, inputs."
    },
    "sm": {
      "$value": "0 1px 3px rgba(28, 25, 22, 0.08), 0 1px 2px rgba(28, 25, 22, 0.04)",
      "$extensions": {
        "id.nolsatu.mode": {
          "dark": "0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03)"
        }
      },
      "$description": "Raised cards."
    },
    "md": {
      "$value": "0 8px 20px -6px rgba(28, 25, 22, 0.14), 0 2px 4px rgba(28, 25, 22, 0.05)",
      "$extensions": {
        "id.nolsatu.mode": {
          "dark": "0 8px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05)"
        }
      },
      "$description": "Menus, popovers, a block being dragged."
    },
    "lg": {
      "$value": "0 20px 48px -10px rgba(28, 25, 22, 0.22), 0 4px 12px rgba(28, 25, 22, 0.06)",
      "$extensions": {
        "id.nolsatu.mode": {
          "dark": "0 24px 56px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06)"
        }
      },
      "$description": "Modals, command palette."
    }
  },
  "duration": {
    "$type": "duration",
    "instant": {
      "$value": "0ms"
    },
    "fast": {
      "$value": "120ms"
    },
    "base": {
      "$value": "180ms"
    },
    "slow": {
      "$value": "280ms"
    },
    "slower": {
      "$value": "420ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "standard": {
      "$value": [
        0.2,
        0,
        0,
        1
      ],
      "$description": "Most transitions."
    },
    "enter": {
      "$value": [
        0,
        0,
        0.2,
        1
      ],
      "$description": "Things appearing."
    },
    "exit": {
      "$value": [
        0.4,
        0,
        1,
        1
      ],
      "$description": "Things leaving."
    },
    "snap": {
      "$value": [
        0.34,
        1.4,
        0.64,
        1
      ],
      "$description": "A block landing in place after a drag. Blocks only."
    }
  },
  "z": {
    "$type": "number",
    "base": {
      "$value": 0
    },
    "raised": {
      "$value": 1
    },
    "sticky": {
      "$value": 10
    },
    "dropdown": {
      "$value": 100
    },
    "overlay": {
      "$value": 200
    },
    "modal": {
      "$value": 300
    },
    "toast": {
      "$value": 400
    },
    "tooltip": {
      "$value": 500
    }
  },
  "breakpoint": {
    "$type": "dimension",
    "sm": {
      "$value": "640px"
    },
    "md": {
      "$value": "768px"
    },
    "lg": {
      "$value": "1024px"
    },
    "xl": {
      "$value": "1280px"
    },
    "2xl": {
      "$value": "1536px"
    }
  }
}