@for-the-people-initiative/design-system 1.3.1

package/tokens/primitives/color.json

@@ -0,0 +1,137 @@
+{
+  "neutral": {
+    "0": { "value": "#ffffff", "type": "color" },
+    "50": { "value": "#fafafa", "type": "color" },
+    "100": { "value": "#f5f5f5", "type": "color" },
+    "200": { "value": "#e5e5e5", "type": "color" },
+    "300": { "value": "#d4d4d4", "type": "color" },
+    "400": { "value": "#a3a3a3", "type": "color" },
+    "500": { "value": "#737373", "type": "color" },
+    "600": { "value": "#525252", "type": "color" },
+    "700": { "value": "#404040", "type": "color" },
+    "800": { "value": "#262626", "type": "color" },
+    "900": { "value": "#171717", "type": "color" },
+    "950": { "value": "#0a0a0a", "type": "color" }
+  },
+  "navy": {
+    "50": { "value": "#e8eaf2", "type": "color" },
+    "100": { "value": "#c5c9db", "type": "color" },
+    "200": { "value": "#9ea5c2", "type": "color" },
+    "300": { "value": "#7680a9", "type": "color" },
+    "400": { "value": "#525d8f", "type": "color" },
+    "500": { "value": "#2e3b75", "type": "color" },
+    "600": { "value": "#242e5c", "type": "color" },
+    "700": { "value": "#1a2244", "type": "color" },
+    "800": { "value": "#11162d", "type": "color" },
+    "900": { "value": "#0a0e1f", "type": "color" },
+    "950": { "value": "#060813", "type": "color" }
+  },
+  "blue": {
+    "50": { "value": "#eff6ff", "type": "color" },
+    "100": { "value": "#dbeafe", "type": "color" },
+    "200": { "value": "#bfdbfe", "type": "color" },
+    "300": { "value": "#93c5fd", "type": "color" },
+    "400": { "value": "#60a5fa", "type": "color" },
+    "500": { "value": "#3b82f6", "type": "color" },
+    "600": { "value": "#2563eb", "type": "color" },
+    "700": { "value": "#1d4ed8", "type": "color" },
+    "800": { "value": "#1e40af", "type": "color" },
+    "900": { "value": "#1e3a8a", "type": "color" }
+  },
+  "purple": {
+    "50": { "value": "#f5f3ff", "type": "color" },
+    "100": { "value": "#ede9fe", "type": "color" },
+    "200": { "value": "#ddd6fe", "type": "color" },
+    "300": { "value": "#c4b5fd", "type": "color" },
+    "400": { "value": "#a78bfa", "type": "color" },
+    "500": { "value": "#8b5cf6", "type": "color" },
+    "600": { "value": "#7c3aed", "type": "color" },
+    "700": { "value": "#6d28d9", "type": "color" },
+    "800": { "value": "#5b21b6", "type": "color" },
+    "900": { "value": "#4c1d95", "type": "color" }
+  },
+  "orange": {
+    "50": { "value": "#fff7ed", "type": "color" },
+    "100": { "value": "#ffedd5", "type": "color" },
+    "200": { "value": "#fed7aa", "type": "color" },
+    "300": { "value": "#fdba74", "type": "color" },
+    "400": { "value": "#fb923c", "type": "color" },
+    "500": { "value": "#f97316", "type": "color" },
+    "600": { "value": "#ea580c", "type": "color" },
+    "700": { "value": "#c2410c", "type": "color" },
+    "800": { "value": "#9a3412", "type": "color" },
+    "900": { "value": "#7c2d12", "type": "color" }
+  },
+  "amber": {
+    "50": { "value": "#fffbeb", "type": "color" },
+    "100": { "value": "#fef3c7", "type": "color" },
+    "200": { "value": "#fde68a", "type": "color" },
+    "300": { "value": "#fcd34d", "type": "color" },
+    "400": { "value": "#fbbf24", "type": "color" },
+    "500": { "value": "#f59e0b", "type": "color" },
+    "600": { "value": "#d97706", "type": "color" },
+    "700": { "value": "#b45309", "type": "color" },
+    "800": { "value": "#92400e", "type": "color" },
+    "900": { "value": "#78350f", "type": "color" }
+  },
+  "yellow": {
+    "50": { "value": "#fefce8", "type": "color" },
+    "100": { "value": "#fef9c3", "type": "color" },
+    "200": { "value": "#fef08a", "type": "color" },
+    "300": { "value": "#fde047", "type": "color" },
+    "400": { "value": "#facc15", "type": "color" },
+    "500": { "value": "#eab308", "type": "color" },
+    "600": { "value": "#ca8a04", "type": "color" },
+    "700": { "value": "#a16207", "type": "color" },
+    "800": { "value": "#854d0e", "type": "color" },
+    "900": { "value": "#713f12", "type": "color" }
+  },
+  "green": {
+    "50": { "value": "#f0fdf4", "type": "color" },
+    "100": { "value": "#dcfce7", "type": "color" },
+    "200": { "value": "#bbf7d0", "type": "color" },
+    "300": { "value": "#86efac", "type": "color" },
+    "400": { "value": "#4ade80", "type": "color" },
+    "500": { "value": "#22c55e", "type": "color" },
+    "600": { "value": "#16a34a", "type": "color" },
+    "700": { "value": "#15803d", "type": "color" },
+    "800": { "value": "#166534", "type": "color" },
+    "900": { "value": "#14532d", "type": "color" }
+  },
+  "red": {
+    "50": { "value": "#fef2f2", "type": "color" },
+    "100": { "value": "#fee2e2", "type": "color" },
+    "200": { "value": "#fecaca", "type": "color" },
+    "300": { "value": "#fca5a5", "type": "color" },
+    "400": { "value": "#f87171", "type": "color" },
+    "500": { "value": "#ef4444", "type": "color" },
+    "600": { "value": "#dc2626", "type": "color" },
+    "700": { "value": "#b91c1c", "type": "color" },
+    "800": { "value": "#991b1b", "type": "color" },
+    "900": { "value": "#7f1d1d", "type": "color" }
+  },
+  "pink": {
+    "50": { "value": "#fdf2f8", "type": "color" },
+    "100": { "value": "#fce7f3", "type": "color" },
+    "200": { "value": "#fbcfe8", "type": "color" },
+    "300": { "value": "#f9a8d4", "type": "color" },
+    "400": { "value": "#f472b6", "type": "color" },
+    "500": { "value": "#ec4899", "type": "color" },
+    "600": { "value": "#db2777", "type": "color" },
+    "700": { "value": "#be185d", "type": "color" },
+    "800": { "value": "#9d174d", "type": "color" },
+    "900": { "value": "#831843", "type": "color" }
+  },
+  "teal": {
+    "50": { "value": "#f0fdfa", "type": "color" },
+    "100": { "value": "#ccfbf1", "type": "color" },
+    "200": { "value": "#99f6e4", "type": "color" },
+    "300": { "value": "#5eead4", "type": "color" },
+    "400": { "value": "#2dd4bf", "type": "color" },
+    "500": { "value": "#14b8a6", "type": "color" },
+    "600": { "value": "#0d9488", "type": "color" },
+    "700": { "value": "#0f766e", "type": "color" },
+    "800": { "value": "#115e59", "type": "color" },
+    "900": { "value": "#134e4a", "type": "color" }
+  }
+}

