@nebutra/tokens 0.1.1 → 0.1.2

package/brands/raycast/brand.json

@@ -0,0 +1,167 @@
+{
+  "id": "raycast",
+  "name": "Raycast",
+  "darkDefault": true,
+  "version": "1.0.0",
+  "semantic": {
+    "background": "210 20% 2%",
+    "foreground": "0 0% 100%",
+    "card": "220 18% 3%",
+    "cardForeground": "0 0% 100%",
+    "popover": "220 18% 3%",
+    "popoverForeground": "0 0% 100%",
+    "primary": "0 0% 90%",
+    "primaryForeground": "210 1% 27%",
+    "secondary": "220 5% 11%",
+    "secondaryForeground": "0 0% 100%",
+    "muted": "220 8% 7%",
+    "mutedForeground": "210 1% 42%",
+    "accent": "0 100% 69%",
+    "accentForeground": "210 1% 27%",
+    "destructive": "0 72% 51%",
+    "destructiveForeground": "0 0% 100%",
+    "border": "210 2% 19%",
+    "input": "220 8% 7%",
+    "ring": "240 1% 61%",
+    "success": "151 59% 59%",
+    "successForeground": "210 20% 2%",
+    "info": "202 100% 67%",
+    "infoForeground": "210 20% 2%"
+  },
+  "recipe": {
+    "buttonDefault": "solid",
+    "density": "compact",
+    "badgeDefault": "muted",
+    "radii": {
+      "button": "8px",
+      "card": "16px",
+      "badge": "6px",
+      "input": "8px",
+      "pill": "9999px"
+    },
+    "elevationTokens": {
+      "card": "rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset",
+      "control": "0 0 #0000",
+      "raised": "rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset"
+    }
+  },
+  "typography": {
+    "fontSans": "'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif",
+    "fontMono": "'Geist Mono', 'GeistMono', ui-monospace, Menlo, monospace",
+    "fontDisplay": "'Inter', ui-sans-serif, system-ui, sans-serif",
+    "headingWeight": 400,
+    "faces": [
+      {
+        "family": "Inter",
+        "src": [
+          {
+            "url": "https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2",
+            "format": "woff2"
+          }
+        ],
+        "weight": "100 900",
+        "display": "swap"
+      }
+    ]
+  },
+  "zones": {
+    "product": {
+      "caption": {
+        "fontSize": "11px",
+        "lineHeight": 0.91,
+        "fontWeight": 500,
+        "letterSpacing": "0.8px"
+      },
+      "bodySm": {
+        "fontSize": "13px",
+        "lineHeight": 1.2,
+        "fontWeight": 500
+      },
+      "body": {
+        "fontSize": "16px",
+        "lineHeight": 1.15,
+        "fontWeight": 400
+      },
+      "bodyLg": {
+        "fontSize": "18px",
+        "lineHeight": 1.15,
+        "fontWeight": 400
+      },
+      "subheading": {
+        "fontSize": "20px",
+        "lineHeight": 1.2,
+        "fontWeight": 400,
+        "letterSpacing": "0.2px"
+      },
+      "headingSm": {
+        "fontSize": "24px",
+        "lineHeight": 1.15,
+        "fontWeight": 500
+      },
+      "heading": {
+        "fontSize": "32px",
+        "lineHeight": 1.15,
+        "fontWeight": 500
+      }
+    },
+    "marketing": {
+      "body": {
+        "fontSize": "16px",
+        "lineHeight": 1.15,
+        "fontWeight": 400
+      },
+      "heading": {
+        "fontSize": "32px",
+        "lineHeight": 1.15,
+        "fontWeight": 500
+      },
+      "headingLg": {
+        "fontSize": "56px",
+        "lineHeight": 1.17,
+        "fontWeight": 400,
+        "letterSpacing": "0.22px"
+      },
+      "display": {
+        "fontSize": "64px",
+        "lineHeight": 1.1,
+        "fontWeight": 600
+      }
+    }
+  },
+  "extensions": {
+    "categories": {
+      "brand": "#ff6363",
+      "ember": "#452324",
+      "sky": "#63a1ff"
+    },
+    "sourceUrl": "https://raycast.com",
+    "notes": [
+      "Primary CTA = Mist fill + Iron text (neutral solid).",
+      "Coral Pulse is brand mark only — do not use for general product chrome CTAs.",
+      "Cards use elevation=key (keyboard-key inset shadow stack)."
+    ]
+  },
+  "roles": {
+    "canvas": "210 20% 2%",
+    "canvasForeground": "0 0% 100%",
+    "surface": "220 18% 3%",
+    "surfaceForeground": "0 0% 100%",
+    "action": "0 0% 90%",
+    "actionForeground": "210 1% 27%",
+    "quiet": "220 5% 11%",
+    "quietForeground": "0 0% 100%",
+    "muted": "220 8% 7%",
+    "mutedForeground": "210 1% 42%",
+    "border": "210 2% 19%",
+    "input": "220 8% 7%",
+    "ring": "240 1% 61%",
+    "destructive": "0 72% 51%",
+    "destructiveForeground": "0 0% 100%",
+    "brand": "0 100% 69%",
+    "brandForeground": "210 1% 27%",
+    "success": "151 59% 59%",
+    "successForeground": "210 20% 2%",
+    "info": "202 100% 67%",
+    "infoForeground": "210 20% 2%"
+  }
+}

