{ "$schema": "https://www.designtokens.org/schemas/2025.10/format.json", "$description": "HeyGoal design tokens, system 0.5.0 (step 5 of the brief). Tiers: primitive → semantic (shared, dark, light) → component → alias (1.19.0 names). Source of truth: edit this file, then run node tools/build-tokens.mjs.", "$extensions": { "com.heygoal": { "system": "0.6.0", "header": "HEYGOAL — design tokens · generated from tokens.json by tools/build-tokens.mjs (system 0.6.0). Replaces the 1.19.0 header (lines 11–42), --live and --live-text (561–562) and --stagger (727). Edit tokens.json and rebuild; never edit this block by hand.", "keep": [ "/* kept from the 1.19.0 header: a rule, not a token */\n[data-wd-theme=dark] input,[data-wd-theme=dark] select{color-scheme:dark}" ] } }, "primitive": { "color": { "neutral": { "50": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.949, 0.949, 0.9412 ], "hex": "#f2f2f0" }, "$extensions": { "com.heygoal": { "css": "--neutral-50" } } }, "100": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.8314, 0.8314, 0.8196 ], "hex": "#d4d4d1" }, "$extensions": { "com.heygoal": { "css": "--neutral-100" } } }, "200": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.7176, 0.7176, 0.702 ], "hex": "#b7b7b3" }, "$extensions": { "com.heygoal": { "css": "--neutral-200" } } }, "300": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.6039, 0.6039, 0.5882 ], "hex": "#9a9a96" }, "$extensions": { "com.heygoal": { "css": "--neutral-300" } } }, "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.5176, 0.5176, 0.502 ], "hex": "#848480" }, "$extensions": { "com.heygoal": { "css": "--neutral-400" } } }, "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.4314, 0.4314, 0.4196 ], "hex": "#6e6e6b" }, "$extensions": { "com.heygoal": { "css": "--neutral-500" } } }, "600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.302, 0.302, 0.2941 ], "hex": "#4d4d4b" }, "$extensions": { "com.heygoal": { "css": "--neutral-600" } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.1804, 0.1804, 0.1804 ], "hex": "#2e2e2e" }, "$extensions": { "com.heygoal": { "css": "--neutral-700" } } }, "750": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.1373, 0.1373, 0.1373 ], "hex": "#232323" }, "$extensions": { "com.heygoal": { "css": "--neutral-750" } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.1098, 0.1098, 0.1098 ], "hex": "#1c1c1c" }, "$extensions": { "com.heygoal": { "css": "--neutral-800" } } }, "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.0784, 0.0784, 0.0784 ], "hex": "#141414" }, "$description": "Dark theme canvas (#141414 anchor).", "$extensions": { "com.heygoal": { "css": "--neutral-900" } } } }, "warm": { "50": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.9843, 0.9843, 0.9725 ], "hex": "#fbfbf8" }, "$extensions": { "com.heygoal": { "css": "--warm-50" } } }, "100": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.949, 0.9451, 0.9255 ], "hex": "#f2f1ec" }, "$extensions": { "com.heygoal": { "css": "--warm-100" } } }, "150": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.9373, 0.9333, 0.9137 ], "hex": "#efeee9" }, "$extensions": { "com.heygoal": { "css": "--warm-150" } } }, "200": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.8627, 0.8549, 0.8235 ], "hex": "#dcdad2" }, "$extensions": { "com.heygoal": { "css": "--warm-200" } } }, "300": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.698, 0.6902, 0.6588 ], "hex": "#b2b0a8" }, "$extensions": { "com.heygoal": { "css": "--warm-300" } } }, "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.5373, 0.5294, 0.502 ], "hex": "#898780" }, "$extensions": { "com.heygoal": { "css": "--warm-400" } } }, "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.4784, 0.4706, 0.4471 ], "hex": "#7a7872" }, "$extensions": { "com.heygoal": { "css": "--warm-500" } } }, "600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.4196, 0.4157, 0.3922 ], "hex": "#6b6a64" }, "$extensions": { "com.heygoal": { "css": "--warm-600" } } }, "700": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.3098, 0.3059, 0.2902 ], "hex": "#4f4e4a" }, "$extensions": { "com.heygoal": { "css": "--warm-700" } } }, "800": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.2039, 0.2, 0.1922 ], "hex": "#343331" }, "$extensions": { "com.heygoal": { "css": "--warm-800" } } }, "900": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.1059, 0.1059, 0.102 ], "hex": "#1b1b1a" }, "$extensions": { "com.heygoal": { "css": "--warm-900" } } } }, "palette": { "sage": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.7686, 0.8235, 0.749 ], "hex": "#c4d2bf" }, "$extensions": { "com.heygoal": { "css": "--sage", "palette": true } } }, "mint": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.702, 0.8627, 0.7882 ], "hex": "#b3dcc9" }, "$extensions": { "com.heygoal": { "css": "--mint", "palette": true } } }, "teal": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.5765, 0.7882, 0.7529 ], "hex": "#93c9c0" }, "$extensions": { "com.heygoal": { "css": "--teal", "palette": true } } }, "sky": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.7137, 0.8471, 0.9333 ], "hex": "#b6d8ee" }, "$extensions": { "com.heygoal": { "css": "--sky", "palette": true } } }, "blue": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.6588, 0.7647, 0.8941 ], "hex": "#a8c3e4" }, "$extensions": { "com.heygoal": { "css": "--blue", "palette": true } } }, "periwinkle": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.702, 0.7333, 0.9216 ], "hex": "#b3bbeb" }, "$extensions": { "com.heygoal": { "css": "--periwinkle", "palette": true } } }, "lilac": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.7412, 0.698, 0.8392 ], "hex": "#bdb2d6" }, "$extensions": { "com.heygoal": { "css": "--lilac", "palette": true } } }, "blush": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.9059, 0.7961, 0.8706 ], "hex": "#e7cbde" }, "$extensions": { "com.heygoal": { "css": "--blush", "palette": true } } }, "rose": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.9176, 0.6824, 0.7333 ], "hex": "#eaaebb" }, "$extensions": { "com.heygoal": { "css": "--rose", "palette": true } } }, "peach": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.949, 0.7686, 0.6471 ], "hex": "#f2c4a5" }, "$extensions": { "com.heygoal": { "css": "--peach", "palette": true } } }, "clay": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.8471, 0.6588, 0.549 ], "hex": "#d8a88c" }, "$extensions": { "com.heygoal": { "css": "--clay", "palette": true } } }, "taupe": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.7765, 0.7333, 0.6706 ], "hex": "#c6bbab" }, "$extensions": { "com.heygoal": { "css": "--taupe", "palette": true } } }, "stone": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.7412, 0.7255, 0.6902 ], "hex": "#bdb9b0" }, "$extensions": { "com.heygoal": { "css": "--stone", "palette": true } } }, "olive": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.8039, 0.8157, 0.6078 ], "hex": "#cdd09b" }, "$extensions": { "com.heygoal": { "css": "--olive", "palette": true } } }, "butter": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.9333, 0.8784, 0.6353 ], "hex": "#eee0a2" }, "$extensions": { "com.heygoal": { "css": "--butter", "palette": true } } }, "lime": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.7686, 0.9098, 0.3725 ], "hex": "#c4e85f" }, "$extensions": { "com.heygoal": { "css": "--lime", "palette": true } } }, "amber": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.9373, 0.7059, 0.2902 ], "hex": "#efb44a" }, "$extensions": { "com.heygoal": { "css": "--amber", "palette": true } } }, "coral": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.9137, 0.4157, 0.2902 ], "hex": "#e96a4a" }, "$extensions": { "com.heygoal": { "css": "--coral", "palette": true } } }, "bone": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.9137, 0.9059, 0.8745 ], "hex": "#e9e7df" }, "$description": "Clock card only. Not in PALETTE.", "$extensions": { "com.heygoal": { "css": "--bone" } } } }, "green": { "400": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.3725, 0.8784, 0.6039 ], "hex": "#5fe09a" }, "$extensions": { "com.heygoal": { "css": "--green-400" } } }, "500": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.2431, 0.8118, 0.4941 ], "hex": "#3ecf7e" }, "$extensions": { "com.heygoal": { "css": "--green-500" } } }, "600": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.1216, 0.6157, 0.3529 ], "hex": "#1f9d5a" }, "$extensions": { "com.heygoal": { "css": "--green-600" } } } }, "brand": { "blue": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0.502, 1 ], "hex": "#0080ff" }, "$description": "The check in the final HeyGoal logo.", "$extensions": { "com.heygoal": { "css": "--brand-blue" } } }, "navy": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.0314, 0, 0.2667 ], "hex": "#080044" }, "$description": "The letters of the final HeyGoal logo on light.", "$extensions": { "com.heygoal": { "css": "--brand-navy" } } } }, "ink": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.098, 0.098, 0.098 ], "hex": "#191919" }, "$description": "Text and icons on any palette fill, both themes.", "$extensions": { "com.heygoal": { "css": "--ink" } } }, "ink-soft": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.71 }, "$description": "Secondary text on palette fills. 0.71 alpha: the lowest that passes 4.5:1 on all 19 swatches (1.19.0: .56).", "$extensions": { "com.heygoal": { "css": "--ink-soft", "legacy": { "dark": "rgba(0,0,0,.56)" } } } }, "paper": { "paper": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 1, 1 ], "hex": "#ffffff" }, "$description": "Paper white: invoice sheet, report, calendar print.", "$extensions": { "com.heygoal": { "css": "--paper" } } }, "paper-ink": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.0863, 0.0863, 0.0863 ], "hex": "#161616" }, "$description": "Text on paper.", "$extensions": { "com.heygoal": { "css": "--paper-ink", "pdf": "PDF_INK" } } }, "paper-muted": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.4196, 0.4196, 0.4 ], "hex": "#6b6b66" }, "$description": "Labels on paper.", "$extensions": { "com.heygoal": { "css": "--paper-muted", "pdf": "PDF_GRAY" } } }, "paper-line": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.8941, 0.8902, 0.8627 ], "hex": "#e4e3dc" }, "$description": "Rules on paper.", "$extensions": { "com.heygoal": { "css": "--paper-line", "pdf": "PDF_RULE" } } }, "paper-line-strong": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.7882, 0.7843, 0.7608 ], "hex": "#c9c8c2" }, "$description": "Grid lines on the printed calendar, where --paper-line is too light to see.", "$extensions": { "com.heygoal": { "css": "--paper-line-strong" } } }, "paper-soft": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.949, 0.9451, 0.9255 ], "hex": "#f2f1ec" }, "$description": "Tinted cells on paper.", "$extensions": { "com.heygoal": { "css": "--paper-soft", "pdf": "PDF_SOFT" } } }, "paper-good": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.1843, 0.5608, 0.3569 ], "hex": "#2f8f5b" }, "$description": "Paid stamp.", "$extensions": { "com.heygoal": { "css": "--paper-good", "pdf": "PDF_GREEN" } } }, "paper-critical": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.6902, 0.1725, 0.0863 ], "hex": "#b02c16" }, "$description": "Overdue on paper.", "$extensions": { "com.heygoal": { "css": "--paper-critical", "pdf": "PDF_RED" } } } } }, "font": { "family": { "bricolage": { "$type": "fontFamily", "$value": [ "Bricolage Grotesque", "system-ui", "sans-serif" ], "$extensions": { "com.heygoal": { "css": "--family-bricolage" } } }, "inter": { "$type": "fontFamily", "$value": [ "Inter", "system-ui", "-apple-system", "Segoe UI", "sans-serif" ], "$extensions": { "com.heygoal": { "css": "--family-inter" } } }, "helvetica": { "$type": "fontFamily", "$value": [ "Helvetica", "Arial", "sans-serif" ], "$description": "PDFs only (the in-page writer draws Helvetica and Helvetica-Bold).", "$extensions": { "com.heygoal": { "css": "--family-helvetica" } } } }, "weight": { "regular": { "$type": "fontWeight", "$value": 400, "$extensions": { "com.heygoal": { "css": "--weight-regular" } } }, "medium": { "$type": "fontWeight", "$value": 500, "$extensions": { "com.heygoal": { "css": "--weight-medium" } } }, "semibold": { "$type": "fontWeight", "$value": 600, "$extensions": { "com.heygoal": { "css": "--weight-semibold" } } }, "bold": { "$type": "fontWeight", "$value": 700, "$extensions": { "com.heygoal": { "css": "--weight-bold" } } }, "heavy": { "$type": "fontWeight", "$value": 800, "$extensions": { "com.heygoal": { "css": "--weight-heavy" } } } } }, "space": { "4": { "$type": "dimension", "$value": { "value": 4, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--space-4" } } }, "8": { "$type": "dimension", "$value": { "value": 8, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--space-8" } } }, "12": { "$type": "dimension", "$value": { "value": 12, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--space-12" } } }, "16": { "$type": "dimension", "$value": { "value": 16, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--space-16" } } }, "20": { "$type": "dimension", "$value": { "value": 20, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--space-20" } } }, "24": { "$type": "dimension", "$value": { "value": 24, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--space-24" } } }, "32": { "$type": "dimension", "$value": { "value": 32, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--space-32" } } }, "40": { "$type": "dimension", "$value": { "value": 40, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--space-40" } } }, "56": { "$type": "dimension", "$value": { "value": 56, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--space-56" } } } }, "radius": { "8": { "$type": "dimension", "$value": { "value": 8, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--radius-8" } } }, "10": { "$type": "dimension", "$value": { "value": 10, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--radius-10" } } }, "12": { "$type": "dimension", "$value": { "value": 12, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--radius-12" } } }, "16": { "$type": "dimension", "$value": { "value": 16, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--radius-16" } } }, "24": { "$type": "dimension", "$value": { "value": 24, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--radius-24" } } }, "full": { "$type": "dimension", "$value": { "value": 999, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--radius-full" } } } }, "motion": { "duration": { "fast": { "$type": "duration", "$value": { "value": 0.16, "unit": "s" }, "$description": "Color, opacity and press (1.19.0 --t-fast).", "$extensions": { "com.heygoal": { "css": "--duration-fast" } } }, "in": { "$type": "duration", "$value": { "value": 0.26, "unit": "s" }, "$description": "The way in: hover, enter, page-out (1.19.0 --t).", "$extensions": { "com.heygoal": { "css": "--duration-in" } } }, "out": { "$type": "duration", "$value": { "value": 0.4, "unit": "s" }, "$description": "The way back: hover out, toast (1.19.0 --t-slow).", "$extensions": { "com.heygoal": { "css": "--duration-out" } } }, "page": { "$type": "duration", "$value": { "value": 0.36, "unit": "s" }, "$description": "Page blocks rising in.", "$extensions": { "com.heygoal": { "css": "--duration-page", "reduced": "var(--duration-crossfade-in)" } } }, "wipe": { "$type": "duration", "$value": { "value": 0.42, "unit": "s" }, "$description": "Menu highlight wipe and indicator fade.", "$extensions": { "com.heygoal": { "css": "--duration-wipe", "reduced": "var(--duration-crossfade-in)" } } }, "crossfade-out": { "$type": "duration", "$value": { "value": 0.12, "unit": "s" }, "$description": "Reduced motion: old page fades.", "$extensions": { "com.heygoal": { "css": "--duration-crossfade-out" } } }, "crossfade-in": { "$type": "duration", "$value": { "value": 0.18, "unit": "s" }, "$description": "Reduced motion: new page and menu highlight fade.", "$extensions": { "com.heygoal": { "css": "--duration-crossfade-in" } } }, "drawer": { "$type": "duration", "$value": { "value": 0.25, "unit": "s" }, "$description": "Phone drawer and scrim.", "$extensions": { "com.heygoal": { "css": "--duration-drawer", "reduced": "0s" } } }, "collapse": { "$type": "duration", "$value": { "value": 0.2, "unit": "s" }, "$description": "Sidebar and timer-dock column change.", "$extensions": { "com.heygoal": { "css": "--duration-collapse", "reduced": "0s" } } }, "theme": { "$type": "duration", "$value": { "value": 0.3, "unit": "s" }, "$description": "Theme switch color fade; Billing zone flash.", "$extensions": { "com.heygoal": { "css": "--duration-theme" } } }, "page-out": { "$type": "duration", "$value": { "value": 0.26, "unit": "s" }, "$description": "The old page fading out on a page change.", "$extensions": { "com.heygoal": { "css": "--duration-page-out", "reduced": "var(--duration-crossfade-out)" } } }, "intro": { "$type": "duration", "$value": { "value": 0.55, "unit": "s" }, "$description": "The Home intro: each tile rising in.", "$extensions": { "com.heygoal": { "css": "--duration-intro", "reduced": "var(--duration-crossfade-in)" } } }, "door": { "$type": "duration", "$value": { "value": 0.9, "unit": "s" }, "$description": "The front door: the wordmark scaling and fading in.", "$extensions": { "com.heygoal": { "css": "--duration-door", "reduced": "var(--duration-crossfade-in)" } } }, "door-rise": { "$type": "duration", "$value": { "value": 0.65, "unit": "s" }, "$description": "The front door: the wordmark moving up for the sign-in card.", "$extensions": { "com.heygoal": { "css": "--duration-door-rise", "reduced": "0s" } } }, "door-card": { "$type": "duration", "$value": { "value": 0.5, "unit": "s" }, "$description": "The front door: the sign-in card coming in.", "$extensions": { "com.heygoal": { "css": "--duration-door-card", "reduced": "var(--duration-crossfade-in)" } } }, "pulse": { "$type": "duration", "$value": { "value": 1.6, "unit": "s" }, "$description": "One cycle of the live dot pulse.", "$extensions": { "com.heygoal": { "css": "--duration-pulse" } } }, "ring": { "$type": "duration", "$value": { "value": 2.4, "unit": "s" }, "$description": "One cycle of the synced dot ring.", "$extensions": { "com.heygoal": { "css": "--duration-ring" } } }, "sync-pulse": { "$type": "duration", "$value": { "value": 1.1, "unit": "s" }, "$description": "The account card dot while it syncs (1.19.0: ease-in-out, now --ease-fade).", "$extensions": { "com.heygoal": { "css": "--duration-sync-pulse" } } }, "flash": { "$type": "duration", "$value": { "value": 0.3, "unit": "s" }, "$description": "A Billing zone flashing when its jump pill is used.", "$extensions": { "com.heygoal": { "css": "--duration-flash" } } } }, "delay": { "door-card": { "$type": "duration", "$value": { "value": 0.15, "unit": "s" }, "$description": "The sign-in card waits this long after the wordmark starts to move.", "$extensions": { "com.heygoal": { "css": "--delay-door-card", "reduced": "0s" } } } }, "stagger": { "$type": "duration", "$value": { "value": 33.333, "unit": "ms" }, "$description": "One frame at 30 fps between page blocks.", "$extensions": { "com.heygoal": { "css": "--stagger", "expression": "calc(1s / 30)", "reduced": "0s" } } }, "stagger-delay": { "$type": "duration", "$value": { "value": 0.06, "unit": "s" }, "$description": "Before the first page block.", "$extensions": { "com.heygoal": { "css": "--stagger-delay", "reduced": "0s" } } }, "stagger-max": { "$type": "number", "$value": 12, "$description": "Blocks after the 12th come in together.", "$extensions": { "com.heygoal": { "css": "--stagger-max", "js": "STAGGER_MAX" } } }, "stagger-intro": { "$type": "duration", "$value": { "value": 0.05, "unit": "s" }, "$description": "Between Home tiles in the intro.", "$extensions": { "com.heygoal": { "css": "--stagger-intro", "reduced": "0s" } } }, "ease": { "out": { "$type": "cubicBezier", "$value": [ 0, 0, 0, 1 ], "$description": "Gabriel's curve. Everything coming in.", "$extensions": { "com.heygoal": { "css": "--ease-out" } } }, "in": { "$type": "cubicBezier", "$value": [ 0.4, 0, 1, 1 ], "$description": "Exits.", "$extensions": { "com.heygoal": { "css": "--ease-in" } } }, "soft": { "$type": "cubicBezier", "$value": [ 0.2, 0.7, 0.2, 1 ], "$description": "The older house curve, kept: Home intro, drawer, front door, sidebar collapse, theme icon.", "$extensions": { "com.heygoal": { "css": "--ease-soft" } } }, "fade": { "$type": "cubicBezier", "$value": [ 0.25, 0.1, 0.25, 1 ], "$description": "The CSS ease keyword: opacity-only crossfades and backdrops.", "$extensions": { "com.heygoal": { "css": "--ease-fade", "expression": "ease" } } } } } }, "semantic": { "shared": { "accent": { "$type": "color", "$value": "{primitive.color.palette.lime}", "$description": "The user accent. Settings writes var(--) on ; lime by default.", "$extensions": { "com.heygoal": { "css": "--accent", "legacy": { "dark": "var(--lime)" } } } }, "accent-soft": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.7686, 0.9098, 0.3725 ], "hex": "#c4e85f", "alpha": 0.16 }, "$description": "Accent fills: selected and arranged states.", "$extensions": { "com.heygoal": { "css": "--accent-soft", "expression": "color-mix(in srgb,var(--accent) 16%,transparent)" } } }, "accent-halo": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.7686, 0.9098, 0.3725 ], "hex": "#c4e85f", "alpha": 0.22 }, "$description": "The 3 px focus halo on inputs. Decoration only; --accent-ring carries the 3:1.", "$extensions": { "com.heygoal": { "css": "--accent-halo", "expression": "color-mix(in srgb,var(--accent) 22%,transparent)" } } }, "brand": { "$type": "color", "$value": "{primitive.color.brand.blue}", "$description": "Top bar tint, front door, favicon, PDF stamp. Never a button, never a link, never the accent.", "$extensions": { "com.heygoal": { "css": "--brand" } } }, "font": { "display": { "$type": "fontFamily", "$value": "{primitive.font.family.bricolage}", "$description": "Titles and big numbers. One-line swap when the typeface changes.", "$extensions": { "com.heygoal": { "css": "--font-display" } } }, "ui": { "$type": "fontFamily", "$value": "{primitive.font.family.inter}", "$description": "Everything else.", "$extensions": { "com.heygoal": { "css": "--font-ui" } } }, "pdf": { "$type": "fontFamily", "$value": "{primitive.font.family.helvetica}", "$extensions": { "com.heygoal": { "css": "--font-pdf" } } } }, "text": { "micro": { "$type": "dimension", "$value": { "value": 11, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--text-micro" } } }, "small": { "$type": "dimension", "$value": { "value": 12, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--text-small" } } }, "note": { "$type": "dimension", "$value": { "value": 13, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--text-note" } } }, "label": { "$type": "dimension", "$value": { "value": 14, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--text-label" } } }, "body": { "$type": "dimension", "$value": { "value": 15, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--text-body" } } }, "heading": { "$type": "dimension", "$value": { "value": 18, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--text-heading" } } }, "title": { "$type": "dimension", "$value": { "value": 24, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--text-title" } } }, "display": { "$type": "dimension", "$value": { "value": 50, "unit": "px" }, "$description": "Page titles and the Home greeting.", "$extensions": { "com.heygoal": { "css": "--text-display", "expression": "clamp(32px,4.4vw,50px)" } } }, "number": { "$type": "dimension", "$value": { "value": 46, "unit": "px" }, "$description": "The big number at rest, and its largest size. Always tabular.", "$extensions": { "com.heygoal": { "css": "--text-number" } } }, "number-min": { "$type": "dimension", "$value": { "value": 28, "unit": "px" }, "$description": "The smallest a big number gets in a narrow card.", "$extensions": { "com.heygoal": { "css": "--text-number-min" } } }, "number-fit": { "$type": "dimension", "$value": { "value": 46, "unit": "px" }, "$description": "The big number sized to its card: 15% of the card width, from 28 to 46 px. The card sets container-type:inline-size; with no container it resolves to 46.", "$extensions": { "com.heygoal": { "css": "--text-number-fit", "expression": "clamp(var(--text-number-min),15cqi,var(--text-number))" } } } }, "tracking": { "display": { "$type": "dimension", "$value": { "value": -0.035, "unit": "em" }, "$description": "Set on the style, so it never leaks into a pill.", "$extensions": { "com.heygoal": { "css": "--tracking-display" } } }, "title": { "$type": "dimension", "$value": { "value": -0.025, "unit": "em" }, "$description": "Set on the style, so it never leaks into a pill.", "$extensions": { "com.heygoal": { "css": "--tracking-title" } } }, "heading": { "$type": "dimension", "$value": { "value": -0.01, "unit": "em" }, "$description": "Set on the style, so it never leaks into a pill.", "$extensions": { "com.heygoal": { "css": "--tracking-heading" } } }, "number": { "$type": "dimension", "$value": { "value": -0.04, "unit": "em" }, "$description": "Set on the style, so it never leaks into a pill.", "$extensions": { "com.heygoal": { "css": "--tracking-number" } } }, "kicker": { "$type": "dimension", "$value": { "value": 0.14, "unit": "em" }, "$description": "Set on the style, so it never leaks into a pill.", "$extensions": { "com.heygoal": { "css": "--tracking-kicker" } } } }, "type": { "display": { "$type": "typography", "$value": { "fontFamily": "{semantic.shared.font.display}", "fontSize": "{semantic.shared.text.display}", "fontWeight": "{primitive.font.weight.heavy}", "lineHeight": 1.04, "letterSpacing": "{semantic.shared.tracking.display}" }, "$extensions": { "com.heygoal": { "css": "--type-display" } } }, "title": { "$type": "typography", "$value": { "fontFamily": "{semantic.shared.font.display}", "fontSize": "{semantic.shared.text.title}", "fontWeight": "{primitive.font.weight.heavy}", "lineHeight": 1.1, "letterSpacing": "{semantic.shared.tracking.title}" }, "$extensions": { "com.heygoal": { "css": "--type-title" } } }, "heading": { "$type": "typography", "$value": { "fontFamily": "{semantic.shared.font.display}", "fontSize": "{semantic.shared.text.heading}", "fontWeight": "{primitive.font.weight.bold}", "lineHeight": 1.3, "letterSpacing": "{semantic.shared.tracking.heading}" }, "$extensions": { "com.heygoal": { "css": "--type-heading" } } }, "number": { "$type": "typography", "$value": { "fontFamily": "{semantic.shared.font.display}", "fontSize": "{semantic.shared.text.number-fit}", "fontWeight": "{primitive.font.weight.heavy}", "lineHeight": 1.05, "letterSpacing": "{semantic.shared.tracking.number}" }, "$extensions": { "com.heygoal": { "css": "--type-number" } } }, "body": { "$type": "typography", "$value": { "fontFamily": "{semantic.shared.font.ui}", "fontSize": "{semantic.shared.text.body}", "fontWeight": "{primitive.font.weight.regular}", "lineHeight": 1.5, "letterSpacing": { "value": 0, "unit": "em" } }, "$extensions": { "com.heygoal": { "css": "--type-body" } } }, "button": { "$type": "typography", "$value": { "fontFamily": "{semantic.shared.font.ui}", "fontSize": "{semantic.shared.text.label}", "fontWeight": "{primitive.font.weight.semibold}", "lineHeight": 1.3, "letterSpacing": { "value": 0, "unit": "em" } }, "$extensions": { "com.heygoal": { "css": "--type-button" } } }, "label": { "$type": "typography", "$value": { "fontFamily": "{semantic.shared.font.ui}", "fontSize": "{semantic.shared.text.label}", "fontWeight": "{primitive.font.weight.medium}", "lineHeight": 1.3, "letterSpacing": { "value": 0, "unit": "em" } }, "$extensions": { "com.heygoal": { "css": "--type-label" } } }, "note": { "$type": "typography", "$value": { "fontFamily": "{semantic.shared.font.ui}", "fontSize": "{semantic.shared.text.note}", "fontWeight": "{primitive.font.weight.regular}", "lineHeight": 1.45, "letterSpacing": { "value": 0, "unit": "em" } }, "$extensions": { "com.heygoal": { "css": "--type-note" } } }, "small": { "$type": "typography", "$value": { "fontFamily": "{semantic.shared.font.ui}", "fontSize": "{semantic.shared.text.small}", "fontWeight": "{primitive.font.weight.regular}", "lineHeight": 1.4, "letterSpacing": { "value": 0, "unit": "em" } }, "$extensions": { "com.heygoal": { "css": "--type-small" } } }, "kicker": { "$type": "typography", "$value": { "fontFamily": "{semantic.shared.font.ui}", "fontSize": "{semantic.shared.text.micro}", "fontWeight": "{primitive.font.weight.heavy}", "lineHeight": 1.3, "letterSpacing": "{semantic.shared.tracking.kicker}" }, "$extensions": { "com.heygoal": { "css": "--type-kicker" } } }, "micro": { "$type": "typography", "$value": { "fontFamily": "{semantic.shared.font.ui}", "fontSize": "{semantic.shared.text.micro}", "fontWeight": "{primitive.font.weight.semibold}", "lineHeight": 1.3, "letterSpacing": { "value": 0, "unit": "em" } }, "$extensions": { "com.heygoal": { "css": "--type-micro" } } } }, "radius": { "chip": { "$type": "dimension", "$value": "{primitive.radius.8}", "$description": "Chips, filter pills, checkboxes, calendar chips and bars.", "$extensions": { "com.heygoal": { "css": "--radius-chip" } } }, "control": { "$type": "dimension", "$value": "{primitive.radius.10}", "$description": "Buttons, inputs, icon buttons, menu rows and the nav highlight.", "$extensions": { "com.heygoal": { "css": "--radius-control" } } }, "inner": { "$type": "dimension", "$value": "{primitive.radius.12}", "$description": "A surface nested in a card or dialog: overview cards, stats, quick-access cards, previews, thumbnails; and tooltips.", "$extensions": { "com.heygoal": { "css": "--radius-inner" } } }, "card": { "$type": "dimension", "$value": "{primitive.radius.16}", "$description": "Panels, tiles, project cards, lists and other top-level cards.", "$extensions": { "com.heygoal": { "css": "--radius-card" } } }, "floating": { "$type": "dimension", "$value": "{primitive.radius.24}", "$description": "Dialogs, popovers, the toast, the account menu, the floating timer.", "$extensions": { "com.heygoal": { "css": "--radius-floating" } } }, "round": { "$type": "dimension", "$value": "{primitive.radius.full}", "$description": "Avatars and status pills.", "$extensions": { "com.heygoal": { "css": "--radius-round" } } } }, "elevation": { "0": { "$type": "shadow", "$value": [], "$description": "Flat: cards, panels, tiles.", "$extensions": { "com.heygoal": { "css": "--elevation-0", "expression": "none" } } }, "1": { "$type": "shadow", "$value": [ { "color": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.22 }, "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 12, "unit": "px" }, "blur": { "value": 34, "unit": "px" }, "spread": { "value": 0, "unit": "px" } } ], "$description": "Raised: popover, toast, floating timer (with glass).", "$extensions": { "com.heygoal": { "css": "--elevation-1", "expression": "0 12px 34px rgb(0 0 0 / .22)" } } }, "2": { "$type": "shadow", "$value": [ { "color": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.45 }, "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 30, "unit": "px" }, "blur": { "value": 70, "unit": "px" }, "spread": { "value": 0, "unit": "px" } } ], "$description": "Floating: dialog (with the scrim).", "$extensions": { "com.heygoal": { "css": "--elevation-2", "expression": "0 30px 70px rgb(0 0 0 / .45)" } } } }, "scrim": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.5 }, "$description": "Behind dialogs.", "$extensions": { "com.heygoal": { "css": "--scrim" } } }, "scrim-blur": { "$type": "dimension", "$value": { "value": 2, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--scrim-blur" } } }, "glass": { "blur": { "$type": "dimension", "$value": { "value": 16, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--glass-blur" } } }, "saturate": { "$type": "number", "$value": 1.4, "$extensions": { "com.heygoal": { "css": "--glass-saturate" } } }, "line": { "$type": "color", "$value": "{semantic.dark.line}", "$extensions": { "com.heygoal": { "css": "--glass-line" } } }, "bg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.1098, 0.1098, 0.1098 ], "hex": "#1c1c1c", "alpha": 0.6 }, "$description": "Floating glass (timer). The top bar uses its own brand-tinted --topbar-bg on the same blur and line.", "$extensions": { "com.heygoal": { "css": "--glass-bg", "expression": "color-mix(in srgb,var(--surface) 60%,transparent)" } } } }, "status": { "good-soft": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.2431, 0.8118, 0.4941 ], "hex": "#3ecf7e", "alpha": 0.14 }, "$description": "Tinted background. Paid, done, synced.", "$extensions": { "com.heygoal": { "css": "--good-soft", "expression": "color-mix(in srgb,var(--good) 14%,transparent)" } } }, "warning-soft": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.9373, 0.7059, 0.2902 ], "hex": "#efb44a", "alpha": 0.14 }, "$description": "Tinted background. Paused, offline, upsell.", "$extensions": { "com.heygoal": { "css": "--warning-soft", "expression": "color-mix(in srgb,var(--warning) 14%,transparent)" } } }, "critical-soft": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.9137, 0.4157, 0.2902 ], "hex": "#e96a4a", "alpha": 0.14 }, "$description": "Tinted background. Error, overdue, danger.", "$extensions": { "com.heygoal": { "css": "--critical-soft", "expression": "color-mix(in srgb,var(--critical) 14%,transparent)" } } }, "info-soft": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.7137, 0.8471, 0.9333 ], "hex": "#b6d8ee", "alpha": 0.14 }, "$description": "Tinted background. Neutral notices.", "$extensions": { "com.heygoal": { "css": "--info-soft", "expression": "color-mix(in srgb,var(--info) 14%,transparent)" } } }, "live": { "$type": "color", "$value": "{semantic.dark.status.good}", "$description": "The live dot: running timer, synced.", "$extensions": { "com.heygoal": { "css": "--live", "legacy": { "dark": "#3ecf7e", "light": "#1f9d5a" } } } }, "live-text": { "$type": "color", "$value": "{semantic.dark.status.good-text}", "$extensions": { "com.heygoal": { "css": "--live-text", "legacy": { "dark": "#5fe09a", "light": "#187f48" } } } } }, "color": { "status": { "good-soft-hover": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.2431, 0.8118, 0.4941 ], "hex": "#3ecf7e", "alpha": 0.22 }, "$description": "The synced account card on hover.", "$extensions": { "com.heygoal": { "css": "--good-soft-hover", "expression": "color-mix(in srgb,var(--good) 22%,transparent)" } } }, "good-edge": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.2431, 0.8118, 0.4941 ], "hex": "#3ecf7e", "alpha": 0.4 }, "$description": "The edge of a good-state surface: the synced account card.", "$extensions": { "com.heygoal": { "css": "--good-edge", "expression": "color-mix(in srgb,var(--good) 40%,transparent)" } } }, "warning-edge": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.9373, 0.7059, 0.2902 ], "hex": "#efb44a", "alpha": 0.4 }, "$description": "The edge of a warning-state surface: the offline account card.", "$extensions": { "com.heygoal": { "css": "--warning-edge", "expression": "color-mix(in srgb,var(--warning) 40%,transparent)" } } }, "critical-edge": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.9137, 0.4157, 0.2902 ], "hex": "#e96a4a", "alpha": 0.4 }, "$description": "The edge of a critical-state surface, and the danger button (45% in 1.19.0).", "$extensions": { "com.heygoal": { "css": "--critical-edge", "expression": "color-mix(in srgb,var(--critical) 40%,transparent)" } } } }, "on-color": { "hover": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.08 }, "$description": "A hover tint on a pastel fill: icon buttons on cards.", "$extensions": { "com.heygoal": { "css": "--on-color-hover" } } }, "fill": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.1 }, "$description": "A resting control on a pastel fill: the edit tools, the status select (.09 in 1.19.0).", "$extensions": { "com.heygoal": { "css": "--on-color-fill" } } }, "fill-hover": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.18 }, "$description": "The same control on hover.", "$extensions": { "com.heygoal": { "css": "--on-color-fill-hover" } } }, "edge": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.14 }, "$description": "A hairline edge on a color: the color pill, the client pill (.18 in 1.19.0).", "$extensions": { "com.heygoal": { "css": "--on-color-edge" } } }, "track": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.12 }, "$description": "A meter track on a pastel card.", "$extensions": { "com.heygoal": { "css": "--on-color-track" } } }, "line": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.12 }, "$description": "A divider on a pastel card: rows, the calendar grid, the At a glance list (.1 and .12 in 1.19.0).", "$extensions": { "com.heygoal": { "css": "--on-color-line" } } }, "edge-strong": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.35 }, "$description": "The edge of a control on a pastel card, such as a task check: 3:1 on every swatch.", "$extensions": { "com.heygoal": { "css": "--on-color-edge-strong" } } }, "surface": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 1, 1 ], "hex": "#ffffff", "alpha": 0.34 }, "$description": "A surface inside a pastel card: At a glance cards, shortcuts, calendar chips (.28 to .4 in 1.19.0).", "$extensions": { "com.heygoal": { "css": "--on-color-surface" } } }, "surface-strong": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 1, 1 ], "hex": "#ffffff", "alpha": 0.55 }, "$description": "An input on a pastel card, in edit mode.", "$extensions": { "com.heygoal": { "css": "--on-color-surface-strong" } } }, "critical": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.5412, 0.1216, 0.0627 ], "hex": "#8a1f10" }, "$description": "Overdue text on a pastel card.", "$extensions": { "com.heygoal": { "css": "--critical-on-color" } } } }, "on-ink": { "$type": "color", "$value": "{primitive.color.neutral.50}", "$description": "Text on an ink fill: a primary button or the today mark on a pastel card.", "$extensions": { "com.heygoal": { "css": "--on-ink" } } }, "image": { "backdrop": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.0667, 0.0667, 0.0667 ], "hex": "#111111" }, "$description": "Behind a photo: the lightbox and image thumbnails.", "$extensions": { "com.heygoal": { "css": "--image-backdrop" } } }, "scrim": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.55 }, "$description": "Under tools that sit on a photo.", "$extensions": { "com.heygoal": { "css": "--image-scrim" } } }, "on": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 1, 1, 1 ], "hex": "#ffffff" }, "$description": "Icons on --image-scrim.", "$extensions": { "com.heygoal": { "css": "--on-image" } } } }, "accent-dash": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.5333, 0.618, 0.2957 ], "hex": "#889e4b" }, "$description": "The dashed frame of arrange mode.", "$extensions": { "com.heygoal": { "css": "--accent-dash", "expression": "color-mix(in srgb,var(--accent) 60%,var(--line))" } } } }, "opacity": { "disabled": { "$type": "number", "$value": 0.5, "$description": "A control that cannot be used right now, such as a button while a PDF builds.", "$extensions": { "com.heygoal": { "css": "--opacity-disabled" } } }, "hover": { "$type": "number", "$value": 0.8, "$description": "The logo on hover.", "$extensions": { "com.heygoal": { "css": "--opacity-hover" } } }, "placeholder": { "$type": "number", "$value": 0.28, "$description": "The empty slot a Home card leaves while it is dragged.", "$extensions": { "com.heygoal": { "css": "--opacity-placeholder" } } } }, "zone": { "invoices": { "$type": "color", "$value": "{primitive.color.palette.amber}", "$description": "Billing zone. Fixed; never a status.", "$extensions": { "com.heygoal": { "css": "--zone-invoices" } } }, "project": { "$type": "color", "$value": "{primitive.color.palette.periwinkle}", "$description": "Billing zone. Fixed; never a status.", "$extensions": { "com.heygoal": { "css": "--zone-project" } } }, "expenses": { "$type": "color", "$value": "{primitive.color.palette.peach}", "$description": "Billing zone. Fixed; never a status.", "$extensions": { "com.heygoal": { "css": "--zone-expenses" } } }, "payments": { "$type": "color", "$value": "{primitive.color.palette.mint}", "$description": "Billing zone. Fixed; never a status.", "$extensions": { "com.heygoal": { "css": "--zone-payments" } } }, "neutral": { "$type": "color", "$value": "{primitive.color.palette.stone}", "$description": "Billing zone. Fixed; never a status.", "$extensions": { "com.heygoal": { "css": "--zone-neutral" } } } }, "priority": { "high": { "$type": "color", "$value": "{semantic.dark.text}", "$description": "Priority is an order, not a status: four strengths of one neutral, always with the word.", "$extensions": { "com.heygoal": { "css": "--priority-high" } } }, "medium": { "$type": "color", "$value": "{semantic.dark.muted}", "$extensions": { "com.heygoal": { "css": "--priority-medium" } } }, "low": { "$type": "color", "$value": "{semantic.dark.faint}", "$extensions": { "com.heygoal": { "css": "--priority-low" } } }, "backburner": { "$type": "color", "$value": "{semantic.dark.faint}", "$description": "Drawn as a hollow ring.", "$extensions": { "com.heygoal": { "css": "--priority-backburner" } } } }, "z": { "raised": { "$type": "number", "$value": 2, "$extensions": { "com.heygoal": { "css": "--z-raised" } } }, "local": { "$type": "number", "$value": 5, "$extensions": { "com.heygoal": { "css": "--z-local" } } }, "tip": { "$type": "number", "$value": 20, "$extensions": { "com.heygoal": { "css": "--z-tip" } } }, "shell": { "$type": "number", "$value": 45, "$extensions": { "com.heygoal": { "css": "--z-shell" } } }, "floating": { "$type": "number", "$value": 50, "$extensions": { "com.heygoal": { "css": "--z-floating" } } }, "gate": { "$type": "number", "$value": 55, "$extensions": { "com.heygoal": { "css": "--z-gate" } } }, "scrim": { "$type": "number", "$value": 55, "$extensions": { "com.heygoal": { "css": "--z-scrim" } } }, "drawer": { "$type": "number", "$value": 60, "$extensions": { "com.heygoal": { "css": "--z-drawer" } } }, "toast": { "$type": "number", "$value": 60, "$extensions": { "com.heygoal": { "css": "--z-toast" } } }, "popover": { "$type": "number", "$value": 70, "$extensions": { "com.heygoal": { "css": "--z-popover" } } } } }, "dark": { "bg": { "$type": "color", "$value": "{primitive.color.neutral.900}", "$extensions": { "com.heygoal": { "css": "--bg", "legacy": { "dark": "#141414" } } } }, "surface": { "$type": "color", "$value": "{primitive.color.neutral.800}", "$extensions": { "com.heygoal": { "css": "--surface", "legacy": { "dark": "#1c1c1c" } } } }, "surface-2": { "$type": "color", "$value": "{primitive.color.neutral.750}", "$extensions": { "com.heygoal": { "css": "--surface-2", "legacy": { "dark": "#232323" } } } }, "line": { "$type": "color", "$value": "{primitive.color.neutral.700}", "$description": "Dividers and card edges. Decorative.", "$extensions": { "com.heygoal": { "css": "--line", "legacy": { "dark": "#2e2e2e" } } } }, "line-strong": { "$type": "color", "$value": "{primitive.color.neutral.500}", "$description": "Edges that identify a control: inputs, checks. 3:1 on every surface.", "$extensions": { "com.heygoal": { "css": "--line-strong" } } }, "faint": { "$type": "color", "$value": "{primitive.color.neutral.500}", "$description": "Non-text marks: grips, pins, empty-state glyphs. 3:1; never text.", "$extensions": { "com.heygoal": { "css": "--faint" } } }, "text": { "$type": "color", "$value": "{primitive.color.neutral.50}", "$extensions": { "com.heygoal": { "css": "--text", "legacy": { "dark": "#f2f2f0" } } } }, "muted": { "$type": "color", "$value": "{primitive.color.neutral.300}", "$description": "Secondary text. 4.5:1.", "$extensions": { "com.heygoal": { "css": "--muted", "legacy": { "dark": "#9a9a96" } } } }, "brand-ink": { "$type": "color", "$value": "{primitive.color.neutral.50}", "$description": "The logo letters.", "$extensions": { "com.heygoal": { "css": "--brand-ink" } } }, "accent-text": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.7686, 0.9098, 0.3725 ], "hex": "#c4e85f" }, "$description": "The accent as text. Lightness raised to at least 0.72 (OKLCH), which holds 4.5:1 for any color.", "$extensions": { "com.heygoal": { "css": "--accent-text", "expression": "var(--accent)", "supports": "oklch(from var(--accent) max(l, 0.72) c h)", "legacy": { "dark": "var(--accent)" } } } }, "accent-ring": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.7686, 0.9098, 0.3725 ], "hex": "#c4e85f" }, "$description": "Focus ring: 2 px outline, 2 px offset. 3:1 for any color.", "$extensions": { "com.heygoal": { "css": "--accent-ring", "expression": "var(--accent)", "supports": "oklch(from var(--accent) max(l, 0.62) c h)" } } }, "on-accent": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.0977, 0.0977, 0.0977 ], "hex": "#191919" }, "$description": "Text on an accent fill: --ink on every palette color; off-white on a dark one.", "$extensions": { "com.heygoal": { "css": "--on-accent", "expression": "var(--ink)", "supports": "oklch(from var(--accent) calc(0.213 + 0.748 * clamp(0, (0.585 - l) * 999, 1)) 0 0)" } } }, "status": { "good": { "$type": "color", "$value": "{primitive.color.green.500}", "$extensions": { "com.heygoal": { "css": "--good" } } }, "good-text": { "$type": "color", "$value": "{primitive.color.green.400}", "$extensions": { "com.heygoal": { "css": "--good-text" } } }, "warning": { "$type": "color", "$value": "{primitive.color.palette.amber}", "$extensions": { "com.heygoal": { "css": "--warning" } } }, "warning-text": { "$type": "color", "$value": "{primitive.color.palette.amber}", "$extensions": { "com.heygoal": { "css": "--warning-text" } } }, "critical": { "$type": "color", "$value": "{primitive.color.palette.coral}", "$extensions": { "com.heygoal": { "css": "--critical" } } }, "critical-text": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.9232, 0.48, 0.3683 ], "hex": "#eb7a5e" }, "$description": "89% coral with white: passes 4.5:1 on dark surfaces and on --critical-soft (raw coral reads 4.1:1 on its tint).", "$extensions": { "com.heygoal": { "css": "--critical-text", "expression": "color-mix(in srgb,var(--critical) 89%,#fff)" } } }, "info": { "$type": "color", "$value": "{primitive.color.palette.sky}", "$extensions": { "com.heygoal": { "css": "--info" } } }, "info-text": { "$type": "color", "$value": "{primitive.color.palette.sky}", "$extensions": { "com.heygoal": { "css": "--info-text" } } } } }, "light": { "bg": { "$type": "color", "$value": "{primitive.color.warm.150}", "$extensions": { "com.heygoal": { "css": "--bg", "legacy": { "light": "#efeee9" } } } }, "surface": { "$type": "color", "$value": "{primitive.color.warm.50}", "$extensions": { "com.heygoal": { "css": "--surface", "legacy": { "light": "#fbfbf8" } } } }, "surface-2": { "$type": "color", "$value": "{primitive.color.warm.100}", "$extensions": { "com.heygoal": { "css": "--surface-2", "legacy": { "light": "#f2f1ec" } } } }, "line": { "$type": "color", "$value": "{primitive.color.warm.200}", "$description": "Dividers and card edges. Decorative.", "$extensions": { "com.heygoal": { "css": "--line", "legacy": { "light": "#dcdad2" } } } }, "line-strong": { "$type": "color", "$value": "{primitive.color.warm.400}", "$description": "Edges that identify a control: inputs, checks. 3:1 on every surface.", "$extensions": { "com.heygoal": { "css": "--line-strong" } } }, "faint": { "$type": "color", "$value": "{primitive.color.warm.400}", "$description": "Non-text marks: grips, pins, empty-state glyphs. 3:1; never text.", "$extensions": { "com.heygoal": { "css": "--faint" } } }, "text": { "$type": "color", "$value": "{primitive.color.warm.900}", "$extensions": { "com.heygoal": { "css": "--text", "legacy": { "light": "#1b1b1a" } } } }, "muted": { "$type": "color", "$value": "{primitive.color.warm.600}", "$description": "Secondary text. 4.5:1.", "$extensions": { "com.heygoal": { "css": "--muted", "legacy": { "light": "#6b6a64" } } } }, "brand-ink": { "$type": "color", "$value": "{primitive.color.brand.navy}", "$description": "The logo letters.", "$extensions": { "com.heygoal": { "css": "--brand-ink" } } }, "accent-text": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.3523, 0.4221, 0.1564 ], "hex": "#5a6c28" }, "$description": "The accent as text. Lightness capped at 0.5, chroma scaled with it; 4.5:1 for any color. Fallback mixes 40% black (also 4.5:1 for any color).", "$extensions": { "com.heygoal": { "css": "--accent-text", "expression": "color-mix(in srgb,var(--accent) 40%,#000)", "supports": "oklch(from var(--accent) min(l, 0.5) calc(c * min(1, 0.5 / l)) h)", "legacy": { "light": "color-mix(in srgb,var(--accent) 48%,#000)" } } } }, "accent-ring": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.4565, 0.5442, 0.2105 ], "hex": "#748b36" }, "$description": "Focus ring: 2 px outline, 2 px offset. 3:1 for any color.", "$extensions": { "com.heygoal": { "css": "--accent-ring", "expression": "color-mix(in srgb,var(--accent) 50%,#000)", "supports": "oklch(from var(--accent) min(l, 0.6) calc(c * min(1, 0.6 / l)) h)" } } }, "on-accent": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.0977, 0.0977, 0.0977 ], "hex": "#191919" }, "$description": "Text on an accent fill: --ink on every palette color; off-white on a dark one.", "$extensions": { "com.heygoal": { "css": "--on-accent", "expression": "var(--ink)", "supports": "oklch(from var(--accent) calc(0.213 + 0.748 * clamp(0, (0.585 - l) * 999, 1)) 0 0)" } } }, "status": { "good": { "$type": "color", "$value": "{primitive.color.green.600}", "$extensions": { "com.heygoal": { "css": "--good" } } }, "warning": { "$type": "color", "$value": "{primitive.color.palette.amber}", "$extensions": { "com.heygoal": { "css": "--warning" } } }, "critical": { "$type": "color", "$value": "{primitive.color.palette.coral}", "$extensions": { "com.heygoal": { "css": "--critical" } } }, "info": { "$type": "color", "$value": "{primitive.color.palette.sky}", "$extensions": { "com.heygoal": { "css": "--info" } } }, "good-text": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.0851, 0.431, 0.2471 ], "hex": "#166e3f" }, "$description": "70% of the base with black: the closest mix that passes 4.5:1 on light surfaces and on its own --good-soft tint.", "$extensions": { "com.heygoal": { "css": "--good-text", "expression": "color-mix(in srgb,var(--good) 70%,#000)" } } }, "warning-text": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.4967, 0.3741, 0.1538 ], "hex": "#7f5f27" }, "$description": "53% of the base with black: the closest mix that passes 4.5:1 on light surfaces and on its own --warning-soft tint.", "$extensions": { "com.heygoal": { "css": "--warning-text", "expression": "color-mix(in srgb,var(--warning) 53%,#000)" } } }, "critical-text": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.6122, 0.2785, 0.1944 ], "hex": "#9c4732" }, "$description": "67% of the base with black: the closest mix that passes 4.5:1 on light surfaces and on its own --critical-soft tint.", "$extensions": { "com.heygoal": { "css": "--critical-text", "expression": "color-mix(in srgb,var(--critical) 67%,#000)" } } }, "info-text": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.3497, 0.4151, 0.4573 ], "hex": "#596a75" }, "$description": "49% of the base with black: the closest mix that passes 4.5:1 on light surfaces and on its own --info-soft tint.", "$extensions": { "com.heygoal": { "css": "--info-text", "expression": "color-mix(in srgb,var(--info) 49%,#000)" } } } } } }, "component": { "control": { "height": { "$type": "dimension", "$value": { "value": 44, "unit": "px" }, "$description": "Every add-form box: input, select, date, button, color pill.", "$extensions": { "com.heygoal": { "css": "--control-height" } } }, "height-compact": { "$type": "dimension", "$value": { "value": 36, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--control-height-compact" } } } }, "icon-button": { "size": { "$type": "dimension", "$value": { "value": 40, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--icon-button-size" } } } }, "topbar": { "height": { "$type": "dimension", "$value": { "value": 56, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--topbar-height" } } }, "blue": { "$type": "number", "$value": 0.1, "$description": "Share of --brand mixed into the page color.", "$extensions": { "com.heygoal": { "css": "--topbar-blue", "expression": "10%" } } }, "alpha": { "$type": "number", "$value": 0.35, "$description": "Opacity of the tinted bar.", "$extensions": { "com.heygoal": { "css": "--topbar-alpha", "expression": "35%" } } }, "line": { "$type": "dimension", "$value": { "value": 1.25, "unit": "px" }, "$description": "Bottom divider, drawn as an inset shadow so the fraction survives 125–200% display scale.", "$extensions": { "com.heygoal": { "css": "--topbar-line" } } }, "tint": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.0706, 0.1208, 0.1706 ], "hex": "#121f2c" }, "$extensions": { "com.heygoal": { "css": "--topbar-tint", "expression": "color-mix(in srgb,var(--brand) var(--topbar-blue),var(--bg))" } } }, "bg": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0.0706, 0.1208, 0.1706 ], "hex": "#121f2c", "alpha": 0.35 }, "$description": "Over a --glass-blur backdrop.", "$extensions": { "com.heygoal": { "css": "--topbar-bg", "expression": "color-mix(in srgb,var(--topbar-tint) var(--topbar-alpha),transparent)" } } } }, "sidebar": { "width": { "$type": "dimension", "$value": { "value": 248, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--sidebar-width" } } }, "width-rail": { "$type": "dimension", "$value": { "value": 76, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--sidebar-width-rail" } } }, "width-hidden": { "$type": "dimension", "$value": { "value": 0, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--sidebar-width-hidden" } } } }, "nav": { "indicator-width": { "$type": "dimension", "$value": { "value": 4.5, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--nav-indicator-width" } } } }, "main": { "max-width": { "$type": "dimension", "$value": { "value": 1240, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--main-max-width" } } } }, "page": { "pad-min": { "$type": "dimension", "$value": { "value": 18, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--page-pad-min" } } }, "pad-max": { "$type": "dimension", "$value": { "value": 56, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--page-pad-max" } } }, "pad": { "$type": "dimension", "$value": { "value": 56, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--page-pad", "expression": "clamp(var(--page-pad-min),4vw,var(--page-pad-max))" } } } }, "breakpoint": { "phone": { "$type": "dimension", "$value": { "value": 860, "unit": "px" }, "$description": "Reference only: @media cannot read custom properties. Phone layout at ≤ 860 px.", "$extensions": { "com.heygoal": { "css": "--breakpoint-phone" } } } }, "icon": { "size-sm": { "$type": "dimension", "$value": { "value": 16, "unit": "px" }, "$description": "In text and pills.", "$extensions": { "com.heygoal": { "css": "--icon-size-sm" } } }, "size": { "$type": "dimension", "$value": { "value": 20, "unit": "px" }, "$description": "Menu and controls.", "$extensions": { "com.heygoal": { "css": "--icon-size" } } }, "size-lg": { "$type": "dimension", "$value": { "value": 24, "unit": "px" }, "$description": "Phone bar.", "$extensions": { "com.heygoal": { "css": "--icon-size-lg" } } }, "stroke": { "$type": "number", "$value": 1.75, "$description": "On the 20 px grid; the set is assets/icons/heygoal-icons.js. 1.19.0 drew 24 px at 1.8.", "$extensions": { "com.heygoal": { "css": "--icon-stroke" } } } }, "logo": { "bar": { "$type": "dimension", "$value": { "value": 24, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--logo-height-bar" } } }, "phone": { "$type": "dimension", "$value": { "value": 20, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--logo-height-phone" } } }, "door": { "$type": "dimension", "$value": { "value": 52, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--logo-height-door" } } }, "favicon": { "$type": "dimension", "$value": { "value": 16, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--favicon-size" } } } }, "avatar": { "size": { "$type": "dimension", "$value": { "value": 36, "unit": "px" }, "$description": "The account card and lists.", "$extensions": { "com.heygoal": { "css": "--avatar-size" } } }, "size-sm": { "$type": "dimension", "$value": { "value": 32, "unit": "px" }, "$description": "The phone bar.", "$extensions": { "com.heygoal": { "css": "--avatar-size-sm" } } }, "size-xl": { "$type": "dimension", "$value": { "value": 112, "unit": "px" }, "$description": "The Account page.", "$extensions": { "com.heygoal": { "css": "--avatar-size-xl" } } } }, "border": { "width": { "$type": "dimension", "$value": { "value": 1, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--border-width" } } }, "width-strong": { "$type": "dimension", "$value": { "value": 1.5, "unit": "px" }, "$description": "Task check, help bubble, client pill.", "$extensions": { "com.heygoal": { "css": "--border-width-strong" } } } }, "shadow": { "drag": { "$type": "shadow", "$value": [ { "color": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.4 }, "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 24, "unit": "px" }, "blur": { "value": 50, "unit": "px" }, "spread": { "value": 0, "unit": "px" } } ], "$description": "A tile or menu item held while dragging.", "$extensions": { "com.heygoal": { "css": "--shadow-drag", "expression": "0 24px 50px rgb(0 0 0 / .4)" } } }, "drawer": { "$type": "shadow", "$value": [ { "color": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.35 }, "offsetX": { "value": 16, "unit": "px" }, "offsetY": { "value": 0, "unit": "px" }, "blur": { "value": 40, "unit": "px" }, "spread": { "value": 0, "unit": "px" } } ], "$extensions": { "com.heygoal": { "css": "--shadow-drawer", "expression": "16px 0 40px rgb(0 0 0 / .35)" } } }, "paper": { "$type": "shadow", "$value": [ { "color": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.18 }, "offsetX": { "value": 0, "unit": "px" }, "offsetY": { "value": 24, "unit": "px" }, "blur": { "value": 60, "unit": "px" }, "spread": { "value": 0, "unit": "px" } } ], "$description": "The invoice sheet on screen: paper over the app. Print drops it.", "$extensions": { "com.heygoal": { "css": "--shadow-paper", "expression": "0 24px 60px rgb(0 0 0 / .18)" } } }, "premium-badge": { "$type": "gradient", "$value": [ { "color": "{primitive.color.palette.butter}", "position": 0 }, { "color": "{primitive.color.palette.amber}", "position": 1 } ], "$description": "The Premium badge: butter into amber at 135°, the one gradient in the system.", "$extensions": { "com.heygoal": { "css": "--premium-badge", "expression": "linear-gradient(135deg,var(--butter),var(--amber))" } } } }, "scrim": { "drawer": { "$type": "color", "$value": { "colorSpace": "srgb", "components": [ 0, 0, 0 ], "hex": "#000000", "alpha": 0.45 }, "$extensions": { "com.heygoal": { "css": "--scrim-drawer" } } } }, "motion": { "lift": { "card": { "$type": "dimension", "$value": { "value": -9, "unit": "px" }, "$description": "Whole-card targets: tile, project, client, quick access.", "$extensions": { "com.heygoal": { "css": "--lift-card" } } }, "chip": { "$type": "dimension", "$value": { "value": -4, "unit": "px" }, "$description": "40 px chips (shortcuts).", "$extensions": { "com.heygoal": { "css": "--lift-chip" } } }, "button": { "$type": "dimension", "$value": { "value": -1, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--lift-button", "reduced": "0px" } } }, "color-pill": { "$type": "dimension", "$value": { "value": -2, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--lift-color-pill", "reduced": "0px" } } }, "icon": { "$type": "dimension", "$value": { "value": -1, "unit": "px" }, "$description": "A menu icon on hover.", "$extensions": { "com.heygoal": { "css": "--lift-icon", "reduced": "0px" } } } }, "nudge": { "nav": { "$type": "dimension", "$value": { "value": 2, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--nudge-nav", "reduced": "0px" } } }, "note": { "$type": "dimension", "$value": { "value": 3, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--nudge-note", "reduced": "0px" } } } }, "rise": { "page": { "$type": "dimension", "$value": { "value": 10, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--rise-page", "reduced": "0px" } } }, "dialog": { "$type": "dimension", "$value": { "value": 10, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--rise-dialog", "reduced": "0px" } } }, "toast": { "$type": "dimension", "$value": { "value": 16, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--rise-toast", "reduced": "0px" } } }, "intro": { "$type": "dimension", "$value": { "value": 14, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--rise-intro", "reduced": "0px" } } }, "tip": { "$type": "dimension", "$value": { "value": 4, "unit": "px" }, "$description": "The ? tip on the way in.", "$extensions": { "com.heygoal": { "css": "--rise-tip", "reduced": "0px" } } }, "door-card": { "$type": "dimension", "$value": { "value": 16, "unit": "px" }, "$description": "The sign-in card on the way in.", "$extensions": { "com.heygoal": { "css": "--rise-door-card", "reduced": "0px" } } } }, "drop": { "popover": { "$type": "dimension", "$value": { "value": -4, "unit": "px" }, "$extensions": { "com.heygoal": { "css": "--drop-popover", "reduced": "0px" } } } }, "press": { "button": { "$type": "number", "$value": 0.97, "$extensions": { "com.heygoal": { "css": "--press-button", "reduced": "1" } } }, "icon": { "$type": "number", "$value": 0.86, "$extensions": { "com.heygoal": { "css": "--press-icon", "reduced": "1" } } }, "pill": { "$type": "number", "$value": 0.96, "$extensions": { "com.heygoal": { "css": "--press-pill", "reduced": "1" } } }, "swatch": { "$type": "number", "$value": 0.94, "$extensions": { "com.heygoal": { "css": "--press-swatch", "reduced": "1" } } }, "color-pill": { "$type": "number", "$value": 0.95, "$extensions": { "com.heygoal": { "css": "--press-color-pill", "reduced": "1" } } }, "check": { "$type": "number", "$value": 0.84, "$extensions": { "com.heygoal": { "css": "--press-check", "reduced": "1" } } }, "nav": { "$type": "number", "$value": 0.98, "$extensions": { "com.heygoal": { "css": "--press-nav", "reduced": "1" } } }, "tile": { "$type": "number", "$value": 0.985, "$extensions": { "com.heygoal": { "css": "--press-tile", "reduced": "1" } } }, "day": { "$type": "number", "$value": 0.98, "$description": "A calendar day.", "$extensions": { "com.heygoal": { "css": "--press-day", "reduced": "1" } } } }, "hover": { "icon": { "$type": "number", "$value": 1.08, "$extensions": { "com.heygoal": { "css": "--hover-icon", "reduced": "1" } } }, "swatch": { "$type": "number", "$value": 1.14, "$extensions": { "com.heygoal": { "css": "--hover-swatch", "reduced": "1" } } }, "check": { "$type": "number", "$value": 1.1, "$extensions": { "com.heygoal": { "css": "--hover-check", "reduced": "1" } } }, "thumb": { "$type": "number", "$value": 1.03, "$description": "An image thumbnail.", "$extensions": { "com.heygoal": { "css": "--hover-thumb", "reduced": "1" } } } }, "scale": { "dialog": { "$type": "number", "$value": 0.97, "$extensions": { "com.heygoal": { "css": "--scale-dialog", "reduced": "1" } } }, "popover": { "$type": "number", "$value": 0.96, "$extensions": { "com.heygoal": { "css": "--scale-popover", "reduced": "1" } } }, "toast": { "$type": "number", "$value": 0.96, "$extensions": { "com.heygoal": { "css": "--scale-toast", "reduced": "1" } } } }, "pop": { "from": { "$type": "number", "$value": 0.5, "$description": "The task check pop starts here…", "$extensions": { "com.heygoal": { "css": "--pop-from", "reduced": "1" } } }, "peak": { "$type": "number", "$value": 1.2, "$description": "…peaks here at 55%, and settles at 1.", "$extensions": { "com.heygoal": { "css": "--pop-peak", "reduced": "1" } } } }, "wipe": { "from": { "$type": "dimension", "$value": { "value": 100, "unit": "%" }, "$description": "The nav highlight starts fully clipped from the right.", "$extensions": { "com.heygoal": { "css": "--wipe-from", "reduced": "0%" } } } }, "pulse": { "opacity": { "$type": "number", "$value": 0.3, "$description": "The live dot at the low point of its pulse.", "$extensions": { "com.heygoal": { "css": "--pulse-opacity", "reduced": "1" } } } }, "ring": { "from": { "$type": "number", "$value": 0.6, "$description": "The synced ring starts at this scale…", "$extensions": { "com.heygoal": { "css": "--ring-from" } } }, "to": { "$type": "number", "$value": 1.9, "$description": "…and grows to this one as it fades.", "$extensions": { "com.heygoal": { "css": "--ring-to" } } }, "opacity": { "$type": "number", "$value": 0.9, "$description": "The synced ring at its start.", "$extensions": { "com.heygoal": { "css": "--ring-opacity", "reduced": "0" } } } }, "door": { "logo-drop": { "$type": "dimension", "$value": { "value": 130, "unit": "px" }, "$description": "Where the wordmark waits on the front door, below its final place.", "$extensions": { "com.heygoal": { "css": "--door-logo-drop" } } }, "logo-drop-phone": { "$type": "dimension", "$value": { "value": 110, "unit": "px" }, "$description": "The same at 520 px and under.", "$extensions": { "com.heygoal": { "css": "--door-logo-drop-phone" } } }, "logo-scale": { "$type": "number", "$value": 0.55, "$description": "The wordmark scales up from here.", "$extensions": { "com.heygoal": { "css": "--door-logo-scale", "reduced": "1" } } } }, "drag": { "tilt": { "$type": "dimension", "$value": { "value": 1.2, "unit": "deg" }, "$description": "The drag ghost in arrange mode.", "$extensions": { "com.heygoal": { "css": "--drag-tilt", "reduced": "0deg" } } }, "scale": { "$type": "number", "$value": 1.02, "$extensions": { "com.heygoal": { "css": "--drag-scale", "reduced": "1" } } } }, "turn": { "theme": { "$type": "dimension", "$value": { "value": -20, "unit": "deg" }, "$description": "The theme button icon on hover.", "$extensions": { "com.heygoal": { "css": "--turn-theme", "reduced": "0deg" } } } }, "drawer": { "offset": { "$type": "dimension", "$value": { "value": -105, "unit": "%" }, "$description": "The phone drawer, off screen.", "$extensions": { "com.heygoal": { "css": "--drawer-offset" } } } } }, "pdf": { "title": { "$type": "number", "$value": 28, "$description": "Invoice title (pt, Helvetica).", "$extensions": { "com.heygoal": { "css": "--pdf-title", "js": "PDF_TYPE", "jsKey": "title" } } }, "report-title": { "$type": "number", "$value": 22, "$description": "Project report title (pt, Helvetica).", "$extensions": { "com.heygoal": { "css": "--pdf-report-title", "js": "PDF_TYPE", "jsKey": "report-title" } } }, "name": { "$type": "number", "$value": 15, "$description": "Business name; tile values (pt, Helvetica).", "$extensions": { "com.heygoal": { "css": "--pdf-name", "js": "PDF_TYPE", "jsKey": "name" } } }, "section": { "$type": "number", "$value": 12, "$description": "Section heads (pt, Helvetica).", "$extensions": { "com.heygoal": { "css": "--pdf-section", "js": "PDF_TYPE", "jsKey": "section" } } }, "stamp": { "$type": "number", "$value": 11, "$description": "Paid stamp (pt, Helvetica).", "$extensions": { "com.heygoal": { "css": "--pdf-stamp", "js": "PDF_TYPE", "jsKey": "stamp" } } }, "note-title": { "$type": "number", "$value": 10.5, "$description": "Note titles (pt, Helvetica).", "$extensions": { "com.heygoal": { "css": "--pdf-note-title", "js": "PDF_TYPE", "jsKey": "note-title" } } }, "body": { "$type": "number", "$value": 10, "$description": "Body and rows (pt, Helvetica).", "$extensions": { "com.heygoal": { "css": "--pdf-body", "js": "PDF_TYPE", "jsKey": "body" } } }, "table": { "$type": "number", "$value": 9.5, "$description": "Tables, meta (pt, Helvetica).", "$extensions": { "com.heygoal": { "css": "--pdf-table", "js": "PDF_TYPE", "jsKey": "table" } } }, "due": { "$type": "number", "$value": 9, "$description": "Due dates (pt, Helvetica).", "$extensions": { "com.heygoal": { "css": "--pdf-due", "js": "PDF_TYPE", "jsKey": "due" } } }, "label": { "$type": "number", "$value": 8.5, "$description": "Tile labels (pt, Helvetica).", "$extensions": { "com.heygoal": { "css": "--pdf-label", "js": "PDF_TYPE", "jsKey": "label" } } }, "caption": { "$type": "number", "$value": 8, "$description": "Kickers and footer (pt, Helvetica).", "$extensions": { "com.heygoal": { "css": "--pdf-caption", "js": "PDF_TYPE", "jsKey": "caption" } } } } }, "alias": { "muted-2": { "$type": "color", "$value": "{semantic.dark.faint}", "$description": "Deprecated. Text uses move to --muted; marks and edges to --faint / --line-strong.", "$extensions": { "com.heygoal": { "css": "--muted-2", "deprecated": true, "legacy": { "dark": "#6a6a66", "light": "#a3a198" } } } }, "r-lg": { "$type": "dimension", "$value": { "value": 22, "unit": "px" }, "$description": "Deprecated. Off the scale; cards move to --radius-card.", "$extensions": { "com.heygoal": { "css": "--r-lg", "deprecated": true, "legacy": { "dark": "22px" } } } }, "r": { "$type": "dimension", "$value": "{semantic.shared.radius.card}", "$extensions": { "com.heygoal": { "css": "--r", "legacy": { "dark": "18px" } } } }, "pill": { "$type": "dimension", "$value": "{primitive.radius.full}", "$extensions": { "com.heygoal": { "css": "--pill", "legacy": { "dark": "999px" } } } }, "display": { "$type": "fontFamily", "$value": "{semantic.shared.font.display}", "$extensions": { "com.heygoal": { "css": "--display", "legacy": { "dark": "'Bricolage Grotesque',system-ui,sans-serif" } } } }, "font": { "$type": "fontFamily", "$value": "{semantic.shared.font.ui}", "$extensions": { "com.heygoal": { "css": "--font", "legacy": { "dark": "'Inter',system-ui,-apple-system,'Segoe UI',sans-serif" } } } }, "ease": { "$type": "cubicBezier", "$value": "{primitive.motion.ease.out}", "$extensions": { "com.heygoal": { "css": "--ease", "legacy": { "dark": "cubic-bezier(0,0,0,1)" } } } }, "t-fast": { "$type": "duration", "$value": "{primitive.motion.duration.fast}", "$extensions": { "com.heygoal": { "css": "--t-fast", "legacy": { "dark": ".16s" } } } }, "t": { "$type": "duration", "$value": "{primitive.motion.duration.in}", "$extensions": { "com.heygoal": { "css": "--t", "legacy": { "dark": ".26s" } } } }, "t-slow": { "$type": "duration", "$value": "{primitive.motion.duration.out}", "$extensions": { "com.heygoal": { "css": "--t-slow", "legacy": { "dark": ".4s" } } } }, "logo-ink": { "$type": "color", "$value": "{semantic.dark.brand-ink}", "$extensions": { "com.heygoal": { "css": "--logo-ink", "legacy": { "dark": "#f2f2f0", "light": "#080044" } } } }, "logo-blue": { "$type": "color", "$value": "{semantic.shared.brand}", "$extensions": { "com.heygoal": { "css": "--logo-blue", "legacy": { "dark": "#0080ff" } } } }, "topbar": { "$type": "dimension", "$value": "{component.topbar.height}", "$extensions": { "com.heygoal": { "css": "--topbar", "legacy": { "dark": "56px" } } } }, "topbar-blur": { "$type": "dimension", "$value": "{semantic.shared.glass.blur}", "$extensions": { "com.heygoal": { "css": "--topbar-blur", "legacy": { "dark": "16px" } } } } } }