package/tokens/primitives/radius.json

@@ -0,0 +1,12 @@
+{
+  "radius": {
+    "0": { "value": "0", "type": "dimension" },
+    "1": { "value": "2px", "type": "dimension" },
+    "2": { "value": "3px", "type": "dimension" },
+    "3": { "value": "5px", "type": "dimension" },
+    "4": { "value": "8px", "type": "dimension" },
+    "5": { "value": "13px", "type": "dimension" },
+    "6": { "value": "21px", "type": "dimension" },
+    "full": { "value": "9999px", "type": "dimension" }
+  }
+}

package/tokens/primitives/shadow.json

@@ -0,0 +1,29 @@
+{
+  "shadow": {
+    "1": {
+      "value": "0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.08)",
+      "type": "shadow",
+      "description": "Subtle depth - hover states"
+    },
+    "2": {
+      "value": "0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08)",
+      "type": "shadow",
+      "description": "Low elevation - cards, buttons"
+    },
+    "3": {
+      "value": "0 4px 8px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08)",
+      "type": "shadow",
+      "description": "Medium elevation - dropdowns, popovers"
+    },
+    "4": {
+      "value": "0 8px 16px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08)",
+      "type": "shadow",
+      "description": "High elevation - modals, dialogs"
+    },
+    "5": {
+      "value": "0 16px 32px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.08)",
+      "type": "shadow",
+      "description": "Highest elevation - toasts, floating elements"
+    }
+  }
+}

package/tokens/primitives/spacing.json

@@ -0,0 +1,15 @@
+{
+  "spacing": {
+    "0": { "value": "0", "type": "dimension" },
+    "1": { "value": "2px", "type": "dimension" },
+    "2": { "value": "4px", "type": "dimension" },
+    "3": { "value": "6px", "type": "dimension" },
+    "4": { "value": "10px", "type": "dimension" },
+    "5": { "value": "16px", "type": "dimension" },
+    "6": { "value": "26px", "type": "dimension" },
+    "7": { "value": "42px", "type": "dimension" },
+    "8": { "value": "68px", "type": "dimension" },
+    "9": { "value": "110px", "type": "dimension" },
+    "10": { "value": "178px", "type": "dimension" }
+  }
+}