package/brands/stripe/brand.json

@@ -0,0 +1,183 @@
+{
+  "id": "stripe",
+  "name": "Stripe",
+  "darkDefault": false,
+  "version": "1.0.0",
+  "roles": {
+    "canvas": "0 0% 100%",
+    "canvasForeground": "211 78% 11%",
+    "surface": "0 0% 100%",
+    "surfaceForeground": "211 78% 11%",
+    "action": "248 98% 61%",
+    "actionForeground": "0 0% 100%",
+    "quiet": "237 100% 95%",
+    "quietForeground": "248 98% 61%",
+    "muted": "216 56% 98%",
+    "mutedForeground": "217 17% 47%",
+    "border": "210 44% 93%",
+    "input": "0 0% 100%",
+    "ring": "248 98% 61%",
+    "destructive": "0 72% 51%",
+    "destructiveForeground": "0 0% 100%",
+    "brand": "211 78% 11%",
+    "brandForeground": "0 0% 100%",
+    "info": "231 100% 73%",
+    "infoForeground": "211 78% 11%"
+  },
+  "semantic": {
+    "background": "0 0% 100%",
+    "foreground": "211 78% 11%",
+    "card": "0 0% 100%",
+    "cardForeground": "211 78% 11%",
+    "popover": "0 0% 100%",
+    "popoverForeground": "211 78% 11%",
+    "primary": "248 98% 61%",
+    "primaryForeground": "0 0% 100%",
+    "secondary": "237 100% 95%",
+    "secondaryForeground": "248 98% 61%",
+    "muted": "216 56% 98%",
+    "mutedForeground": "217 17% 47%",
+    "accent": "211 78% 11%",
+    "accentForeground": "0 0% 100%",
+    "destructive": "0 72% 51%",
+    "destructiveForeground": "0 0% 100%",
+    "border": "210 44% 93%",
+    "input": "0 0% 100%",
+    "ring": "248 98% 61%",
+    "info": "231 100% 73%",
+    "infoForeground": "211 78% 11%"
+  },
+  "recipe": {
+    "buttonDefault": "solid",
+    "density": "comfortable",
+    "badgeDefault": "muted",
+    "radii": {
+      "button": "4px",
+      "card": "4px",
+      "badge": "9999px",
+      "input": "4px",
+      "pill": "9999px"
+    },
+    "elevationTokens": {
+      "card": "0 0 #0000",
+      "control": "0 0 #0000",
+      "raised": "0 0 #0000"
+    },
+    "outlineBorder": "#b9b9f9"
+  },
+  "typography": {
+    "fontSans": "'sohne-var', 'Inter Tight', 'Inter', ui-sans-serif, system-ui, sans-serif",
+    "fontDisplay": "'sohne-var', 'Inter Tight', ui-sans-serif, system-ui, sans-serif",
+    "headingWeight": 300,
+    "faces": [
+      {
+        "family": "sohne-var",
+        "src": [
+          {
+            "url": "/brand-assets/sohne-var.woff2",
+            "format": "woff2"
+          }
+        ],
+        "weight": "300 400",
+        "display": "swap"
+      }
+    ]
+  },
+  "zones": {
+    "product": {
+      "caption": {
+        "fontSize": "12px",
+        "lineHeight": 1.45,
+        "fontWeight": 300,
+        "letterSpacing": "-0.12px"
+      },
+      "bodySm": {
+        "fontSize": "14px",
+        "lineHeight": 1.4,
+        "fontWeight": 400,
+        "letterSpacing": "-0.14px"
+      },
+      "body": {
+        "fontSize": "16px",
+        "lineHeight": 1.2,
+        "fontWeight": 400,
+        "letterSpacing": "-0.16px"
+      },
+      "bodyLg": {
+        "fontSize": "20px",
+        "lineHeight": 1.4,
+        "fontWeight": 300,
+        "letterSpacing": "-0.2px"
+      },
+      "subheading": {
+        "fontSize": "22px",
+        "lineHeight": 1.1,
+        "fontWeight": 300,
+        "letterSpacing": "-0.22px"
+      },
+      "headingSm": {
+        "fontSize": "26px",
+        "lineHeight": 1.12,
+        "fontWeight": 300,
+        "letterSpacing": "-0.26px"
+      },
+      "heading": {
+        "fontSize": "32px",
+        "lineHeight": 1.1,
+        "fontWeight": 300,
+        "letterSpacing": "-0.64px"
+      }
+    },
+    "marketing": {
+      "body": {
+        "fontSize": "16px",
+        "lineHeight": 1.4,
+        "fontWeight": 300,
+        "letterSpacing": "-0.16px"
+      },
+      "heading": {
+        "fontSize": "32px",
+        "lineHeight": 1.1,
+        "fontWeight": 300,
+        "letterSpacing": "-0.64px"
+      },
+      "headingLg": {
+        "fontSize": "48px",
+        "lineHeight": 1.03,
+        "fontWeight": 300,
+        "letterSpacing": "-0.96px"
+      },
+      "display": {
+        "fontSize": "56px",
+        "lineHeight": 1.03,
+        "fontWeight": 300,
+        "letterSpacing": "-1.4px"
+      }
+    }
+  },
+  "extensions": {
+    "categories": {
+      "brand": "#061b31",
+      "action": "#533afd",
+      "link": "#533afd",
+      "hover": "#7389ff",
+      "ghostBorder": "#b9b9f9",
+      "wash": "#e8e9ff",
+      "deep": "#182659",
+      "smoke": "#839bc8",
+      "steel": "#50617a"
+    },
+    "decorative": {
+      "section-band": "#f8fafd",
+      "frost": "#e5edf5"
+    },
+    "sourceUrl": "https://stripe.com",
+    "notes": [
+      "roles.action = Indigo Ink filled CTA; roles.brand = Midnight Ink wordmark.",
+      "Elevation none — tint ladder + 1px frost rules; never box-shadow.",
+      "Control radius 4px (not pill); tags may stay full-pill.",
+      "Typography weight 300 is the product signature (Inter Tight substitute).",
+      "Pair solid CTA with ghost outline (lavender border) as secondary."
+    ]
+  }
+}

