@orange-halo/tokens 1.0.0 → 2.1.0

package/tokens/brands/orange-halo/palette.tokens.json

@@ -0,0 +1,800 @@
+{
+  "$description": "Orange Halo palette (tier 1): colours, fonts, radii, shadows, gradients, motion and borders. Warm, playful, personal. Other brands provide their own palette with the same groups.",
+  "color": {
+    "$description": "Warm palette with nostalgic character. Neutrals are always warm; blue is the deliberate accent.",
+    "orange": {
+      "$description": "Primary brand orange — vibrant and accessible",
+      "50": {
+        "$type": "color",
+        "$value": "#FFF3E0"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#FFE0B2"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#FFCC80"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#FFB74D"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#FFA726"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#FF9800"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#FB8C00"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#F57C00"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#EF6C00"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#C54300",
+        "$description": "Primary brand — 5.0:1 with white text, 4.7:1 on cream. Chosen for contrast: do not lighten."
+      },
+      "950": {
+        "$type": "color",
+        "$value": "#9E3500",
+        "$description": "Hover/active — 7.1:1 with white text, 6.6:1 on cream"
+      }
+    },
+    "honey": {
+      "$description": "Warm highlight — golden warmth for accents and feedback",
+      "50": {
+        "$type": "color",
+        "$value": "#FEFAEE"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#FDF3D4"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#FBE7A8"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#F8D56F"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#E8A838",
+        "$description": "Signature honey"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#D4922C"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#B87A24"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#8C5E1C",
+        "$description": "5.3:1 on cream"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#6B4815"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#3D3529",
+        "$description": "Dark theme warning tint"
+      }
+    },
+    "terracotta": {
+      "$description": "Deep accent — earthy depth for active states and emphasis",
+      "50": {
+        "$type": "color",
+        "$value": "#FBF5F0"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#F5E8DE"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#E8CDBF"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#D4A88F"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#BF8060"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#A0522D",
+        "$description": "Signature terracotta — WCAG AA (5.3:1)"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#8B4726"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#6F3920"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#5A2F1A"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#452414"
+      }
+    },
+    "eucalyptus": {
+      "$description": "Reserve palette — not used by semantic tokens",
+      "50": {
+        "$type": "color",
+        "$value": "#F0F6F6"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#E0EBEB"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#C2D7D7"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#9EBEBE"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#7AA3A4"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#5F8A8B",
+        "$description": "3.6:1 on cream — UI and large text only"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#4D7172"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#3F5C5D",
+        "$description": "6.8:1 on cream"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#344A4B"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#2A3C3D"
+      }
+    },
+    "warm": {
+      "$description": "Warm neutral scale — cream to walnut, no blue-gray",
+      "cream": {
+        "$type": "color",
+        "$value": "#FAF7F2",
+        "$description": "Base background — warm off-white"
+      },
+      "linen": {
+        "$type": "color",
+        "$value": "#F5F0E8",
+        "$description": "Raised surface"
+      },
+      "dawn": {
+        "$type": "color",
+        "$value": "#FFFBF5",
+        "$description": "Sunlit gradient — top"
+      },
+      "shell": {
+        "$type": "color",
+        "$value": "#FDF6EE",
+        "$description": "Sunlit gradient — middle"
+      },
+      "biscuit": {
+        "$type": "color",
+        "$value": "#F8EFE4",
+        "$description": "Sunlit gradient — bottom"
+      },
+      "parchment": {
+        "$type": "color",
+        "$value": "#EDE8DF",
+        "$description": "Inset surface"
+      },
+      "sand": {
+        "$type": "color",
+        "$value": "#E2DCD2",
+        "$description": "Borders, dividers"
+      },
+      "dune": {
+        "$type": "color",
+        "$value": "#C9C1B4",
+        "$description": "Decorative only — 1.7:1 on cream, never for control borders"
+      },
+      "stone": {
+        "$type": "color",
+        "$value": "#A09080",
+        "$description": "Dark theme control borders — 4.9:1 on cocoa"
+      },
+      "taupe": {
+        "$type": "color",
+        "$value": "#8A7A68",
+        "$description": "Dark theme borders — 3.7:1 on cocoa, 3.0:1 on walnut"
+      },
+      "driftwood": {
+        "$type": "color",
+        "$value": "#6B5D4D",
+        "$description": "Secondary text — 6.0:1 on cream"
+      },
+      "bark": {
+        "$type": "color",
+        "$value": "#52463A",
+        "$description": "Emphasis text — 8.6:1 on cream"
+      },
+      "hickory": {
+        "$type": "color",
+        "$value": "#4A3F33",
+        "$description": "Dark theme hover and highlight surface"
+      },
+      "chestnut": {
+        "$type": "color",
+        "$value": "#44382C",
+        "$description": "Dark theme sunlit surface"
+      },
+      "walnut": {
+        "$type": "color",
+        "$value": "#3D3229",
+        "$description": "Primary text — 11.7:1 on cream. Dark theme raised surface"
+      },
+      "mocha": {
+        "$type": "color",
+        "$value": "#352E28",
+        "$description": "Dark theme pressed and disabled surface"
+      },
+      "cocoa": {
+        "$type": "color",
+        "$value": "#2A2420",
+        "$description": "Dark theme page background"
+      },
+      "espresso": {
+        "$type": "color",
+        "$value": "#1F1A17",
+        "$description": "Dark theme inset surface"
+      }
+    },
+    "green": {
+      "$description": "Success — warm-tinted green",
+      "50": {
+        "$type": "color",
+        "$value": "#F0F7F1"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#D9EDD9"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#7AB87C",
+        "$description": "Dark theme success — 6.5:1 with cocoa text"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#5A9A5C"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#4A8A4C",
+        "$description": "3.9:1 on cream — icons and UI only, not text"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#3D7340",
+        "$description": "Success text — 5.3:1 on cream, 5.2:1 on green.50"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#2A3629",
+        "$description": "Dark theme success tint"
+      }
+    },
+    "red": {
+      "$description": "Error — warm-tinted red",
+      "50": {
+        "$type": "color",
+        "$value": "#FDF4F3"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#F9E0DC"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#E08F8D",
+        "$description": "Dark theme error — 6.2:1 with cocoa text"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#C75450"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#B54540",
+        "$description": "5.1:1 on cream"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#943836",
+        "$description": "Hover/active state"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#3D2A29",
+        "$description": "Dark theme error tint"
+      }
+    },
+    "blue": {
+      "$description": "Blue accent — modern counterbalance for CTAs",
+      "50": {
+        "$type": "color",
+        "$value": "#EEF4F9"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#D6E4F0"
+      },
+      "200": {
+        "$type": "color",
+        "$value": "#A0B4C8"
+      },
+      "300": {
+        "$type": "color",
+        "$value": "#7A9AB8"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#5A82A8"
+      },
+      "500": {
+        "$type": "color",
+        "$value": "#3D5A80",
+        "$description": "Signature accent — 7.1:1 with white text, 6.6:1 on cream"
+      },
+      "600": {
+        "$type": "color",
+        "$value": "#354F70",
+        "$description": "Hover state"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#2E4460",
+        "$description": "Active state"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#253850"
+      }
+    },
+    "white": {
+      "$type": "color",
+      "$value": "#FFFFFF",
+      "$description": "Pure white for inputs/highlights"
+    }
+  },
+  "font": {
+    "family": {
+      "$description": "Bricolage Grotesque — playful, crafted, warm",
+      "sans": {
+        "$type": "fontFamily",
+        "$value": "'Bricolage Grotesque', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif"
+      },
+      "display": {
+        "$type": "fontFamily",
+        "$value": "'Bricolage Grotesque', 'General Sans', sans-serif"
+      },
+      "mono": {
+        "$type": "fontFamily",
+        "$value": "'JetBrains Mono', 'Fira Code', ui-monospace, monospace"
+      }
+    },
+    "size": {
+      "$description": "Slightly expressive type scale",
+      "xs": {
+        "$type": "dimension",
+        "$value": "0.75rem",
+        "$description": "12px"
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "0.875rem",
+        "$description": "14px"
+      },
+      "base": {
+        "$type": "dimension",
+        "$value": "1rem",
+        "$description": "16px"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "1.125rem",
+        "$description": "18px"
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "1.25rem",
+        "$description": "20px"
+      },
+      "2xl": {
+        "$type": "dimension",
+        "$value": "1.625rem",
+        "$description": "26px"
+      },
+      "3xl": {
+        "$type": "dimension",
+        "$value": "2rem",
+        "$description": "32px"
+      },
+      "4xl": {
+        "$type": "dimension",
+        "$value": "2.625rem",
+        "$description": "42px"
+      },
+      "5xl": {
+        "$type": "dimension",
+        "$value": "3.25rem",
+        "$description": "52px"
+      }
+    },
+    "weight": {
+      "$description": "Font weights for hierarchy",
+      "normal": {
+        "$type": "fontWeight",
+        "$value": "400"
+      },
+      "medium": {
+        "$type": "fontWeight",
+        "$value": "500"
+      },
+      "semibold": {
+        "$type": "fontWeight",
+        "$value": "600"
+      },
+      "bold": {
+        "$type": "fontWeight",
+        "$value": "700"
+      }
+    },
+    "lineHeight": {
+      "$description": "Generous line heights for readability",
+      "none": {
+        "$type": "number",
+        "$value": 1
+      },
+      "tight": {
+        "$type": "number",
+        "$value": 1.25
+      },
+      "snug": {
+        "$type": "number",
+        "$value": 1.35
+      },
+      "normal": {
+        "$type": "number",
+        "$value": 1.5
+      },
+      "relaxed": {
+        "$type": "number",
+        "$value": 1.65
+      },
+      "loose": {
+        "$type": "number",
+        "$value": 1.8
+      }
+    },
+    "letterSpacing": {
+      "$description": "Letter spacing — loose for small, tight for display",
+      "tighter": {
+        "$type": "dimension",
+        "$value": "-0.02em"
+      },
+      "tight": {
+        "$type": "dimension",
+        "$value": "-0.01em"
+      },
+      "normal": {
+        "$type": "dimension",
+        "$value": "0"
+      },
+      "wide": {
+        "$type": "dimension",
+        "$value": "0.01em"
+      },
+      "wider": {
+        "$type": "dimension",
+        "$value": "0.02em"
+      },
+      "widest": {
+        "$type": "dimension",
+        "$value": "0.05em",
+        "$description": "Uppercase labels: hero eyebrows, footer headings"
+      }
+    }
+  },
+  "radius": {
+    "$description": "Friendly and soft — not sharp, not overly pill-shaped",
+    "none": {
+      "$type": "dimension",
+      "$value": "0"
+    },
+    "xs": {
+      "$type": "dimension",
+      "$value": "4px",
+      "$description": "Small details, chips"
+    },
+    "sm": {
+      "$type": "dimension",
+      "$value": "6px",
+      "$description": "Buttons, inputs"
+    },
+    "md": {
+      "$type": "dimension",
+      "$value": "10px",
+      "$description": "Cards, panels"
+    },
+    "lg": {
+      "$type": "dimension",
+      "$value": "14px",
+      "$description": "Modals, large containers"
+    },
+    "xl": {
+      "$type": "dimension",
+      "$value": "20px",
+      "$description": "Hero elements"
+    },
+    "full": {
+      "$type": "dimension",
+      "$value": "9999px",
+      "$description": "Avatars, pills"
+    }
+  },
+  "shadow": {
+    "$description": "Warm, low-contrast shadows — never harsh",
+    "none": {
+      "$type": "shadow",
+      "$value": "none"
+    },
+    "soft": {
+      "$type": "shadow",
+      "$value": "0 2px 8px rgba(61, 50, 41, 0.06), 0 1px 3px rgba(61, 50, 41, 0.08)",
+      "$description": "Cards, raised elements"
+    },
+    "medium": {
+      "$type": "shadow",
+      "$value": "0 4px 16px rgba(61, 50, 41, 0.08), 0 2px 6px rgba(61, 50, 41, 0.06)",
+      "$description": "Dropdowns, popovers"
+    },
+    "strong": {
+      "$type": "shadow",
+      "$value": "0 8px 24px rgba(61, 50, 41, 0.10), 0 4px 8px rgba(61, 50, 41, 0.06)",
+      "$description": "Modals, dialogs"
+    },
+    "glow": {
+      "$type": "shadow",
+      "$value": "0 0 0 3px rgba(197, 67, 0, 0.2), 0 0 12px rgba(197, 67, 0, 0.1)",
+      "$description": "Focus ring — warm and friendly"
+    },
+    "inset": {
+      "$type": "shadow",
+      "$value": "inset 0 1px 3px rgba(61, 50, 41, 0.08)",
+      "$description": "Inputs, wells"
+    },
+    "chunky": {
+      "$description": "Offset chunky shadows for playful tactile feel",
+      "primary": {
+        "$type": "color",
+        "$value": "#E8C4A0",
+        "$description": "Warm peach for primary buttons"
+      },
+      "secondary": {
+        "$type": "color",
+        "$value": "#D4C4B0",
+        "$description": "Neutral tan for secondary/form elements"
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "#A0B4C8",
+        "$description": "Blue offset shadow for accent buttons — decorative"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "rgba(181, 69, 64, 0.3)",
+        "$description": "Error state shadow"
+      },
+      "driftwood": {
+        "$type": "color",
+        "$value": "rgba(107, 93, 77, 0.15)",
+        "$description": "Translucent driftwood, for offset shadows on cream"
+      },
+      "driftwoodHover": {
+        "$type": "color",
+        "$value": "rgba(107, 93, 77, 0.2)",
+        "$description": "A step darker, for the lifted state"
+      },
+      "driftwoodDeep": {
+        "$type": "color",
+        "$value": "rgba(107, 93, 77, 0.25)",
+        "$description": "For dialogs, which sit above everything"
+      },
+      "walnut": {
+        "$type": "color",
+        "$value": "rgba(61, 50, 41, 0.15)",
+        "$description": "Translucent walnut, for the inset shadow inside fields"
+      }
+    },
+    "layered": {
+      "$description": "Layered surface shadows: soft drop shadows with a top highlight, so cards feel like physical objects",
+      "flat": {
+        "$type": "shadow",
+        "$value": "0 1px 2px rgba(61, 50, 41, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6)"
+      },
+      "raised": {
+        "$type": "shadow",
+        "$value": "0 2px 6px rgba(61, 50, 41, 0.08), 0 6px 16px rgba(61, 50, 41, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8)"
+      },
+      "lifted": {
+        "$type": "shadow",
+        "$value": "0 4px 12px rgba(61, 50, 41, 0.1), 0 12px 28px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)"
+      },
+      "pressed": {
+        "$type": "shadow",
+        "$value": "0 1px 3px rgba(61, 50, 41, 0.1), 0 3px 8px rgba(61, 50, 41, 0.06), inset 0 1px 2px rgba(61, 50, 41, 0.04)"
+      },
+      "focused": {
+        "$type": "shadow",
+        "$value": "0 2px 6px rgba(61, 50, 41, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8)",
+        "$description": "Sits under the focus glow"
+      },
+      "sunlit": {
+        "$type": "shadow",
+        "$value": "0 2px 8px rgba(139, 69, 19, 0.08), 0 8px 24px rgba(139, 69, 19, 0.06), 0 0 20px rgba(197, 67, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9)"
+      },
+      "sunlitLifted": {
+        "$type": "shadow",
+        "$value": "0 4px 12px rgba(139, 69, 19, 0.12), 0 12px 32px rgba(139, 69, 19, 0.08), 0 0 28px rgba(197, 67, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1)"
+      },
+      "sunlitFocused": {
+        "$type": "shadow",
+        "$value": "0 2px 8px rgba(139, 69, 19, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9)",
+        "$description": "Sits under the focus glow"
+      }
+    }
+  },
+  "gradient": {
+    "$description": "Soft, nostalgic gradients — never high-contrast or flashy",
+    "sunlit": {
+      "$type": "string",
+      "$value": "linear-gradient(180deg, {color.warm.dawn} 0%, {color.warm.shell} 30%, {color.warm.biscuit} 100%)",
+      "$description": "Gentle warmth for surfaces — same stops as the sunlit card"
+    },
+    "warm": {
+      "$type": "string",
+      "$value": "linear-gradient(135deg, #C54300 0%, #FF9800 100%)",
+      "$description": "Brand emphasis"
+    },
+    "nostalgic": {
+      "$type": "string",
+      "$value": "linear-gradient(180deg, #F5F0E8 0%, #EDE8DF 100%)",
+      "$description": "Subtle retro depth"
+    }
+  },
+  "motion": {
+    "$description": "Subtle and playful — relaxed easing, never snappy",
+    "duration": {
+      "quick": {
+        "$type": "duration",
+        "$value": "100ms",
+        "$description": "Micro-interactions (color shifts)"
+      },
+      "snappy": {
+        "$type": "duration",
+        "$value": "150ms",
+        "$description": "Button/input transitions"
+      },
+      "gentle": {
+        "$type": "duration",
+        "$value": "200ms",
+        "$description": "Standard interactions (hover, focus)"
+      },
+      "relaxed": {
+        "$type": "duration",
+        "$value": "300ms",
+        "$description": "Larger transitions (panels)"
+      },
+      "slow": {
+        "$type": "duration",
+        "$value": "400ms",
+        "$description": "Emphasis animations"
+      }
+    },
+    "easing": {
+      "gentle": {
+        "$type": "cubicBezier",
+        "$value": [
+          0.4,
+          0,
+          0.2,
+          1
+        ],
+        "$description": "Default — smooth and natural"
+      },
+      "out": {
+        "$type": "cubicBezier",
+        "$value": [
+          0,
+          0,
+          0.2,
+          1
+        ],
+        "$description": "Enters and reveals"
+      },
+      "in": {
+        "$type": "cubicBezier",
+        "$value": [
+          0.4,
+          0,
+          1,
+          1
+        ],
+        "$description": "Exits"
+      },
+      "playful": {
+        "$type": "cubicBezier",
+        "$value": [
+          0.34,
+          1.3,
+          0.64,
+          1
+        ],
+        "$description": "Celebrations — slight overshoot"
+      }
+    }
+  },
+  "border": {
+    "width": {
+      "$description": "Border widths",
+      "0": {
+        "$type": "dimension",
+        "$value": "0"
+      },
+      "1": {
+        "$type": "dimension",
+        "$value": "1px"
+      },
+      "2": {
+        "$type": "dimension",
+        "$value": "2px"
+      },
+      "chunky": {
+        "$type": "dimension",
+        "$value": "2.5px",
+        "$description": "Signature chunky frame for controls and feedback"
+      }
+    }
+  }
+}