package/tokens/semantics/color.json

@@ -0,0 +1,81 @@
+{
+  "surface": {
+    "canvas": { "value": "{navy.900}", "type": "color", "description": "Main page background" },
+    "panel": { "value": "{navy.800}", "type": "color", "description": "Card/panel background" },
+    "elevated": { "value": "{navy.700}", "type": "color", "description": "Elevated surface (modals, dropdowns)" },
+    "overlay": { "value": "rgba(0, 0, 0, 0.6)", "type": "color", "description": "Modal overlay backdrop" },
+    "muted": { "value": "{navy.950}", "type": "color", "description": "Subtle/recessed background" },
+    "inverse": { "value": "{neutral.0}", "type": "color", "description": "Light surface for contrast (tooltips)" },
+    "accent": { "value": "{amber.900}", "type": "color", "description": "Warm accent surface for cards" },
+    "gradient": {
+      "start": { "value": "{navy.950}", "type": "color", "description": "Gradient background start (top)" },
+      "end": { "value": "{navy.800}", "type": "color", "description": "Gradient background end (bottom)" }
+    }
+  },
+  "text": {
+    "default": { "value": "{neutral.0}", "type": "color", "description": "Primary text" },
+    "primary": { "value": "{neutral.0}", "type": "color", "description": "Primary text (alias)" },
+    "secondary": { "value": "{navy.200}", "type": "color", "description": "Secondary text" },
+    "muted": { "value": "{navy.300}", "type": "color", "description": "Helper/secondary text" },
+    "subtle": { "value": "{navy.400}", "type": "color", "description": "Placeholder text" },
+    "inverse": { "value": "{navy.900}", "type": "color", "description": "Text on light backgrounds" },
+    "link": { "value": "{orange.400}", "type": "color", "description": "Link text" },
+    "linkHover": { "value": "{orange.300}", "type": "color", "description": "Link hover" },
+    "linkVisited": { "value": "{purple.400}", "type": "color", "description": "Visited link" },
+    "heading": { "value": "{neutral.0}", "type": "color", "description": "Heading text" }
+  },
+  "border": {
+    "subtle": { "value": "{navy.700}", "type": "color", "description": "Subtle borders" },
+    "default": { "value": "{navy.600}", "type": "color", "description": "Default borders" },
+    "strong": { "value": "{navy.500}", "type": "color", "description": "Emphasized borders" },
+    "focus": { "value": "{orange.500}", "type": "color", "description": "Focus ring color" },
+    "vibrant": {
+      "start": { "value": "{orange.500}", "type": "color", "description": "Vibrant gradient border start" },
+      "end": { "value": "{amber.600}", "type": "color", "description": "Vibrant gradient border end" }
+    }
+  },
+  "feedback": {
+    "success": { "value": "{green.500}", "type": "color", "description": "Success state" },
+    "successSubtle": { "value": "rgba(34, 197, 94, 0.15)", "type": "color", "description": "Success background" },
+    "successEmphasis": { "value": "{green.400}", "type": "color", "description": "Success text" },
+    "warning": { "value": "{amber.500}", "type": "color", "description": "Warning state" },
+    "warningSubtle": { "value": "rgba(245, 158, 11, 0.15)", "type": "color", "description": "Warning background" },
+    "warningEmphasis": { "value": "{amber.400}", "type": "color", "description": "Warning text" },
+    "error": { "value": "{red.500}", "type": "color", "description": "Error state" },
+    "errorSubtle": { "value": "rgba(239, 68, 68, 0.15)", "type": "color", "description": "Error background" },
+    "errorEmphasis": { "value": "{red.400}", "type": "color", "description": "Error text" },
+    "info": { "value": "{blue.500}", "type": "color", "description": "Info state" },
+    "infoSubtle": { "value": "rgba(59, 130, 246, 0.15)", "type": "color", "description": "Info background" },
+    "infoEmphasis": { "value": "{blue.400}", "type": "color", "description": "Info text" }
+  },
+  "accent": {
+    "gradient": {
+      "start": { "value": "{orange.500}", "type": "color", "description": "Accent gradient start" },
+      "end": { "value": "{amber.500}", "type": "color", "description": "Accent gradient end" },
+      "hoverStart": { "value": "{orange.400}", "type": "color", "description": "Accent gradient hover start" },
+      "hoverEnd": { "value": "{amber.400}", "type": "color", "description": "Accent gradient hover end" }
+    }
+  },
+  "intent": {
+    "action": {
+      "default": { "value": "{orange.500}", "type": "color", "description": "Primary CTA color" },
+      "hover": { "value": "{orange.400}", "type": "color", "description": "Primary CTA hover" },
+      "active": { "value": "{orange.600}", "type": "color", "description": "Primary CTA pressed" },
+      "disabled": { "value": "{navy.600}", "type": "color", "description": "Disabled state" }
+    },
+    "secondary": {
+      "default": { "value": "transparent", "type": "color", "description": "Secondary action bg" },
+      "hover": { "value": "{navy.700}", "type": "color", "description": "Secondary action hover" },
+      "border": { "value": "{navy.500}", "type": "color", "description": "Secondary action border" }
+    }
+  },
+  "focus": {
+    "ring": { "value": "{orange.500}", "type": "color", "description": "Focus ring color" }
+  },
+  "brand": {
+    "primary": { "value": "{navy.800}", "type": "color", "description": "Primary brand color" },
+    "secondary": { "value": "{orange.500}", "type": "color", "description": "Secondary brand color (CTA)" },
+    "accent": { "value": "{amber.400}", "type": "color", "description": "Accent brand color" },
+    "subtle": { "value": "{navy.700}", "type": "color", "description": "Subtle brand background" }
+  }
+}

