@phcdevworks/spectre-tokens 1.0.0 → 2.0.0

package/tokens/components.json

@@ -0,0 +1,155 @@
+{
+  "component": {
+    "card": {
+      "text": { "value": "{colors.neutral.900}" },
+      "textMuted": { "value": "{colors.neutral.500}" }
+    },
+    "input": {
+      "text": { "value": "{colors.neutral.900}" },
+      "placeholder": { "value": "{colors.neutral.400}" }
+    },
+    "button": {
+      "textDefault": { "value": "{colors.neutral.900}" },
+      "textOnPrimary": { "value": "{colors.white}" }
+    },
+    "badge": {
+      "neutralBg": { "value": "{colors.neutral.100}", "metadata": { "pair": "component.badge.neutralText" } },
+      "neutralBgHover": { "value": "{colors.neutral.200}" },
+      "neutralText": { "value": "{colors.neutral.700}" },
+      "infoBg": { "value": "{colors.info.100}", "metadata": { "pair": "component.badge.infoText" } },
+      "infoBgHover": { "value": "{colors.info.200}" },
+      "infoText": { "value": "{colors.info.700}" },
+      "successBg": { "value": "{colors.success.100}", "metadata": { "pair": "component.badge.successText" } },
+      "successBgHover": { "value": "{colors.success.200}" },
+      "successText": { "value": "{colors.success.700}" },
+      "warningBg": { "value": "{colors.warning.100}", "metadata": { "pair": "component.badge.warningText" } },
+      "warningBgHover": { "value": "{colors.warning.200}" },
+      "warningText": { "value": "{colors.warning.700}" },
+      "dangerBg": { "value": "{colors.error.100}", "metadata": { "pair": "component.badge.dangerText" } },
+      "dangerBgHover": { "value": "{colors.error.200}" },
+      "dangerText": { "value": "{colors.error.700}" }
+    },
+    "iconBox": {
+      "bg": { "value": "{colors.white}" },
+      "border": { "value": "{colors.neutral.200}" },
+      "iconDefault": { "value": "{colors.info.600}" },
+      "iconSuccess": { "value": "{colors.success.600}" },
+      "iconWarning": { "value": "{colors.warning.600}" },
+      "iconDanger": { "value": "{colors.error.600}" }
+    },
+    "testimonial": {
+      "bg": { "value": "{colors.white}" },
+      "border": { "value": "{colors.neutral.200}" },
+      "text": { "value": "{colors.neutral.700}" },
+      "authorName": { "value": "{colors.neutral.900}" },
+      "authorTitle": { "value": "{colors.neutral.500}" },
+      "quoteMark": { "value": "{colors.neutral.300}" }
+    },
+    "pricingCard": {
+      "bg": { "value": "{colors.white}", "metadata": {} },
+      "border": { "value": "{colors.neutral.200}", "metadata": {} },
+      "featuredBg": { "value": "{colors.info.600}", "metadata": { "pair": "component.pricingCard.featuredText" } },
+      "featuredText": { "value": "{colors.white}", "metadata": {} },
+      "featuredBadgeBg": { "value": "{colors.warning.500}", "metadata": { "pair": "component.pricingCard.featuredBadgeText" } },
+      "featuredBadgeText": { "value": "{colors.neutral.900}", "metadata": {} },
+      "price": { "value": "{colors.neutral.900}", "metadata": {} },
+      "priceDescription": { "value": "{colors.neutral.500}", "metadata": {} }
+    },
+    "rating": {
+      "starFilled": { "value": "{colors.warning.500}" },
+      "starEmpty": { "value": "{colors.neutral.200}" },
+      "text": { "value": "{colors.neutral.500}" }
+    }
+  },
+  "buttons": {
+    "primary": {
+      "bg": { "value": "{colors.info.600}", "metadata": { "pair": "buttons.primary.text" } },
+      "bgHover": { "value": "{colors.info.700}" },
+      "bgActive": { "value": "{colors.info.800}" },
+      "bgDisabled": { "value": "{colors.neutral.200}" },
+      "text": { "value": "{colors.white}" },
+      "textDisabled": { "value": "{colors.neutral.400}" }
+    },
+    "secondary": {
+      "bg": { "value": "{colors.white}", "metadata": { "pair": "buttons.secondary.text" } },
+      "bgHover": { "value": "{colors.neutral.50}" },
+      "bgActive": { "value": "{colors.neutral.100}" },
+      "bgDisabled": { "value": "{colors.neutral.50}" },
+      "text": { "value": "{colors.info.600}" },
+      "textDisabled": { "value": "{colors.neutral.400}" },
+      "border": { "value": "{colors.info.600}" },
+      "borderDisabled": { "value": "{colors.neutral.200}" }
+    },
+    "ghost": {
+      "bg": { "value": "transparent" },
+      "bgHover": { "value": "{colors.info.50}" },
+      "bgActive": { "value": "{colors.info.100}" },
+      "bgDisabled": { "value": "transparent" },
+      "text": { "value": "{colors.info.600}" },
+      "textDisabled": { "value": "{colors.neutral.400}" }
+    },
+    "danger": {
+      "bg": { "value": "{colors.error.600}", "metadata": { "pair": "buttons.danger.text" } },
+      "bgHover": { "value": "{colors.error.700}" },
+      "bgActive": { "value": "{colors.error.800}" },
+      "bgDisabled": { "value": "{colors.error.200}" },
+      "text": { "value": "{colors.white}" },
+      "textDisabled": { "value": "{colors.neutral.400}" }
+    },
+    "success": {
+      "bg": { "value": "{colors.success.700}", "metadata": { "pair": "buttons.success.text" } },
+      "bgHover": { "value": "{colors.success.800}" },
+      "bgActive": { "value": "{colors.success.900}" },
+      "bgDisabled": { "value": "{colors.success.200}" },
+      "text": { "value": "{colors.white}" },
+      "textDisabled": { "value": "{colors.neutral.400}" }
+    },
+    "cta": {
+      "bg": { "value": "{colors.warning.500}", "metadata": { "pair": "buttons.cta.text" } },
+      "bgHover": { "value": "{colors.warning.600}" },
+      "bgActive": { "value": "{colors.warning.700}" },
+      "bgDisabled": { "value": "{colors.warning.200}" },
+      "text": { "value": "{colors.neutral.900}" },
+      "textDisabled": { "value": "{colors.neutral.400}" },
+      "shadow": { "value": "0 4px 14px 0 {colors.warning.500} / 0.39" }
+    },
+    "accent": {
+      "bg": { "value": "{colors.accent.600}", "metadata": { "pair": "buttons.accent.text" } },
+      "bgHover": { "value": "{colors.accent.700}" },
+      "bgActive": { "value": "{colors.accent.800}" },
+      "bgDisabled": { "value": "{colors.accent.200}" },
+      "text": { "value": "{colors.white}" },
+      "textDisabled": { "value": "{colors.neutral.400}" }
+    }
+  },
+  "forms": {
+    "default": {
+      "bg": { "value": "{colors.white}" },
+      "border": { "value": "{colors.neutral.300}" },
+      "text": { "value": "{colors.neutral.900}" },
+      "placeholder": { "value": "{colors.neutral.400}" }
+    },
+    "hover": {
+      "border": { "value": "{colors.info.500}" }
+    },
+    "focus": {
+      "border": { "value": "{colors.info.500}" },
+      "ring": { "value": "{colors.info.500}" }
+    },
+    "valid": {
+      "border": { "value": "{colors.success.500}" },
+      "bg": { "value": "{colors.success.50}", "metadata": { "pair": "forms.valid.text" } },
+      "text": { "value": "{colors.success.700}" }
+    },
+    "invalid": {
+      "border": { "value": "{colors.error.500}" },
+      "bg": { "value": "{colors.error.50}", "metadata": { "pair": "forms.invalid.text" } },
+      "text": { "value": "{colors.error.700}" }
+    },
+    "disabled": {
+      "bg": { "value": "{colors.neutral.50}" },
+      "border": { "value": "{colors.neutral.200}" },
+      "text": { "value": "{colors.neutral.400}" }
+    }
+  }
+}

