{
  "$schema": "https://tr.designtokens.org/format/",
  "$description": "Design tokens for Sentri-Inspired",
  "meta": {
    "name": "Sentri-Inspired",
    "description": "An inspired interpretation of Sentri's design language — a developer-tools brand built on a deep purple-violet midnight canvas, electric lime accents, and a slightly subversive illustrated personality. The system pairs a custom display sans (chunky, playful, near-condensed) with the open Rubik family for UI copy and Monaco for code, then leans on dark-on-light pricing surfaces, sticker-style mascots, and a single-color CTA hierarchy where black-violet buttons read as the primary action against either polarity.",
    "theme": "light"
  },
  "color": {
    "primary": {
      "$value": "#150f23",
      "$type": "color",
      "$description": "Use for the primary role."
    },
    "ink-deep": {
      "$value": "#1f1633",
      "$type": "color",
      "$description": "Use for the ink deep role."
    },
    "on-primary": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the on primary role."
    },
    "accent-lime": {
      "$value": "#c2ef4e",
      "$type": "color",
      "$description": "Use for the accent lime role."
    },
    "accent-pink": {
      "$value": "#fa7faa",
      "$type": "color",
      "$description": "Use for the accent pink role."
    },
    "accent-violet": {
      "$value": "#6a5fc1",
      "$type": "color",
      "$description": "Use for the accent violet role."
    },
    "accent-violet-deep": {
      "$value": "#422082",
      "$type": "color",
      "$description": "Use for the accent violet deep role."
    },
    "accent-violet-mid": {
      "$value": "#79628c",
      "$type": "color",
      "$description": "Use for the accent violet mid role."
    },
    "surface-canvas-dark": {
      "$value": "#1f1633",
      "$type": "color",
      "$description": "Use for the surface canvas dark role."
    },
    "surface-canvas-light": {
      "$value": "#ffffff",
      "$type": "color",
      "$description": "Use for the surface canvas light role."
    },
    "surface-night": {
      "$value": "#150f23",
      "$type": "color",
      "$description": "Use for the surface night role."
    },
    "surface-press-light": {
      "$value": "#f0f0f0",
      "$type": "color",
      "$description": "Use for the surface press light role."
    },
    "surface-press-stronger": {
      "$value": "#efefef",
      "$type": "color",
      "$description": "Use for the surface press stronger role."
    },
    "hairline-violet": {
      "$value": "#362d59",
      "$type": "color",
      "$description": "Use for the hairline violet role."
    },
    "hairline-cool": {
      "$value": "#cfcfdb",
      "$type": "color",
      "$description": "Use for the hairline cool role."
    },
    "hairline-cloud": {
      "$value": "#e5e7eb",
      "$type": "color",
      "$description": "Use for the hairline cloud role."
    },
    "ink": {
      "$value": "#1f1633",
      "$type": "color",
      "$description": "Use for the ink role."
    },
    "ink-press": {
      "$value": "#1a1a1a",
      "$type": "color",
      "$description": "Use for the ink press role."
    },
    "on-dark-muted": {
      "$value": "#bdb8c0",
      "$type": "color",
      "$description": "Use for the on dark muted role."
    },
    "on-dark-faint": {
      "$value": "#3f3849",
      "$type": "color",
      "$description": "Use for the on dark faint role."
    },
    "ring-focus": {
      "$value": "#9dc1f5",
      "$type": "color",
      "$description": "Use for the ring focus role."
    }
  },
  "typography": {
    "display-hero": {
      "$value": {
        "fontFamily": "Sentri Display, Rubik, system-ui, sans-serif",
        "fontSize": "88px",
        "fontWeight": 700,
        "lineHeight": 1.2,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display hero."
    },
    "display-large": {
      "$value": {
        "fontFamily": "Sentri Display, Rubik, system-ui, sans-serif",
        "fontSize": "60px",
        "fontWeight": 500,
        "lineHeight": 1.1,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for display large."
    },
    "heading-xl": {
      "$value": {
        "fontFamily": "Rubik, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif",
        "fontSize": "30px",
        "fontWeight": 500,
        "lineHeight": 1.2,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading xl."
    },
    "heading-lg": {
      "$value": {
        "fontFamily": "Rubik, -apple-system, system-ui, sans-serif",
        "fontSize": "27px",
        "fontWeight": 500,
        "lineHeight": 1.25,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading lg."
    },
    "heading-md": {
      "$value": {
        "fontFamily": "Rubik, -apple-system, system-ui, sans-serif",
        "fontSize": "24px",
        "fontWeight": 500,
        "lineHeight": 1.25,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading md."
    },
    "heading-sm": {
      "$value": {
        "fontFamily": "Rubik, -apple-system, system-ui, sans-serif",
        "fontSize": "20px",
        "fontWeight": 600,
        "lineHeight": 1.25,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for heading sm."
    },
    "body-lg": {
      "$value": {
        "fontFamily": "Rubik, -apple-system, system-ui, sans-serif",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 2,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body lg."
    },
    "body-strong": {
      "$value": {
        "fontFamily": "Rubik, -apple-system, system-ui, sans-serif",
        "fontSize": "16px",
        "fontWeight": 600,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body strong."
    },
    "body-md": {
      "$value": {
        "fontFamily": "Rubik, -apple-system, system-ui, sans-serif",
        "fontSize": "16px",
        "fontWeight": 500,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for body md."
    },
    "eyebrow": {
      "$value": {
        "fontFamily": "Rubik, -apple-system, system-ui, sans-serif",
        "fontSize": "15px",
        "fontWeight": 500,
        "lineHeight": 1.4,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for eyebrow."
    },
    "button-cap": {
      "$value": {
        "fontFamily": "Rubik, -apple-system, system-ui, sans-serif",
        "fontSize": "14px",
        "fontWeight": 700,
        "lineHeight": 1.14,
        "letterSpacing": "0.2px"
      },
      "$type": "typography",
      "$description": "Typography style for button cap."
    },
    "button-cap-light": {
      "$value": {
        "fontFamily": "Rubik, -apple-system, system-ui, sans-serif",
        "fontSize": "14px",
        "fontWeight": 500,
        "lineHeight": 1.29,
        "letterSpacing": "0.2px"
      },
      "$type": "typography",
      "$description": "Typography style for button cap light."
    },
    "caption": {
      "$value": {
        "fontFamily": "Rubik, -apple-system, system-ui, sans-serif",
        "fontSize": "14px",
        "fontWeight": 400,
        "lineHeight": 1.43,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for caption."
    },
    "micro-cap": {
      "$value": {
        "fontFamily": "Rubik, -apple-system, system-ui, sans-serif",
        "fontSize": "10px",
        "fontWeight": 600,
        "lineHeight": 1.8,
        "letterSpacing": "0.25px"
      },
      "$type": "typography",
      "$description": "Typography style for micro cap."
    },
    "code": {
      "$value": {
        "fontFamily": "Monaco, Menlo, Ubuntu Mono, monospace",
        "fontSize": "16px",
        "fontWeight": 400,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for code."
    },
    "code-strong": {
      "$value": {
        "fontFamily": "Monaco, Menlo, Ubuntu Mono, monospace",
        "fontSize": "16px",
        "fontWeight": 700,
        "lineHeight": 1.5,
        "letterSpacing": 0
      },
      "$type": "typography",
      "$description": "Typography style for code strong."
    }
  },
  "spacing": {
    "xxs": {
      "$value": "2px",
      "$type": "dimension",
      "$description": "Spacing step xxs."
    },
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Spacing step xs."
    },
    "sm": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Spacing step sm."
    },
    "md": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Spacing step md."
    },
    "lg": {
      "$value": "16px",
      "$type": "dimension",
      "$description": "Spacing step lg."
    },
    "xl": {
      "$value": "24px",
      "$type": "dimension",
      "$description": "Spacing step xl."
    },
    "xxl": {
      "$value": "32px",
      "$type": "dimension",
      "$description": "Spacing step xxl."
    },
    "section": {
      "$value": "96px",
      "$type": "dimension",
      "$description": "Spacing step section."
    }
  },
  "radius": {
    "xs": {
      "$value": "4px",
      "$type": "dimension",
      "$description": "Border radius xs."
    },
    "sm": {
      "$value": "6px",
      "$type": "dimension",
      "$description": "Border radius sm."
    },
    "md": {
      "$value": "8px",
      "$type": "dimension",
      "$description": "Border radius md."
    },
    "lg": {
      "$value": "10px",
      "$type": "dimension",
      "$description": "Border radius lg."
    },
    "xl": {
      "$value": "12px",
      "$type": "dimension",
      "$description": "Border radius xl."
    },
    "xxl": {
      "$value": "18px",
      "$type": "dimension",
      "$description": "Border radius xxl."
    },
    "full": {
      "$value": "9999px",
      "$type": "dimension",
      "$description": "Border radius full."
    }
  },
  "shadow": {},
  "$extensions": {
    "com.design-md-editor.source": {
      "url": "https://sentry.io/",
      "note": "Official brand website used for visual comparison."
    }
  }
}