package/tokens/semantics/radius.json

@@ -0,0 +1,10 @@
+{
+  "radius": {
+    "none": { "value": "{radius.0}", "type": "dimension", "description": "No rounding" },
+    "subtle": { "value": "{radius.1}", "type": "dimension", "description": "Subtle rounding" },
+    "default": { "value": "{radius.3}", "type": "dimension", "description": "Default border radius" },
+    "rounded": { "value": "{radius.4}", "type": "dimension", "description": "More rounded corners" },
+    "large": { "value": "{radius.5}", "type": "dimension", "description": "Large radius for cards" },
+    "pill": { "value": "{radius.full}", "type": "dimension", "description": "Fully rounded (pills, circles)" }
+  }
+}

package/tokens/semantics/shadow.json

@@ -0,0 +1,9 @@
+{
+  "shadow": {
+    "xs": { "value": "{shadow.1}", "type": "shadow", "description": "Subtle depth - hover states" },
+    "s": { "value": "{shadow.2}", "type": "shadow", "description": "Low elevation - cards, buttons" },
+    "m": { "value": "{shadow.3}", "type": "shadow", "description": "Medium elevation - dropdowns" },
+    "l": { "value": "{shadow.4}", "type": "shadow", "description": "High elevation - modals" },
+    "xl": { "value": "{shadow.5}", "type": "shadow", "description": "Highest elevation - toasts" }
+  }
+}

package/tokens/semantics/spacing.json

@@ -0,0 +1,24 @@
+{
+  "space": {
+    "3xs": { "value": "{spacing.1}", "type": "dimension", "description": "2px" },
+    "2xs": { "value": "{spacing.2}", "type": "dimension", "description": "4px" },
+    "xs": { "value": "{spacing.3}", "type": "dimension", "description": "6px" },
+    "s": { "value": "{spacing.4}", "type": "dimension", "description": "10px" },
+    "m": { "value": "{spacing.5}", "type": "dimension", "description": "16px" },
+    "l": { "value": "{spacing.6}", "type": "dimension", "description": "26px" },
+    "xl": { "value": "{spacing.7}", "type": "dimension", "description": "42px" },
+    "2xl": { "value": "{spacing.8}", "type": "dimension", "description": "68px" }
+  },
+  "inset": {
+    "2xs": { "value": "{spacing.1}", "type": "dimension", "description": "Inset (padding) 2px" },
+    "xs": { "value": "{spacing.2}", "type": "dimension", "description": "Inset (padding) 4px" },
+    "s": { "value": "{spacing.3}", "type": "dimension", "description": "Inset (padding) 6px" },
+    "m": { "value": "{spacing.5}", "type": "dimension", "description": "Inset (padding) 16px" },
+    "l": { "value": "{spacing.6}", "type": "dimension", "description": "Inset (padding) 26px" },
+    "xl": { "value": "{spacing.7}", "type": "dimension", "description": "Inset (padding) 42px" }
+  },
+  "inline": {
+    "xs": { "value": "{spacing.2}", "type": "dimension", "description": "Inline (horizontal) gap 4px" },
+    "s": { "value": "{spacing.3}", "type": "dimension", "description": "Inline (horizontal) gap 6px" }
+  }
+}

package/tokens/themes/dark.json

@@ -0,0 +1,7 @@
+{
+  "color": {
+    "background": { "value": "{neutral.900}" },
+    "surface": { "value": "{neutral.800}" },
+    "text": { "value": "{neutral.0}" }
+  }
+}

package/tokens/themes/light.json

@@ -0,0 +1,7 @@
+{
+  "color": {
+    "background": { "value": "{neutral.0}" },
+    "surface": { "value": "{neutral.0}" },
+    "text": { "value": "{neutral.900}" }
+  }
+}