package/tokens/modes.json

@@ -0,0 +1,182 @@
+{
+  "modes": {
+    "default": {
+      "surface": {
+        "page": {
+          "value": "{colors.neutral.50}"
+        },
+        "card": {
+          "value": "{colors.white}"
+        },
+        "input": {
+          "value": "{colors.white}"
+        },
+        "overlay": {
+          "value": "{colors.neutral.900} / 0.6"
+        },
+        "alternate": {
+          "value": "{colors.neutral.100}"
+        },
+        "hero": {
+          "value": "linear-gradient(135deg, {colors.indigo.500} 0%, {colors.violet.600} 100%)"
+        }
+      },
+      "text": {
+        "onPage": {
+          "default": { "value": "{colors.neutral.900}" },
+          "muted": { "value": "{colors.neutral.600}" },
+          "subtle": { "value": "{colors.neutral.500}" },
+          "meta": { "value": "{colors.neutral.500}" },
+          "brand": { "value": "{colors.brand.600}" }
+        },
+        "onSurface": {
+          "default": { "value": "{colors.neutral.900}" },
+          "muted": { "value": "{colors.neutral.600}" },
+          "subtle": { "value": "{colors.neutral.500}" },
+          "meta": { "value": "{colors.neutral.500}" },
+          "brand": { "value": "{colors.brand.600}" }
+        }
+      },
+      "component": {
+        "card": {
+          "text": { "value": "{colors.neutral.900}" },
+          "textMuted": { "value": "{colors.neutral.500}" }
+        },
+        "input": {
+          "text": { "value": "{colors.neutral.900}" },
+          "placeholder": { "value": "{colors.neutral.400}" }
+        },
+        "button": {
+          "textDefault": { "value": "{colors.neutral.900}" },
+          "textOnPrimary": { "value": "{colors.white}" }
+        },
+        "badge": {
+          "neutralBg": { "value": "{colors.neutral.100}", "metadata": { "pair": "modes.default.component.badge.neutralText" } },
+          "neutralText": { "value": "{colors.neutral.700}", "metadata": {} },
+          "infoBg": { "value": "{colors.info.100}", "metadata": { "pair": "modes.default.component.badge.infoText" } },
+          "infoText": { "value": "{colors.info.700}", "metadata": {} },
+          "successBg": { "value": "{colors.success.100}", "metadata": { "pair": "modes.default.component.badge.successText" } },
+          "successText": { "value": "{colors.success.700}", "metadata": {} },
+          "warningBg": { "value": "{colors.warning.100}", "metadata": { "pair": "modes.default.component.badge.warningText" } },
+          "warningText": { "value": "{colors.warning.700}", "metadata": {} },
+          "dangerBg": { "value": "{colors.error.100}", "metadata": { "pair": "modes.default.component.badge.dangerText" } },
+          "dangerText": { "value": "{colors.error.700}", "metadata": {} }
+        },
+        "iconBox": {
+          "bg": { "value": "{colors.white}", "metadata": {} },
+          "border": { "value": "{colors.neutral.200}", "metadata": {} },
+          "iconDefault": { "value": "{colors.info.600}", "metadata": {} },
+          "iconSuccess": { "value": "{colors.success.600}", "metadata": {} },
+          "iconWarning": { "value": "{colors.warning.600}", "metadata": {} },
+          "iconDanger": { "value": "{colors.error.600}", "metadata": {} }
+        },
+        "testimonial": {
+          "bg": { "value": "{colors.white}", "metadata": {} },
+          "border": { "value": "{colors.neutral.200}", "metadata": {} },
+          "text": { "value": "{colors.neutral.700}", "metadata": {} },
+          "authorName": { "value": "{colors.neutral.900}", "metadata": {} },
+          "authorTitle": { "value": "{colors.neutral.500}", "metadata": {} },
+          "quoteMark": { "value": "{colors.neutral.300}", "metadata": {} }
+        },
+        "pricingCard": {
+          "bg": { "value": "{colors.white}", "metadata": {} },
+          "border": { "value": "{colors.neutral.200}", "metadata": {} },
+          "featuredBg": { "value": "{colors.info.600}", "metadata": { "pair": "modes.default.component.pricingCard.featuredText" } },
+          "featuredText": { "value": "{colors.white}", "metadata": {} },
+          "featuredBadgeBg": { "value": "{colors.warning.500}", "metadata": { "pair": "modes.default.component.pricingCard.featuredBadgeText" } },
+          "featuredBadgeText": { "value": "{colors.neutral.900}", "metadata": {} },
+          "price": { "value": "{colors.neutral.900}", "metadata": {} },
+          "priceDescription": { "value": "{colors.neutral.500}", "metadata": {} }
+        },
+        "rating": {
+          "starFilled": { "value": "{colors.warning.500}", "metadata": {} },
+          "starEmpty": { "value": "{colors.neutral.200}", "metadata": {} },
+          "text": { "value": "{colors.neutral.500}", "metadata": {} }
+        }
+      }
+    },
+    "dark": {
+      "surface": {
+        "page": { "value": "{colors.neutral.900}" },
+        "card": { "value": "{colors.neutral.800}" },
+        "input": { "value": "{colors.neutral.700}" },
+        "overlay": { "value": "{colors.neutral.800}" },
+        "alternate": { "value": "{colors.neutral.800}" },
+        "hero": { "value": "linear-gradient(135deg, {colors.accent.900} 0%, {colors.accent.700} 100%)" }
+      },
+      "text": {
+        "onPage": {
+          "default": { "value": "{colors.neutral.50}" },
+          "muted": { "value": "{colors.neutral.300}" },
+          "subtle": { "value": "{colors.neutral.400}" },
+          "meta": { "value": "{colors.neutral.400}" },
+          "brand": { "value": "{colors.brand.400}" }
+        },
+        "onSurface": {
+          "default": { "value": "{colors.neutral.100}" },
+          "muted": { "value": "{colors.neutral.300}" },
+          "subtle": { "value": "{colors.neutral.400}" },
+          "meta": { "value": "{colors.neutral.400}" },
+          "brand": { "value": "{colors.brand.400}" }
+        }
+      },
+      "component": {
+        "card": {
+          "text": { "value": "{colors.neutral.100}" },
+          "textMuted": { "value": "{colors.neutral.300}" }
+        },
+        "input": {
+          "text": { "value": "{colors.neutral.100}" },
+          "placeholder": { "value": "{colors.neutral.400}" }
+        },
+        "button": {
+          "textDefault": { "value": "{colors.neutral.100}" },
+          "textOnPrimary": { "value": "{colors.white}" }
+        },
+        "badge": {
+          "neutralBg": { "value": "{colors.neutral.700}", "metadata": { "pair": "modes.dark.component.badge.neutralText" } },
+          "neutralText": { "value": "{colors.neutral.100}", "metadata": {} },
+          "infoBg": { "value": "{colors.info.800}", "metadata": { "pair": "modes.dark.component.badge.infoText" } },
+          "infoText": { "value": "{colors.info.100}", "metadata": {} },
+          "successBg": { "value": "{colors.success.800}", "metadata": { "pair": "modes.dark.component.badge.successText" } },
+          "successText": { "value": "{colors.success.100}", "metadata": {} },
+          "warningBg": { "value": "{colors.warning.800}", "metadata": { "pair": "modes.dark.component.badge.warningText" } },
+          "warningText": { "value": "{colors.warning.100}", "metadata": {} },
+          "dangerBg": { "value": "{colors.error.800}", "metadata": { "pair": "modes.dark.component.badge.dangerText" } },
+          "dangerText": { "value": "{colors.error.100}", "metadata": {} }
+        },
+        "iconBox": {
+          "bg": { "value": "{colors.neutral.800}", "metadata": {} },
+          "border": { "value": "{colors.neutral.700}", "metadata": {} },
+          "iconDefault": { "value": "{colors.info.300}", "metadata": {} },
+          "iconSuccess": { "value": "{colors.success.400}", "metadata": {} },
+          "iconWarning": { "value": "{colors.warning.400}", "metadata": {} },
+          "iconDanger": { "value": "{colors.error.400}", "metadata": {} }
+        },
+        "testimonial": {
+          "bg": { "value": "{colors.neutral.800}", "metadata": {} },
+          "border": { "value": "{colors.neutral.700}", "metadata": {} },
+          "text": { "value": "{colors.neutral.300}", "metadata": {} },
+          "authorName": { "value": "{colors.neutral.100}", "metadata": {} },
+          "authorTitle": { "value": "{colors.neutral.400}", "metadata": {} },
+          "quoteMark": { "value": "{colors.neutral.600}", "metadata": {} }
+        },
+        "pricingCard": {
+          "bg": { "value": "{colors.neutral.800}", "metadata": {} },
+          "border": { "value": "{colors.neutral.700}", "metadata": {} },
+          "featuredBg": { "value": "{colors.info.600}", "metadata": { "pair": "modes.dark.component.pricingCard.featuredText" } },
+          "featuredText": { "value": "{colors.white}", "metadata": {} },
+          "featuredBadgeBg": { "value": "{colors.warning.500}", "metadata": { "pair": "modes.dark.component.pricingCard.featuredBadgeText" } },
+          "featuredBadgeText": { "value": "{colors.neutral.900}", "metadata": {} },
+          "price": { "value": "{colors.neutral.100}", "metadata": {} },
+          "priceDescription": { "value": "{colors.neutral.400}", "metadata": {} }
+        },
+        "rating": {
+          "starFilled": { "value": "{colors.warning.400}", "metadata": {} },
+          "starEmpty": { "value": "{colors.neutral.700}", "metadata": {} },
+          "text": { "value": "{colors.neutral.400}", "metadata": {} }
+        }
+      }
+    }
+  }
+}

