{ "step": "template", "tool": "brand_read", "input": { "action": "template" }, "isError": false, "error": null, "output": { "action": "template", "from": { "brand": "A" }, "slots": { "base": 103, "dark": 96, "hc": 96 }, "documents": { "base": { "surface": { "canvas": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Primary application canvas." }, "raised": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Raised card surface." }, "subtle": { "$type": "color", "$value": "oklch(0.97 0 286)", "$description": "Subtle secondary surface." }, "disabled": { "$type": "color", "$value": "oklch(0.97 0 286)", "$description": "Surface colour for disabled or inactive UI." }, "backdrop": { "$type": "color", "$value": "oklch(0.145 0 286)", "$description": "Backdrop scrim surface." }, "inverse": { "$type": "color", "$value": "oklch(0.145 0 286)", "$description": "Inverse surface for dark-on-light treatments." }, "interactive": { "primary": { "default": { "$type": "color", "$value": "oklch(0.145 0 286)", "$description": "Primary interactive surface default state." }, "hover": { "$type": "color", "$value": "oklch(0.3361 0 286)", "$description": "Primary interactive surface hover state." }, "pressed": { "$type": "color", "$value": "oklch(0.2626 0 286)", "$description": "Primary interactive surface pressed state." } }, "secondary": { "default": { "$type": "color", "$value": "oklch(0.97 0 286)", "$description": "The secondary action (a subtle fill), at rest." }, "hover": { "$type": "color", "$value": "oklch(0.95 0 286)", "$description": "The secondary action (a subtle fill), hovered." }, "pressed": { "$type": "color", "$value": "oklch(0.935 0 286)", "$description": "The secondary action (a subtle fill), pressed." } }, "destructive": { "default": { "$type": "color", "$value": "oklch(0.590577 0.193344 23)", "$description": "The destructive action, at rest." }, "hover": { "$type": "color", "$value": "oklch(0.560577 0.194665 24.00731)", "$description": "The destructive action, hovered." }, "pressed": { "$type": "color", "$value": "oklch(0.530577 0.194665 24.00731)", "$description": "The destructive action, pressed." } } } }, "border": { "subtle": { "$type": "color", "$value": "oklch(0.922 0 286)", "$description": "Default border for surfaces." }, "strong": { "$type": "color", "$value": "oklch(0.871 0 286)", "$description": "High-emphasis border." }, "interactive": { "$type": "color", "$value": "oklch(0.643 0 286)", "$description": "Border of a control (input, select, checkbox, outline button), at least 3:1 against the surface it sits on." }, "interactiveHover": { "$type": "color", "$value": "oklch(0.545 0 286)", "$description": "Border of a hovered control." } }, "text": { "primary": { "$type": "color", "$value": "oklch(0.145 0 286)", "$description": "Primary reading text." }, "secondary": { "$type": "color", "$value": "oklch(0.439 0 286)", "$description": "Secondary supporting text." }, "muted": { "$type": "color", "$value": "oklch(0.545 0 286)", "$description": "Muted caption text." }, "inverse": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Text on inverse surfaces." }, "onInteractive": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Text and icons on the primary interactive surface (buttons and selected controls)." }, "onDestructive": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Text and icons on the destructive action." }, "disabled": { "$type": "color", "$value": "oklch(0.643 0 286)", "$description": "Disabled or de-emphasised text." }, "accent": { "$type": "color", "$value": "oklch(0.509225 0.172497 267.161083)", "$description": "Accent text colour." } }, "focus": { "ring": { "outer": { "$type": "color", "$value": "oklch(0.543785 0.191021 267)", "$description": "Outer focus ring colour." }, "inner": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Inner focus ring colour." } }, "text": { "$type": "color", "$value": "oklch(0.509225 0.172497 267.161083)", "$description": "Focus foreground colour." } }, "accent": { "background": { "$type": "color", "$value": "oklch(0.96086 0.016961 267.781434)", "$description": "Background of an accent panel." }, "border": { "$type": "color", "$value": "oklch(0.806161 0.08754 271.403687)", "$description": "Border of an accent panel." }, "text": { "$type": "color", "$value": "oklch(0.509225 0.172497 267.161083)", "$description": "Text on an accent panel." } }, "status": { "info": { "surface": { "$type": "color", "$value": "oklch(0.959682 0.020056 238.701263)", "$description": "Informational background surface." }, "border": { "$type": "color", "$value": "oklch(0.809755 0.088669 243.091253)", "$description": "Informational border colour." }, "text": { "$type": "color", "$value": "oklch(0.540689 0.162234 252.214666)", "$description": "Informational text colour." }, "icon": { "$type": "color", "$value": "oklch(0.622153 0.183136 251.723539)", "$description": "Informational icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.566651 0.168568 251.8)", "$description": "Solid info fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Text and icons on the solid info fill." } }, "success": { "surface": { "$type": "color", "$value": "oklch(0.958254 0.02227 155.931601)", "$description": "Success feedback background." }, "border": { "$type": "color", "$value": "oklch(0.798152 0.08315 159.165466)", "$description": "Success border colour." }, "text": { "$type": "color", "$value": "oklch(0.523466 0.11158 159.513172)", "$description": "Success text colour." }, "icon": { "$type": "color", "$value": "oklch(0.611472 0.126614 158.247346)", "$description": "Success icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.548102 0.128886 157.7)", "$description": "Solid success fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Text and icons on the solid success fill." } }, "warning": { "surface": { "$type": "color", "$value": "oklch(0.969531 0.068378 100.371682)", "$description": "Warning feedback background." }, "border": { "$type": "color", "$value": "oklch(0.827254 0.122422 86.674497)", "$description": "Warning border colour." }, "text": { "$type": "color", "$value": "oklch(0.553161 0.125197 63.921739)", "$description": "Warning text colour." }, "icon": { "$type": "color", "$value": "oklch(0.570661 0.129157 63.921739)", "$description": "Warning icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.853575 0.15722 84.1)", "$description": "Solid warning fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(0.145 0 286)", "$description": "Text and icons on the solid warning fill." } }, "critical": { "surface": { "$type": "color", "$value": "oklch(0.955466 0.020724 13.839409)", "$description": "Critical feedback background." }, "border": { "$type": "color", "$value": "oklch(0.807 0.088767 18.290593)", "$description": "Critical border colour." }, "text": { "$type": "color", "$value": "oklch(0.556979 0.197433 25.13833)", "$description": "Critical text colour." }, "icon": { "$type": "color", "$value": "oklch(0.625577 0.193344 23)", "$description": "Critical icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.590577 0.193344 23)", "$description": "Solid critical fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Text and icons on the solid critical fill." } }, "neutral": { "surface": { "$type": "color", "$value": "oklch(0.97 0 286)", "$description": "Neutral feedback background." }, "border": { "$type": "color", "$value": "oklch(0.871 0 286)", "$description": "Neutral border colour." }, "text": { "$type": "color", "$value": "oklch(0.439 0 286)", "$description": "Neutral text colour." }, "icon": { "$type": "color", "$value": "oklch(0.643 0 286)", "$description": "Neutral icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.145 0 286)", "$description": "Solid neutral fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Text and icons on the solid neutral fill." } }, "accent": { "surface": { "$type": "color", "$value": "oklch(0.96086 0.016961 267.781434)", "$description": "Accent feedback background." }, "border": { "$type": "color", "$value": "oklch(0.806161 0.08754 271.403687)", "$description": "Accent border colour." }, "text": { "$type": "color", "$value": "oklch(0.509225 0.172497 267.161083)", "$description": "Accent text colour." }, "icon": { "$type": "color", "$value": "oklch(0.543785 0.191021 267)", "$description": "Accent icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.543785 0.191021 267)", "$description": "Solid accent fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Text and icons on the solid accent fill." } } }, "radius": { "control": { "$type": "dimension", "$value": "6px", "$description": "Corner radius of a control at the default size: the brand recipe's radius." }, "small": { "$type": "dimension", "$value": "4px", "$description": "Corner radius of a small control: the brand radius less 2px." }, "large": { "$type": "dimension", "$value": "8px", "$description": "Corner radius of a large control: the brand radius plus 2px." }, "card": { "$type": "dimension", "$value": "12px", "$description": "Corner radius of a card or panel: twice the brand radius." }, "pill": { "$type": "dimension", "$value": "999px", "$description": "Fully rounded ends, for badges and pills." } }, "font": { "sans": { "$type": "fontFamily", "$value": "Geist, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif", "$description": "The brand's sans family (the brand recipe's font)." }, "mono": { "$type": "fontFamily", "$value": "'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace", "$description": "The brand's mono family." } }, "viz": { "mark": { "single": { "$type": "color", "$value": "oklch(0.543785 0.191021 267)", "$description": "Colour of a chart that draws a single series." } }, "scale": { "categorical": { "01": { "$type": "color", "$value": "oklch(0.543785 0.191021 267)", "$description": "Series colour 1 of 6, for categories that have no order." }, "02": { "$type": "color", "$value": "oklch(0.669609 0.136951 87)", "$description": "Series colour 2 of 6, for categories that have no order." }, "03": { "$type": "color", "$value": "oklch(0.426529 0.191793 327)", "$description": "Series colour 3 of 6, for categories that have no order." }, "04": { "$type": "color", "$value": "oklch(0.510586 0.147294 147)", "$description": "Series colour 4 of 6, for categories that have no order." }, "05": { "$type": "color", "$value": "oklch(0.366152 0.149221 27)", "$description": "Series colour 5 of 6, for categories that have no order." }, "06": { "$type": "color", "$value": "oklch(0.653478 0.112047 207)", "$description": "Series colour 6 of 6, for categories that have no order." } }, "sequential": { "01": { "$type": "color", "$value": "oklch(0.94 0.021658 267)", "$description": "Step 1 of 9 of the ordered scale (01 is the low end)." }, "02": { "$type": "color", "$value": "oklch(0.84 0.073919 267)", "$description": "Step 2 of 9 of the ordered scale (01 is the low end)." }, "03": { "$type": "color", "$value": "oklch(0.74 0.126649 267)", "$description": "Step 3 of 9 of the ordered scale (01 is the low end)." }, "04": { "$type": "color", "$value": "oklch(0.64 0.167732 267)", "$description": "Step 4 of 9 of the ordered scale (01 is the low end)." }, "05": { "$type": "color", "$value": "oklch(0.54 0.189065 267)", "$description": "Step 5 of 9 of the ordered scale (01 is the low end)." }, "06": { "$type": "color", "$value": "oklch(0.44 0.186634 267)", "$description": "Step 6 of 9 of the ordered scale (01 is the low end)." }, "07": { "$type": "color", "$value": "oklch(0.34 0.160892 267)", "$description": "Step 7 of 9 of the ordered scale (01 is the low end)." }, "08": { "$type": "color", "$value": "oklch(0.24 0.116709 267)", "$description": "Step 8 of 9 of the ordered scale (01 is the low end)." }, "09": { "$type": "color", "$value": "oklch(0.14 0.062954 267)", "$description": "Step 9 of 9 of the ordered scale (01 is the low end)." } }, "diverging": { "neg-01": { "$type": "color", "$value": "oklch(0.7 0.145019 267)", "$description": "Step 1 of 5 below the midpoint of the diverging scale." }, "pos-01": { "$type": "color", "$value": "oklch(0.7 0.145019 23)", "$description": "Step 1 of 5 above the midpoint of the diverging scale." }, "neg-02": { "$type": "color", "$value": "oklch(0.58 0.183256 267)", "$description": "Step 2 of 5 below the midpoint of the diverging scale." }, "pos-02": { "$type": "color", "$value": "oklch(0.58 0.183256 23)", "$description": "Step 2 of 5 above the midpoint of the diverging scale." }, "neg-03": { "$type": "color", "$value": "oklch(0.46 0.185665 267)", "$description": "Step 3 of 5 below the midpoint of the diverging scale." }, "pos-03": { "$type": "color", "$value": "oklch(0.46 0.185665 23)", "$description": "Step 3 of 5 above the midpoint of the diverging scale." }, "neg-04": { "$type": "color", "$value": "oklch(0.34 0.137232 267)", "$description": "Step 4 of 5 below the midpoint of the diverging scale." }, "pos-04": { "$type": "color", "$value": "oklch(0.34 0.137232 23)", "$description": "Step 4 of 5 above the midpoint of the diverging scale." }, "neg-05": { "$type": "color", "$value": "oklch(0.22 0.088801 267)", "$description": "Step 5 of 5 below the midpoint of the diverging scale." }, "pos-05": { "$type": "color", "$value": "oklch(0.22 0.088801 23)", "$description": "Step 5 of 5 above the midpoint of the diverging scale." }, "neutral": { "$type": "color", "$value": "oklch(0.82 0 286)", "$description": "Midpoint of the diverging scale." } } } } }, "dark": { "surface": { "canvas": { "$type": "color", "$value": "oklch(0.145 0 286)", "$description": "Primary application canvas." }, "raised": { "$type": "color", "$value": "oklch(0.205 0 286)", "$description": "Raised card surface." }, "subtle": { "$type": "color", "$value": "oklch(0.269 0 286)", "$description": "Subtle secondary surface." }, "disabled": { "$type": "color", "$value": "oklch(0.269 0 286)", "$description": "Surface colour for disabled or inactive UI." }, "backdrop": { "$type": "color", "$value": "oklch(0.145 0 286)", "$description": "Backdrop scrim surface." }, "inverse": { "$type": "color", "$value": "oklch(0.985 0 286)", "$description": "Inverse surface for dark-on-light treatments." }, "interactive": { "primary": { "default": { "$type": "color", "$value": "oklch(0.985 0 286)", "$description": "Primary interactive surface default state." }, "hover": { "$type": "color", "$value": "oklch(0.8446 0 286)", "$description": "Primary interactive surface hover state." }, "pressed": { "$type": "color", "$value": "oklch(0.8986 0 286)", "$description": "Primary interactive surface pressed state." } }, "secondary": { "default": { "$type": "color", "$value": "oklch(0.269 0 286)", "$description": "The secondary action (a subtle fill), at rest." }, "hover": { "$type": "color", "$value": "oklch(0.29 0 286)", "$description": "The secondary action (a subtle fill), hovered." }, "pressed": { "$type": "color", "$value": "oklch(0.31 0 286)", "$description": "The secondary action (a subtle fill), pressed." } }, "destructive": { "default": { "$type": "color", "$value": "oklch(0.590577 0.193344 23)", "$description": "The destructive action, at rest." }, "hover": { "$type": "color", "$value": "oklch(0.560577 0.177398 22.826714)", "$description": "The destructive action, hovered." }, "pressed": { "$type": "color", "$value": "oklch(0.530577 0.177398 22.826714)", "$description": "The destructive action, pressed." } } } }, "border": { "subtle": { "$type": "color", "$value": "oklch(0.325 0 286)", "$description": "Default border for surfaces." }, "strong": { "$type": "color", "$value": "oklch(0.37 0 286)", "$description": "High-emphasis border." }, "interactive": { "$type": "color", "$value": "oklch(0.538 0 286)", "$description": "Border of a control (input, select, checkbox, outline button), at least 3:1 against the surface it sits on." }, "interactiveHover": { "$type": "color", "$value": "oklch(0.708 0 286)", "$description": "Border of a hovered control." } }, "text": { "primary": { "$type": "color", "$value": "oklch(0.985 0 286)", "$description": "Primary reading text." }, "secondary": { "$type": "color", "$value": "oklch(0.769 0 286)", "$description": "Secondary supporting text." }, "muted": { "$type": "color", "$value": "oklch(0.708 0 286)", "$description": "Muted caption text." }, "inverse": { "$type": "color", "$value": "oklch(0.145 0 286)", "$description": "Text on inverse surfaces." }, "onInteractive": { "$type": "color", "$value": "oklch(0.145 0 286)", "$description": "Text and icons on the primary interactive surface (buttons and selected controls)." }, "onDestructive": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Text and icons on the destructive action." }, "disabled": { "$type": "color", "$value": "oklch(0.538 0 286)", "$description": "Disabled or de-emphasised text." }, "accent": { "$type": "color", "$value": "oklch(0.775866 0.113802 273.011264)", "$description": "Accent text colour." } }, "focus": { "ring": { "outer": { "$type": "color", "$value": "oklch(0.543785 0.191021 267)", "$description": "Outer focus ring colour." }, "inner": { "$type": "color", "$value": "oklch(0.145 0 286)", "$description": "Inner focus ring colour." } }, "text": { "$type": "color", "$value": "oklch(0.775866 0.113802 273.011264)", "$description": "Focus foreground colour." } }, "accent": { "background": { "$type": "color", "$value": "oklch(0.271571 0.070509 267.975387)", "$description": "Background of an accent panel." }, "border": { "$type": "color", "$value": "oklch(0.449078 0.120101 268.933794)", "$description": "Border of an accent panel." }, "text": { "$type": "color", "$value": "oklch(0.775866 0.113802 273.011264)", "$description": "Text on an accent panel." } }, "status": { "info": { "surface": { "$type": "color", "$value": "oklch(0.274466 0.066296 253.950454)", "$description": "Informational background surface." }, "border": { "$type": "color", "$value": "oklch(0.474077 0.121868 253.108822)", "$description": "Informational border colour." }, "text": { "$type": "color", "$value": "oklch(0.764235 0.125721 249.494943)", "$description": "Informational text colour." }, "icon": { "$type": "color", "$value": "oklch(0.649151 0.193037 251.8)", "$description": "Informational icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.566651 0.168568 251.8)", "$description": "Solid info fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Text and icons on the solid info fill." } }, "success": { "surface": { "$type": "color", "$value": "oklch(0.272142 0.039586 162.175631)", "$description": "Success feedback background." }, "border": { "$type": "color", "$value": "oklch(0.466982 0.08231 160.25737)", "$description": "Success border colour." }, "text": { "$type": "color", "$value": "oklch(0.779439 0.165465 157.301059)", "$description": "Success text colour." }, "icon": { "$type": "color", "$value": "oklch(0.640602 0.132853 157.7)", "$description": "Success icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.548102 0.128886 157.7)", "$description": "Solid success fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Text and icons on the solid success fill." } }, "warning": { "surface": { "$type": "color", "$value": "oklch(0.25781 0.04422 74.467502)", "$description": "Warning feedback background." }, "border": { "$type": "color", "$value": "oklch(0.454239 0.082359 74.940897)", "$description": "Warning border colour." }, "text": { "$type": "color", "$value": "oklch(0.861614 0.172903 88.99284)", "$description": "Warning text colour." }, "icon": { "$type": "color", "$value": "oklch(0.853575 0.15722 84.1)", "$description": "Warning icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.853575 0.15722 84.1)", "$description": "Solid warning fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(0.145 0 286)", "$description": "Text and icons on the solid warning fill." } }, "critical": { "surface": { "$type": "color", "$value": "oklch(0.251058 0.06493 12.674503)", "$description": "Critical feedback background." }, "border": { "$type": "color", "$value": "oklch(0.450175 0.121046 18.748598)", "$description": "Critical border colour." }, "text": { "$type": "color", "$value": "oklch(0.780413 0.128122 22.121461)", "$description": "Critical text colour." }, "icon": { "$type": "color", "$value": "oklch(0.625577 0.193344 23)", "$description": "Critical icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.590577 0.193344 23)", "$description": "Solid critical fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Text and icons on the solid critical fill." } }, "neutral": { "surface": { "$type": "color", "$value": "oklch(0.269 0 286)", "$description": "Neutral feedback background." }, "border": { "$type": "color", "$value": "oklch(0.37 0 286)", "$description": "Neutral border colour." }, "text": { "$type": "color", "$value": "oklch(0.769 0 286)", "$description": "Neutral text colour." }, "icon": { "$type": "color", "$value": "oklch(0.708 0 286)", "$description": "Neutral icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.985 0 286)", "$description": "Solid neutral fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(0.145 0 286)", "$description": "Text and icons on the solid neutral fill." } }, "accent": { "surface": { "$type": "color", "$value": "oklch(0.271571 0.070509 267.975387)", "$description": "Accent feedback background." }, "border": { "$type": "color", "$value": "oklch(0.449078 0.120101 268.933794)", "$description": "Accent border colour." }, "text": { "$type": "color", "$value": "oklch(0.775866 0.113802 273.011264)", "$description": "Accent text colour." }, "icon": { "$type": "color", "$value": "oklch(0.589183 0.175768 269.290124)", "$description": "Accent icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.543785 0.191021 267)", "$description": "Solid accent fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(1 0 286)", "$description": "Text and icons on the solid accent fill." } } }, "viz": { "mark": { "single": { "$type": "color", "$value": "oklch(0.543785 0.191021 267)", "$description": "Colour of a chart that draws a single series." } }, "scale": { "categorical": { "01": { "$type": "color", "$value": "oklch(0.543785 0.191021 267)", "$description": "Series colour 1 of 6, for categories that have no order." }, "02": { "$type": "color", "$value": "oklch(0.764609 0.15638 87)", "$description": "Series colour 2 of 6, for categories that have no order." }, "03": { "$type": "color", "$value": "oklch(0.726529 0.191793 327)", "$description": "Series colour 3 of 6, for categories that have no order." }, "04": { "$type": "color", "$value": "oklch(0.795586 0.147294 147)", "$description": "Series colour 4 of 6, for categories that have no order." }, "05": { "$type": "color", "$value": "oklch(0.626152 0.193432 27)", "$description": "Series colour 5 of 6, for categories that have no order." }, "06": { "$type": "color", "$value": "oklch(0.615978 0.105617 207)", "$description": "Series colour 6 of 6, for categories that have no order." } }, "sequential": { "01": { "$type": "color", "$value": "oklch(0.2 0.076587 267)", "$description": "Step 1 of 9 of the ordered scale (01 is the low end)." }, "02": { "$type": "color", "$value": "oklch(0.3 0.116016 267)", "$description": "Step 2 of 9 of the ordered scale (01 is the low end)." }, "03": { "$type": "color", "$value": "oklch(0.4 0.143166 267)", "$description": "Step 3 of 9 of the ordered scale (01 is the low end)." }, "04": { "$type": "color", "$value": "oklch(0.5 0.152817 267)", "$description": "Step 4 of 9 of the ordered scale (01 is the low end)." }, "05": { "$type": "color", "$value": "oklch(0.6 0.143166 267)", "$description": "Step 5 of 9 of the ordered scale (01 is the low end)." }, "06": { "$type": "color", "$value": "oklch(0.7 0.116016 267)", "$description": "Step 6 of 9 of the ordered scale (01 is the low end)." }, "07": { "$type": "color", "$value": "oklch(0.8 0.076587 267)", "$description": "Step 7 of 9 of the ordered scale (01 is the low end)." }, "08": { "$type": "color", "$value": "oklch(0.9 0.033201 267)", "$description": "Step 8 of 9 of the ordered scale (01 is the low end)." }, "09": { "$type": "color", "$value": "oklch(1 0 267)", "$description": "Step 9 of 9 of the ordered scale (01 is the low end)." } }, "diverging": { "neg-01": { "$type": "color", "$value": "oklch(0.46 0.185665 267)", "$description": "Step 1 of 5 below the midpoint of the diverging scale." }, "pos-01": { "$type": "color", "$value": "oklch(0.46 0.185665 23)", "$description": "Step 1 of 5 above the midpoint of the diverging scale." }, "neg-02": { "$type": "color", "$value": "oklch(0.56 0.186634 267)", "$description": "Step 2 of 5 below the midpoint of the diverging scale." }, "pos-02": { "$type": "color", "$value": "oklch(0.56 0.186634 23)", "$description": "Step 2 of 5 above the midpoint of the diverging scale." }, "neg-03": { "$type": "color", "$value": "oklch(0.66 0.160892 267)", "$description": "Step 3 of 5 below the midpoint of the diverging scale." }, "pos-03": { "$type": "color", "$value": "oklch(0.66 0.160892 23)", "$description": "Step 3 of 5 above the midpoint of the diverging scale." }, "neg-04": { "$type": "color", "$value": "oklch(0.76 0.116709 267)", "$description": "Step 4 of 5 below the midpoint of the diverging scale." }, "pos-04": { "$type": "color", "$value": "oklch(0.76 0.116709 23)", "$description": "Step 4 of 5 above the midpoint of the diverging scale." }, "neg-05": { "$type": "color", "$value": "oklch(0.86 0.062954 267)", "$description": "Step 5 of 5 below the midpoint of the diverging scale." }, "pos-05": { "$type": "color", "$value": "oklch(0.86 0.062954 23)", "$description": "Step 5 of 5 above the midpoint of the diverging scale." }, "neutral": { "$type": "color", "$value": "oklch(0.36 0 286)", "$description": "Midpoint of the diverging scale." } } } } }, "hc": { "surface": { "canvas": { "$type": "color", "$value": "Canvas", "$description": "Primary application canvas." }, "raised": { "$type": "color", "$value": "Canvas", "$description": "Raised card surface." }, "subtle": { "$type": "color", "$value": "Canvas", "$description": "Subtle secondary surface." }, "disabled": { "$type": "color", "$value": "Canvas", "$description": "Surface colour for disabled or inactive UI." }, "backdrop": { "$type": "color", "$value": "Canvas", "$description": "Backdrop scrim surface." }, "inverse": { "$type": "color", "$value": "CanvasText", "$description": "Inverse surface for dark-on-light treatments." }, "interactive": { "primary": { "default": { "$type": "color", "$value": "Highlight", "$description": "Primary interactive surface default state." }, "hover": { "$type": "color", "$value": "Highlight", "$description": "Primary interactive surface hover state." }, "pressed": { "$type": "color", "$value": "Highlight", "$description": "Primary interactive surface pressed state." } }, "secondary": { "default": { "$type": "color", "$value": "Canvas", "$description": "The secondary action (a subtle fill), at rest." }, "hover": { "$type": "color", "$value": "Canvas", "$description": "The secondary action (a subtle fill), hovered." }, "pressed": { "$type": "color", "$value": "Canvas", "$description": "The secondary action (a subtle fill), pressed." } }, "destructive": { "default": { "$type": "color", "$value": "Canvas", "$description": "The destructive action, at rest." }, "hover": { "$type": "color", "$value": "Canvas", "$description": "The destructive action, hovered." }, "pressed": { "$type": "color", "$value": "Canvas", "$description": "The destructive action, pressed." } } } }, "border": { "subtle": { "$type": "color", "$value": "CanvasText", "$description": "Default border for surfaces." }, "strong": { "$type": "color", "$value": "CanvasText", "$description": "High-emphasis border." }, "interactive": { "$type": "color", "$value": "CanvasText", "$description": "Border of a control (input, select, checkbox, outline button), at least 3:1 against the surface it sits on." }, "interactiveHover": { "$type": "color", "$value": "CanvasText", "$description": "Border of a hovered control." } }, "text": { "primary": { "$type": "color", "$value": "CanvasText", "$description": "Primary reading text." }, "secondary": { "$type": "color", "$value": "CanvasText", "$description": "Secondary supporting text." }, "muted": { "$type": "color", "$value": "CanvasText", "$description": "Muted caption text." }, "inverse": { "$type": "color", "$value": "Canvas", "$description": "Text on inverse surfaces." }, "onInteractive": { "$type": "color", "$value": "HighlightText", "$description": "Text and icons on the primary interactive surface (buttons and selected controls)." }, "onDestructive": { "$type": "color", "$value": "CanvasText", "$description": "Text and icons on the destructive action." }, "disabled": { "$type": "color", "$value": "GrayText", "$description": "Disabled or de-emphasised text." }, "accent": { "$type": "color", "$value": "LinkText", "$description": "Accent text colour." } }, "focus": { "ring": { "outer": { "$type": "color", "$value": "CanvasText", "$description": "Outer focus ring colour." }, "inner": { "$type": "color", "$value": "Canvas", "$description": "Inner focus ring colour." } }, "text": { "$type": "color", "$value": "CanvasText", "$description": "Focus foreground colour." } }, "accent": { "background": { "$type": "color", "$value": "Canvas", "$description": "Background of an accent panel." }, "border": { "$type": "color", "$value": "CanvasText", "$description": "Border of an accent panel." }, "text": { "$type": "color", "$value": "CanvasText", "$description": "Text on an accent panel." } }, "status": { "info": { "surface": { "$type": "color", "$value": "Canvas", "$description": "Informational background surface." }, "border": { "$type": "color", "$value": "CanvasText", "$description": "Informational border colour." }, "text": { "$type": "color", "$value": "CanvasText", "$description": "Informational text colour." }, "icon": { "$type": "color", "$value": "CanvasText", "$description": "Informational icon colour." }, "solid": { "$type": "color", "$value": "Canvas", "$description": "Solid info fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "CanvasText", "$description": "Text and icons on the solid info fill." } }, "success": { "surface": { "$type": "color", "$value": "Canvas", "$description": "Success feedback background." }, "border": { "$type": "color", "$value": "CanvasText", "$description": "Success border colour." }, "text": { "$type": "color", "$value": "CanvasText", "$description": "Success text colour." }, "icon": { "$type": "color", "$value": "CanvasText", "$description": "Success icon colour." }, "solid": { "$type": "color", "$value": "Canvas", "$description": "Solid success fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "CanvasText", "$description": "Text and icons on the solid success fill." } }, "warning": { "surface": { "$type": "color", "$value": "Canvas", "$description": "Warning feedback background." }, "border": { "$type": "color", "$value": "CanvasText", "$description": "Warning border colour." }, "text": { "$type": "color", "$value": "CanvasText", "$description": "Warning text colour." }, "icon": { "$type": "color", "$value": "CanvasText", "$description": "Warning icon colour." }, "solid": { "$type": "color", "$value": "Canvas", "$description": "Solid warning fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "CanvasText", "$description": "Text and icons on the solid warning fill." } }, "critical": { "surface": { "$type": "color", "$value": "Canvas", "$description": "Critical feedback background." }, "border": { "$type": "color", "$value": "CanvasText", "$description": "Critical border colour." }, "text": { "$type": "color", "$value": "CanvasText", "$description": "Critical text colour." }, "icon": { "$type": "color", "$value": "CanvasText", "$description": "Critical icon colour." }, "solid": { "$type": "color", "$value": "Canvas", "$description": "Solid critical fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "CanvasText", "$description": "Text and icons on the solid critical fill." } }, "neutral": { "surface": { "$type": "color", "$value": "Canvas", "$description": "Neutral feedback background." }, "border": { "$type": "color", "$value": "CanvasText", "$description": "Neutral border colour." }, "text": { "$type": "color", "$value": "CanvasText", "$description": "Neutral text colour." }, "icon": { "$type": "color", "$value": "CanvasText", "$description": "Neutral icon colour." }, "solid": { "$type": "color", "$value": "Canvas", "$description": "Solid neutral fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "CanvasText", "$description": "Text and icons on the solid neutral fill." } }, "accent": { "surface": { "$type": "color", "$value": "Canvas", "$description": "Accent feedback background." }, "border": { "$type": "color", "$value": "CanvasText", "$description": "Accent border colour." }, "text": { "$type": "color", "$value": "CanvasText", "$description": "Accent text colour." }, "icon": { "$type": "color", "$value": "CanvasText", "$description": "Accent icon colour." }, "solid": { "$type": "color", "$value": "Canvas", "$description": "Solid accent fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "CanvasText", "$description": "Text and icons on the solid accent fill." } } }, "viz": { "mark": { "single": { "$type": "color", "$value": "CanvasText", "$description": "Colour of a chart that draws a single series." } }, "scale": { "categorical": { "01": { "$type": "color", "$value": "CanvasText", "$description": "Series colour 1 of 6, for categories that have no order." }, "02": { "$type": "color", "$value": "CanvasText", "$description": "Series colour 2 of 6, for categories that have no order." }, "03": { "$type": "color", "$value": "CanvasText", "$description": "Series colour 3 of 6, for categories that have no order." }, "04": { "$type": "color", "$value": "CanvasText", "$description": "Series colour 4 of 6, for categories that have no order." }, "05": { "$type": "color", "$value": "CanvasText", "$description": "Series colour 5 of 6, for categories that have no order." }, "06": { "$type": "color", "$value": "CanvasText", "$description": "Series colour 6 of 6, for categories that have no order." } }, "sequential": { "01": { "$type": "color", "$value": "oklch(0.94 0 265)", "$description": "Step 1 of 9 of the ordered scale (01 is the low end)." }, "02": { "$type": "color", "$value": "oklch(0.84 0 265)", "$description": "Step 2 of 9 of the ordered scale (01 is the low end)." }, "03": { "$type": "color", "$value": "oklch(0.74 0 265)", "$description": "Step 3 of 9 of the ordered scale (01 is the low end)." }, "04": { "$type": "color", "$value": "oklch(0.64 0 265)", "$description": "Step 4 of 9 of the ordered scale (01 is the low end)." }, "05": { "$type": "color", "$value": "oklch(0.54 0 265)", "$description": "Step 5 of 9 of the ordered scale (01 is the low end)." }, "06": { "$type": "color", "$value": "oklch(0.44 0 265)", "$description": "Step 6 of 9 of the ordered scale (01 is the low end)." }, "07": { "$type": "color", "$value": "oklch(0.34 0 265)", "$description": "Step 7 of 9 of the ordered scale (01 is the low end)." }, "08": { "$type": "color", "$value": "oklch(0.24 0 265)", "$description": "Step 8 of 9 of the ordered scale (01 is the low end)." }, "09": { "$type": "color", "$value": "oklch(0.14 0 265)", "$description": "Step 9 of 9 of the ordered scale (01 is the low end)." } }, "diverging": { "neg-01": { "$type": "color", "$value": "oklch(0.7 0 197.5)", "$description": "Step 1 of 5 below the midpoint of the diverging scale." }, "pos-01": { "$type": "color", "$value": "oklch(0.7 0 17.5)", "$description": "Step 1 of 5 above the midpoint of the diverging scale." }, "neg-02": { "$type": "color", "$value": "oklch(0.58 0 197.5)", "$description": "Step 2 of 5 below the midpoint of the diverging scale." }, "pos-02": { "$type": "color", "$value": "oklch(0.58 0 17.5)", "$description": "Step 2 of 5 above the midpoint of the diverging scale." }, "neg-03": { "$type": "color", "$value": "oklch(0.46 0 197.5)", "$description": "Step 3 of 5 below the midpoint of the diverging scale." }, "pos-03": { "$type": "color", "$value": "oklch(0.46 0 17.5)", "$description": "Step 3 of 5 above the midpoint of the diverging scale." }, "neg-04": { "$type": "color", "$value": "oklch(0.34 0 197.5)", "$description": "Step 4 of 5 below the midpoint of the diverging scale." }, "pos-04": { "$type": "color", "$value": "oklch(0.34 0 17.5)", "$description": "Step 4 of 5 above the midpoint of the diverging scale." }, "neg-05": { "$type": "color", "$value": "oklch(0.22 0 197.5)", "$description": "Step 5 of 5 below the midpoint of the diverging scale." }, "pos-05": { "$type": "color", "$value": "oklch(0.22 0 17.5)", "$description": "Step 5 of 5 above the midpoint of the diverging scale." }, "neutral": { "$type": "color", "$value": "oklch(0.82 0 265)", "$description": "Midpoint of the diverging scale." } } } } } }, "fixed": [], "presets": [ { "id": "corporate-blue", "description": "Corporate Blue preset — professional, trust-forward palette with a deep blue primary and cool neutral greys. Suitable for B2B dashboards, enterprise tools, and financial interfaces. It sets all 69 colour slots and all 27 chart slots from one brand recipe (light roles and charts) over brand A's light theme; every other slot starts from brand A. Load it as a starting point with brand.intake (action \"template\", from { \"preset\": \"corporate-blue\" }), then validate and create the brand. Brand-relative: no color.brand. wrapper, so it serves any brand." }, { "id": "dark-minimal", "description": "Dark Minimal preset — sleek dark-mode palette with a green accent and low-chroma slate neutrals. Suitable for developer tools, code editors, terminal UIs, and monitoring dashboards. It sets all 69 colour slots and all 27 chart slots from one brand recipe (dark roles and charts) over brand A's light and dark themes; every other slot starts from brand A. Load it as a starting point with brand.intake (action \"template\", from { \"preset\": \"dark-minimal\" }), then validate and create the brand. Brand-relative: no color.brand. wrapper, so it serves any brand." }, { "id": "startup-warm", "description": "Startup Warm preset — friendly, approachable palette with a coral primary and warm neutrals. Suitable for consumer apps, onboarding flows, and creative tools. It sets all 69 colour slots and all 27 chart slots from one brand recipe (light roles and charts) over brand A's light theme; every other slot starts from brand A. Load it as a starting point with brand.intake (action \"template\", from { \"preset\": \"startup-warm\" }), then validate and create the brand. Brand-relative: no color.brand. wrapper, so it serves any brand." } ], "rules": [ "A brand id is capitals then digits (A, ACME, A1), or a letter then lower-case letters and digits (Acme, acme2), at most 32 characters, and no existing brand's id in any case.", "Each theme (base = light, dark, hc = high contrast) has every slot of the template and no other: base 103, dark 96, hc 96.", "Each colour slot is {\"$type\": \"color\", \"$value\": \"\"}: hex, rgb(), hsl(), oklch(), lab() or a named colour; opaque; not a reference to another token. $description is kept as written.", "The base theme also carries the brand's radius (radius.control, small, large, card, pill: {\"$type\": \"dimension\", \"$value\": \"<0 to 999>px\"}) and font (font.sans, font.mono: {\"$type\": \"fontFamily\", \"$value\": \"\"}); every theme of a brand shares them.", "A recipe (neutralHue, neutralChroma, accentHue, primary \"neutral\" or \"accent\", radius, font) gives a complete brand: template with from.recipe returns its documents graded, and validate and create take recipe in place of documents.", "System colours (AccentColor, AccentColorText, ActiveText, ButtonBorder, ButtonFace, ButtonText, Canvas, CanvasText, Field, FieldText, GrayText, Highlight, HighlightText, LinkText, Mark, MarkText, SelectedItem, SelectedItemText, VisitedText) follow the user's high-contrast settings, so only hc may use them.", "The light and dark themes are graded with the brand contrast rules (84 pairs each: text on its surfaces at 4.5:1; status icons, control borders at rest and hovered, and the focus ring at 3:1).", "Every theme's chart marks are graded too (7 pairs each: the one-series colour and the six series at 3:1 on surface.canvas). A failing one says whether its value is brand A's, which a template starts from; set viz.* for your canvas.", "In hc, a pair of two system colours is graded with the system colours as Chromium 141.0.7390.37 without forced colours (macOS and Linux, light and dark color-scheme), 2026-09-29, and passes only if it passes in all four; a pair of two colours is graded like light and dark, and a pair of one of each is refused: the system colour could be any colour." ] } }