package/brands/vanta/brand.json

@@ -0,0 +1,198 @@
+{
+  "id": "vanta",
+  "name": "Vanta",
+  "darkDefault": false,
+  "version": "1.0.0",
+  "roles": {
+    "canvas": "220 23% 97%",
+    "canvasForeground": "240 17% 11%",
+    "surface": "0 0% 100%",
+    "surfaceForeground": "240 17% 11%",
+    "action": "268 95% 39%",
+    "actionForeground": "0 0% 100%",
+    "quiet": "250 100% 92%",
+    "quietForeground": "272 100% 14%",
+    "muted": "240 20% 93%",
+    "mutedForeground": "238 11% 48%",
+    "border": "240 17% 11%",
+    "input": "0 0% 100%",
+    "ring": "268 95% 39%",
+    "destructive": "0 72% 51%",
+    "destructiveForeground": "0 0% 100%",
+    "brand": "272 100% 14%",
+    "brandForeground": "0 0% 100%",
+    "warning": "44 100% 53%",
+    "warningForeground": "240 17% 11%",
+    "info": "270 63% 56%",
+    "infoForeground": "0 0% 100%"
+  },
+  "semantic": {
+    "background": "220 23% 97%",
+    "foreground": "240 17% 11%",
+    "card": "0 0% 100%",
+    "cardForeground": "240 17% 11%",
+    "popover": "0 0% 100%",
+    "popoverForeground": "240 17% 11%",
+    "primary": "268 95% 39%",
+    "primaryForeground": "0 0% 100%",
+    "secondary": "250 100% 92%",
+    "secondaryForeground": "272 100% 14%",
+    "muted": "240 20% 93%",
+    "mutedForeground": "238 11% 48%",
+    "accent": "272 100% 14%",
+    "accentForeground": "0 0% 100%",
+    "destructive": "0 72% 51%",
+    "destructiveForeground": "0 0% 100%",
+    "border": "240 17% 11%",
+    "input": "0 0% 100%",
+    "ring": "268 95% 39%",
+    "warning": "44 100% 53%",
+    "warningForeground": "240 17% 11%",
+    "info": "270 63% 56%",
+    "infoForeground": "0 0% 100%"
+  },
+  "recipe": {
+    "buttonDefault": "solid",
+    "density": "comfortable",
+    "badgeDefault": "muted",
+    "radii": {
+      "button": "999px",
+      "card": "16px",
+      "badge": "999px",
+      "input": "999px",
+      "pill": "9999px"
+    },
+    "elevationTokens": {
+      "card": "0 0 #0000",
+      "control": "0 0 #0000",
+      "raised": "0 0 #0000"
+    },
+    "outlineBorder": "#181822"
+  },
+  "typography": {
+    "fontSans": "'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif",
+    "fontDisplay": "'Reckless', 'Source Serif 4', 'Lora', ui-serif, Georgia, serif",
+    "headingWeight": 500,
+    "faces": [
+      {
+        "family": "Inter Variable",
+        "src": [
+          {
+            "url": "https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2",
+            "format": "woff2"
+          }
+        ],
+        "weight": "100 900",
+        "display": "swap"
+      },
+      {
+        "family": "Reckless",
+        "src": [
+          {
+            "url": "/brand-assets/reckless-regular.woff2",
+            "format": "woff2"
+          }
+        ],
+        "weight": 400,
+        "display": "swap"
+      },
+      {
+        "family": "Reckless",
+        "src": [
+          {
+            "url": "/brand-assets/reckless-medium.woff2",
+            "format": "woff2"
+          }
+        ],
+        "weight": 500,
+        "display": "swap"
+      }
+    ]
+  },
+  "zones": {
+    "product": {
+      "caption": {
+        "fontSize": "12px",
+        "lineHeight": 1.5,
+        "fontWeight": 500,
+        "letterSpacing": "-0.02px"
+      },
+      "bodySm": {
+        "fontSize": "14px",
+        "lineHeight": 1.43,
+        "fontWeight": 400,
+        "letterSpacing": "-0.02px"
+      },
+      "body": {
+        "fontSize": "16px",
+        "lineHeight": 1.5,
+        "fontWeight": 400,
+        "letterSpacing": "-0.02px"
+      },
+      "subheading": {
+        "fontSize": "20px",
+        "lineHeight": 1.4,
+        "fontWeight": 500
+      },
+      "headingSm": {
+        "fontSize": "24px",
+        "lineHeight": 1.35,
+        "fontWeight": 500
+      },
+      "heading": {
+        "fontSize": "32px",
+        "lineHeight": 1.3,
+        "fontWeight": 500
+      }
+    },
+    "marketing": {
+      "body": {
+        "fontSize": "16px",
+        "lineHeight": 1.5,
+        "fontWeight": 400,
+        "letterSpacing": "-0.02px"
+      },
+      "heading": {
+        "fontSize": "42px",
+        "lineHeight": 1.2,
+        "fontWeight": 400,
+        "letterSpacing": "-0.84px"
+      },
+      "headingLg": {
+        "fontSize": "56px",
+        "lineHeight": 1.15,
+        "fontWeight": 400,
+        "letterSpacing": "-1.12px"
+      },
+      "display": {
+        "fontSize": "90px",
+        "lineHeight": 1.1,
+        "fontWeight": 400,
+        "letterSpacing": "-1.62px"
+      }
+    }
+  },
+  "extensions": {
+    "categories": {
+      "brand": "#260048",
+      "action": "#5e05c4",
+      "link": "#8f47d5",
+      "heroWash": "#ddd6ff",
+      "warning": "#ffbe0f",
+      "steel": "#9e9fb7",
+      "ash": "#dfdfe9"
+    },
+    "decorative": {
+      "hero-wash": "#ddd6ff"
+    },
+    "sourceUrl": "https://www.vanta.com",
+    "notes": [
+      "roles.action = Vivid Violet (filled CTA only).",
+      "roles.brand = Indigo Ink (logo / wordmark / brand-mark).",
+      "Elevation none — 1px carbon borders frame cards; no drop-shadow.",
+      "Full-pill controls (999px); cards 16px.",
+      "UI = Inter Variable; marketing display = Reckless serif.",
+      "Lavender wash is marketing hero surface (decorative), not product chrome fill."
+    ]
+  }
+}