package/tokens/palette.json

@@ -0,0 +1,102 @@
+{
+  "colors": {
+    "brand": {
+      "50": "#eff6ff",
+      "100": "#dbeafe",
+      "200": "#bfdbfe",
+      "300": "#93c5fd",
+      "400": "#60a5fa",
+      "500": "#3b82f6",
+      "600": "#2563eb",
+      "700": "#1d4ed8",
+      "800": "#1e40af",
+      "900": "#1e3a8a"
+    },
+    "neutral": {
+      "50": "#f8fafc",
+      "100": "#f1f5f9",
+      "200": "#e2e8f0",
+      "300": "#cbd5e1",
+      "400": "#94a3b8",
+      "500": "#64748b",
+      "600": "#475569",
+      "700": "#334155",
+      "800": "#1e293b",
+      "900": "#0f172a"
+    },
+    "accent": {
+      "50": "#eff6ff",
+      "100": "#dbeafe",
+      "200": "#ddd6fe",
+      "300": "#93c5fd",
+      "400": "#60a5fa",
+      "500": "#8b5cf6",
+      "600": "#7c3aed",
+      "700": "#6d28d9",
+      "800": "#1e40af",
+      "900": "#1e3a8a"
+    },
+    "success": {
+      "50": "#f0fdf4",
+      "100": "#dcfce7",
+      "200": "#bbf7d0",
+      "300": "#86efac",
+      "400": "#4ade80",
+      "500": "#22c55e",
+      "600": "#16a34a",
+      "700": "#15803d",
+      "800": "#166534",
+      "900": "#14532d"
+    },
+    "warning": {
+      "50": "#fffbeb",
+      "100": "#fef3c7",
+      "200": "#fde68a",
+      "300": "#fcd34d",
+      "400": "#fbbf24",
+      "500": "#f59e0b",
+      "600": "#d97706",
+      "700": "#b45309",
+      "800": "#92400e",
+      "900": "#78350f"
+    },
+    "error": {
+      "50": "#fef2f2",
+      "100": "#fee2e2",
+      "200": "#fecaca",
+      "300": "#fca5a5",
+      "400": "#f87171",
+      "500": "#ef4444",
+      "600": "#dc2626",
+      "700": "#b91c1c",
+      "800": "#991b1b",
+      "900": "#7f1d1d"
+    },
+    "info": {
+      "50": "#eff6ff",
+      "100": "#dbeafe",
+      "200": "#bfdbfe",
+      "300": "#93c5fd",
+      "400": "#60a5fa",
+      "500": "#3b82f6",
+      "600": "#2563eb",
+      "700": "#1d4ed8",
+      "800": "#1e40af",
+      "900": "#1e3a8a"
+    },
+    "indigo": {
+      "500": "#667eea",
+      "600": "#5c67f2"
+    },
+    "violet": {
+      "600": "#764ba2"
+    },
+    "focus": {
+      "primary": "#3b82f6",
+      "error": "#ef4444",
+      "info": "#3b82f6"
+    },
+    "white": "#ffffff",
+    "black": "#000000"
+  }
+}

package/tokens/primitives.json

@@ -0,0 +1,145 @@
+{
+  "space": {
+    "0": "0rem",
+    "4": "0.25rem",
+    "8": "0.5rem",
+    "12": "0.75rem",
+    "16": "1rem",
+    "20": "1.25rem",
+    "24": "1.5rem",
+    "32": "2rem",
+    "40": "2.5rem",
+    "48": "3rem",
+    "56": "3.5rem",
+    "64": "4rem",
+    "80": "5rem",
+    "96": "6rem"
+  },
+  "radii": {
+    "none": "0",
+    "sm": "2px",
+    "md": "4px",
+    "lg": "8px",
+    "pill": "999px"
+  },
+  "shadows": {
+    "none": "none",
+    "sm": "0 1px 2px 0 {colors.neutral.800} / 0.06",
+    "md": "0 2px 6px -1px {colors.neutral.800} / 0.08",
+    "lg": "0 6px 16px -4px {colors.neutral.800} / 0.12"
+  },
+  "breakpoints": {
+    "sm": "640px",
+    "md": "768px",
+    "lg": "1024px",
+    "xl": "1280px",
+    "2xl": "1536px"
+  },
+  "zIndex": {
+    "base": "0",
+    "dropdown": "1000",
+    "sticky": "1100",
+    "fixed": "1200",
+    "overlay": "1300",
+    "modal": "1400",
+    "popover": "1500",
+    "tooltip": "1600"
+  },
+  "transitions": {
+    "duration": {
+      "instant": "75ms",
+      "fast": "150ms",
+      "base": "200ms",
+      "moderate": "300ms",
+      "slow": "500ms",
+      "slower": "700ms"
+    },
+    "easing": {
+      "linear": "linear",
+      "in": "cubic-bezier(0.4, 0, 1, 1)",
+      "out": "cubic-bezier(0, 0, 0.2, 1)",
+      "inOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "spring": "cubic-bezier(0.4, 0, 0.2, 1)"
+    }
+  },
+  "animations": {
+    "fadeIn": {
+      "duration": "200ms",
+      "easing": "cubic-bezier(0, 0, 0.2, 1)",
+      "keyframes": "fade-in"
+    },
+    "fadeOut": {
+      "duration": "150ms",
+      "easing": "cubic-bezier(0.4, 0, 1, 1)",
+      "keyframes": "fade-out"
+    },
+    "slideUp": {
+      "duration": "300ms",
+      "easing": "cubic-bezier(0, 0, 0.2, 1)",
+      "keyframes": "slide-up"
+    },
+    "slideDown": {
+      "duration": "300ms",
+      "easing": "cubic-bezier(0, 0, 0.2, 1)",
+      "keyframes": "slide-down"
+    },
+    "scaleIn": {
+      "duration": "200ms",
+      "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "keyframes": "scale-in"
+    },
+    "bounce": {
+      "duration": "300ms",
+      "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "keyframes": "bounce"
+    },
+    "shake": {
+      "duration": "250ms",
+      "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "keyframes": "shake"
+    },
+    "pulse": {
+      "duration": "1200ms",
+      "easing": "cubic-bezier(0.4, 0, 0.2, 1)",
+      "keyframes": "pulse"
+    }
+  },
+  "opacity": {
+    "disabled": "0.38",
+    "hover": "0.92",
+    "active": "0.84",
+    "focus": "1",
+    "overlay": "0.5",
+    "tooltip": "0.95"
+  },
+  "aspectRatios": {
+    "square": "1/1",
+    "video": "16/9",
+    "portrait": "3/4",
+    "landscape": "4/3",
+    "ultrawide": "21/9",
+    "hero": "2/1"
+  },
+  "icons": {
+    "xs": "12px",
+    "sm": "16px",
+    "md": "20px",
+    "lg": "24px",
+    "xl": "32px",
+    "2xl": "40px",
+    "3xl": "48px"
+  },
+  "accessibility": {
+    "focusRing": {
+      "width": "2px",
+      "offset": "2px",
+      "style": "solid"
+    },
+    "minTouchTarget": "44px",
+    "minTextSize": "16px"
+  },
+  "borders": {
+    "card": "{colors.neutral.200}",
+    "input": "{colors.neutral.300}"
+  }
+}

package/tokens/semantic-roles.json

@@ -0,0 +1,64 @@
+{
+  "surface": {
+    "page": {
+      "value": "{colors.neutral.50}",
+      "description": "primary app background"
+    },
+    "card": {
+      "value": "{colors.white}",
+      "description": "containers and tiles"
+    },
+    "input": {
+      "value": "{colors.white}",
+      "description": "form inputs, textareas"
+    },
+    "overlay": {
+      "value": "{colors.neutral.900} / 0.6",
+      "description": "modals, dropdowns, flyouts"
+    }
+  },
+  "text": {
+    "onPage": {
+      "default": "{colors.neutral.900}",
+      "muted": "{colors.neutral.600}",
+      "subtle": "{colors.neutral.500}",
+      "meta": "{colors.neutral.500}",
+      "brand": "{colors.brand.600}"
+    },
+    "onSurface": {
+      "default": "{colors.neutral.900}",
+      "muted": "{colors.neutral.600}",
+      "subtle": "{colors.neutral.500}",
+      "meta": "{colors.neutral.500}",
+      "brand": "{colors.brand.600}"
+    }
+  },
+  "layout": {
+    "section": {
+      "padding": {
+        "sm": "1.5rem",
+        "md": "2rem",
+        "lg": "3rem"
+      },
+      "gap": {
+        "sm": "1rem",
+        "md": "1.5rem",
+        "lg": "2rem"
+      }
+    },
+    "stack": {
+      "gap": {
+        "sm": "0.5rem",
+        "md": "0.75rem",
+        "lg": "1rem"
+      }
+    },
+    "container": {
+      "paddingInline": {
+        "sm": "1rem",
+        "md": "1.5rem",
+        "lg": "2rem"
+      }
+    }
+  }
+}