{ "step": "Aquex-template", "tool": "brand_create", "input": { "action": "template", "from": { "recipe": { "neutralHue": 250, "neutralChroma": 0.008, "accentHue": 183, "primary": "neutral", "radius": 8, "font": "DM Sans" } } }, "isError": false, "error": null, "output": { "action": "template", "from": { "recipe": { "neutralHue": 250, "neutralChroma": 0.008, "accentHue": 183, "primary": "neutral", "radius": 8, "font": "DM Sans" } }, "slots": { "base": 103, "dark": 96, "hc": 96 }, "documents": { "base": { "surface": { "canvas": { "$type": "color", "$value": "oklch(1 0.000003 250)", "$description": "Primary application canvas." }, "raised": { "$type": "color", "$value": "oklch(1 0.000003 250)", "$description": "Raised card surface." }, "subtle": { "$type": "color", "$value": "oklch(0.97 0.00192 250)", "$description": "Subtle secondary surface." }, "disabled": { "$type": "color", "$value": "oklch(0.97 0.00192 250)", "$description": "Surface colour for disabled or inactive UI." }, "backdrop": { "$type": "color", "$value": "oklch(0.145 0.00472 250)", "$description": "Backdrop scrim surface." }, "inverse": { "$type": "color", "$value": "oklch(0.145 0.00472 250)", "$description": "Inverse surface for dark-on-light treatments." }, "interactive": { "primary": { "default": { "$type": "color", "$value": "oklch(0.145 0.00472 250)", "$description": "Primary interactive surface default state." }, "hover": { "$type": "color", "$value": "oklch(0.3361 0.005916 250)", "$description": "Primary interactive surface hover state." }, "pressed": { "$type": "color", "$value": "oklch(0.2626 0.005456 250)", "$description": "Primary interactive surface pressed state." } }, "secondary": { "default": { "$type": "color", "$value": "oklch(0.97 0.00192 250)", "$description": "The secondary action (a subtle fill), at rest." }, "hover": { "$type": "color", "$value": "oklch(0.95 0.00232 250)", "$description": "The secondary action (a subtle fill), hovered." }, "pressed": { "$type": "color", "$value": "oklch(0.935 0.00328 250)", "$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.00424 250)", "$description": "Default border for surfaces." }, "strong": { "$type": "color", "$value": "oklch(0.871 0.0052 250)", "$description": "High-emphasis border." }, "interactive": { "$type": "color", "$value": "oklch(0.643 0.008 250)", "$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.00704 250)", "$description": "Border of a hovered control." } }, "text": { "primary": { "$type": "color", "$value": "oklch(0.145 0.00472 250)", "$description": "Primary reading text." }, "secondary": { "$type": "color", "$value": "oklch(0.439 0.00656 250)", "$description": "Secondary supporting text." }, "muted": { "$type": "color", "$value": "oklch(0.545 0.00704 250)", "$description": "Muted caption text." }, "inverse": { "$type": "color", "$value": "oklch(1 0.000003 250)", "$description": "Text on inverse surfaces." }, "onInteractive": { "$type": "color", "$value": "oklch(1 0.000003 250)", "$description": "Text and icons on the primary interactive surface (buttons and selected controls)." }, "onDestructive": { "$type": "color", "$value": "oklch(1 0.000003 250)", "$description": "Text and icons on the destructive action." }, "disabled": { "$type": "color", "$value": "oklch(0.643 0.008 250)", "$description": "Disabled or de-emphasised text." }, "accent": { "$type": "color", "$value": "oklch(0.531937 0.096583 179.887749)", "$description": "Accent text colour." } }, "focus": { "ring": { "outer": { "$type": "color", "$value": "oklch(0.649366 0.113782 183)", "$description": "Outer focus ring colour." }, "inner": { "$type": "color", "$value": "oklch(1 0.000003 250)", "$description": "Inner focus ring colour." } }, "text": { "$type": "color", "$value": "oklch(0.531937 0.096583 179.887749)", "$description": "Focus foreground colour." } }, "accent": { "background": { "$type": "color", "$value": "oklch(0.960206 0.025939 182.404524)", "$description": "Background of an accent panel." }, "border": { "$type": "color", "$value": "oklch(0.796572 0.076176 183.66579)", "$description": "Border of an accent panel." }, "text": { "$type": "color", "$value": "oklch(0.529437 0.096129 179.887749)", "$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.000003 250)", "$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.000003 250)", "$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.00472 250)", "$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.000003 250)", "$description": "Text and icons on the solid critical fill." } }, "neutral": { "surface": { "$type": "color", "$value": "oklch(0.97 0.00192 250)", "$description": "Neutral feedback background." }, "border": { "$type": "color", "$value": "oklch(0.871 0.0052 250)", "$description": "Neutral border colour." }, "text": { "$type": "color", "$value": "oklch(0.439 0.00656 250)", "$description": "Neutral text colour." }, "icon": { "$type": "color", "$value": "oklch(0.643 0.008 250)", "$description": "Neutral icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.145 0.00472 250)", "$description": "Solid neutral fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(1 0.000003 250)", "$description": "Text and icons on the solid neutral fill." } }, "accent": { "surface": { "$type": "color", "$value": "oklch(0.960206 0.025939 182.404524)", "$description": "Accent feedback background." }, "border": { "$type": "color", "$value": "oklch(0.796572 0.076176 183.66579)", "$description": "Accent border colour." }, "text": { "$type": "color", "$value": "oklch(0.529437 0.096129 179.887749)", "$description": "Accent text colour." }, "icon": { "$type": "color", "$value": "oklch(0.61952 0.109547 182.347053)", "$description": "Accent icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.554366 0.09873 183)", "$description": "Solid accent fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(1 0.000003 250)", "$description": "Text and icons on the solid accent fill." } } }, "radius": { "control": { "$type": "dimension", "$value": "8px", "$description": "Corner radius of a control at the default size: the brand recipe's radius." }, "small": { "$type": "dimension", "$value": "6px", "$description": "Corner radius of a small control: the brand radius less 2px." }, "large": { "$type": "dimension", "$value": "10px", "$description": "Corner radius of a large control: the brand radius plus 2px." }, "card": { "$type": "dimension", "$value": "16px", "$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": "'DM Sans', 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.649366 0.113782 183)", "$description": "Colour of a chart that draws a single series." } }, "scale": { "categorical": { "01": { "$type": "color", "$value": "oklch(0.649366 0.113782 183)", "$description": "Series colour 1 of 6, for categories that have no order." }, "02": { "$type": "color", "$value": "oklch(0.673224 0.210333 3)", "$description": "Series colour 2 of 6, for categories that have no order." }, "03": { "$type": "color", "$value": "oklch(0.512432 0.123914 243)", "$description": "Series colour 3 of 6, for categories that have no order." }, "04": { "$type": "color", "$value": "oklch(0.535701 0.122197 63)", "$description": "Series colour 4 of 6, for categories that have no order." }, "05": { "$type": "color", "$value": "oklch(0.653384 0.182288 303)", "$description": "Series colour 5 of 6, for categories that have no order." }, "06": { "$type": "color", "$value": "oklch(0.656124 0.160977 123)", "$description": "Series colour 6 of 6, for categories that have no order." } }, "sequential": { "01": { "$type": "color", "$value": "oklch(0.94 0.012901 183)", "$description": "Step 1 of 9 of the ordered scale (01 is the low end)." }, "02": { "$type": "color", "$value": "oklch(0.84 0.04403 183)", "$description": "Step 2 of 9 of the ordered scale (01 is the low end)." }, "03": { "$type": "color", "$value": "oklch(0.74 0.075439 183)", "$description": "Step 3 of 9 of the ordered scale (01 is the low end)." }, "04": { "$type": "color", "$value": "oklch(0.64 0.09991 183)", "$description": "Step 4 of 9 of the ordered scale (01 is the low end)." }, "05": { "$type": "color", "$value": "oklch(0.54 0.096171 183)", "$description": "Step 5 of 9 of the ordered scale (01 is the low end)." }, "06": { "$type": "color", "$value": "oklch(0.44 0.078362 183)", "$description": "Step 6 of 9 of the ordered scale (01 is the low end)." }, "07": { "$type": "color", "$value": "oklch(0.34 0.060553 183)", "$description": "Step 7 of 9 of the ordered scale (01 is the low end)." }, "08": { "$type": "color", "$value": "oklch(0.24 0.042745 183)", "$description": "Step 8 of 9 of the ordered scale (01 is the low end)." }, "09": { "$type": "color", "$value": "oklch(0.14 0.02494 183)", "$description": "Step 9 of 9 of the ordered scale (01 is the low end)." } }, "diverging": { "neg-01": { "$type": "color", "$value": "oklch(0.7 0.086381 183)", "$description": "Step 1 of 5 below the midpoint of the diverging scale." }, "pos-01": { "$type": "color", "$value": "oklch(0.7 0.086381 23)", "$description": "Step 1 of 5 above the midpoint of the diverging scale." }, "neg-02": { "$type": "color", "$value": "oklch(0.58 0.103295 183)", "$description": "Step 2 of 5 below the midpoint of the diverging scale." }, "pos-02": { "$type": "color", "$value": "oklch(0.58 0.103295 23)", "$description": "Step 2 of 5 above the midpoint of the diverging scale." }, "neg-03": { "$type": "color", "$value": "oklch(0.46 0.081924 183)", "$description": "Step 3 of 5 below the midpoint of the diverging scale." }, "pos-03": { "$type": "color", "$value": "oklch(0.46 0.081924 23)", "$description": "Step 3 of 5 above the midpoint of the diverging scale." }, "neg-04": { "$type": "color", "$value": "oklch(0.34 0.060553 183)", "$description": "Step 4 of 5 below the midpoint of the diverging scale." }, "pos-04": { "$type": "color", "$value": "oklch(0.34 0.060553 23)", "$description": "Step 4 of 5 above the midpoint of the diverging scale." }, "neg-05": { "$type": "color", "$value": "oklch(0.22 0.039183 183)", "$description": "Step 5 of 5 below the midpoint of the diverging scale." }, "pos-05": { "$type": "color", "$value": "oklch(0.22 0.039183 23)", "$description": "Step 5 of 5 above the midpoint of the diverging scale." }, "neutral": { "$type": "color", "$value": "oklch(0.82 0.00752 250)", "$description": "Midpoint of the diverging scale." } } } } }, "dark": { "surface": { "canvas": { "$type": "color", "$value": "oklch(0.145 0.00216 250)", "$description": "Primary application canvas." }, "raised": { "$type": "color", "$value": "oklch(0.205 0.00216 250)", "$description": "Raised card surface." }, "subtle": { "$type": "color", "$value": "oklch(0.269 0.0032 250)", "$description": "Subtle secondary surface." }, "disabled": { "$type": "color", "$value": "oklch(0.269 0.0032 250)", "$description": "Surface colour for disabled or inactive UI." }, "backdrop": { "$type": "color", "$value": "oklch(0.145 0.00216 250)", "$description": "Backdrop scrim surface." }, "inverse": { "$type": "color", "$value": "oklch(0.985 0.0016 250)", "$description": "Inverse surface for dark-on-light treatments." }, "interactive": { "primary": { "default": { "$type": "color", "$value": "oklch(0.985 0.0016 250)", "$description": "Primary interactive surface default state." }, "hover": { "$type": "color", "$value": "oklch(0.8446 0.004044 250)", "$description": "Primary interactive surface hover state." }, "pressed": { "$type": "color", "$value": "oklch(0.8986 0.003104 250)", "$description": "Primary interactive surface pressed state." } }, "secondary": { "default": { "$type": "color", "$value": "oklch(0.269 0.0032 250)", "$description": "The secondary action (a subtle fill), at rest." }, "hover": { "$type": "color", "$value": "oklch(0.29 0.00376 250)", "$description": "The secondary action (a subtle fill), hovered." }, "pressed": { "$type": "color", "$value": "oklch(0.31 0.00424 250)", "$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.00536 250)", "$description": "Default border for surfaces." }, "strong": { "$type": "color", "$value": "oklch(0.37 0.0064 250)", "$description": "High-emphasis border." }, "interactive": { "$type": "color", "$value": "oklch(0.538 0.008 250)", "$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.008 250)", "$description": "Border of a hovered control." } }, "text": { "primary": { "$type": "color", "$value": "oklch(0.985 0.0016 250)", "$description": "Primary reading text." }, "secondary": { "$type": "color", "$value": "oklch(0.769 0.00536 250)", "$description": "Secondary supporting text." }, "muted": { "$type": "color", "$value": "oklch(0.708 0.008 250)", "$description": "Muted caption text." }, "inverse": { "$type": "color", "$value": "oklch(0.145 0.00472 250)", "$description": "Text on inverse surfaces." }, "onInteractive": { "$type": "color", "$value": "oklch(0.145 0.00472 250)", "$description": "Text and icons on the primary interactive surface (buttons and selected controls)." }, "onDestructive": { "$type": "color", "$value": "oklch(1 0.000003 250)", "$description": "Text and icons on the destructive action." }, "disabled": { "$type": "color", "$value": "oklch(0.538 0.008 250)", "$description": "Disabled or de-emphasised text." }, "accent": { "$type": "color", "$value": "oklch(0.788477 0.145895 176.719528)", "$description": "Accent text colour." } }, "focus": { "ring": { "outer": { "$type": "color", "$value": "oklch(0.537901 0.086394 184.46585)", "$description": "Outer focus ring colour." }, "inner": { "$type": "color", "$value": "oklch(0.145 0.00216 250)", "$description": "Inner focus ring colour." } }, "text": { "$type": "color", "$value": "oklch(0.788477 0.145895 176.719528)", "$description": "Focus foreground colour." } }, "accent": { "background": { "$type": "color", "$value": "oklch(0.27256 0.03785 187.632605)", "$description": "Background of an accent panel." }, "border": { "$type": "color", "$value": "oklch(0.47321 0.073973 185.908451)", "$description": "Border of an accent panel." }, "text": { "$type": "color", "$value": "oklch(0.788477 0.145895 176.719528)", "$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.000003 250)", "$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.000003 250)", "$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.00472 250)", "$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.000003 250)", "$description": "Text and icons on the solid critical fill." } }, "neutral": { "surface": { "$type": "color", "$value": "oklch(0.269 0.0032 250)", "$description": "Neutral feedback background." }, "border": { "$type": "color", "$value": "oklch(0.37 0.0064 250)", "$description": "Neutral border colour." }, "text": { "$type": "color", "$value": "oklch(0.769 0.00536 250)", "$description": "Neutral text colour." }, "icon": { "$type": "color", "$value": "oklch(0.708 0.008 250)", "$description": "Neutral icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.985 0.0016 250)", "$description": "Solid neutral fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(0.145 0.00472 250)", "$description": "Text and icons on the solid neutral fill." } }, "accent": { "surface": { "$type": "color", "$value": "oklch(0.27256 0.03785 187.632605)", "$description": "Accent feedback background." }, "border": { "$type": "color", "$value": "oklch(0.47321 0.073973 185.908451)", "$description": "Accent border colour." }, "text": { "$type": "color", "$value": "oklch(0.788477 0.145895 176.719528)", "$description": "Accent text colour." }, "icon": { "$type": "color", "$value": "oklch(0.649366 0.113782 183)", "$description": "Accent icon colour." }, "solid": { "$type": "color", "$value": "oklch(0.554366 0.09873 183)", "$description": "Solid accent fill, for emphasis (a solid badge or banner)." }, "onSolid": { "$type": "color", "$value": "oklch(1 0.000003 250)", "$description": "Text and icons on the solid accent fill." } } }, "viz": { "mark": { "single": { "$type": "color", "$value": "oklch(0.649366 0.113782 183)", "$description": "Colour of a chart that draws a single series." } }, "scale": { "categorical": { "01": { "$type": "color", "$value": "oklch(0.649366 0.113782 183)", "$description": "Series colour 1 of 6, for categories that have no order." }, "02": { "$type": "color", "$value": "oklch(0.633224 0.210333 3)", "$description": "Series colour 2 of 6, for categories that have no order." }, "03": { "$type": "color", "$value": "oklch(0.792432 0.114413 243)", "$description": "Series colour 3 of 6, for categories that have no order." }, "04": { "$type": "color", "$value": "oklch(0.745701 0.170098 63)", "$description": "Series colour 4 of 6, for categories that have no order." }, "05": { "$type": "color", "$value": "oklch(0.553384 0.182288 303)", "$description": "Series colour 5 of 6, for categories that have no order." }, "06": { "$type": "color", "$value": "oklch(0.911124 0.17584 123)", "$description": "Series colour 6 of 6, for categories that have no order." } }, "sequential": { "01": { "$type": "color", "$value": "oklch(0.2 0.035622 183)", "$description": "Step 1 of 9 of the ordered scale (01 is the low end)." }, "02": { "$type": "color", "$value": "oklch(0.3 0.05343 183)", "$description": "Step 2 of 9 of the ordered scale (01 is the low end)." }, "03": { "$type": "color", "$value": "oklch(0.4 0.071238 183)", "$description": "Step 3 of 9 of the ordered scale (01 is the low end)." }, "04": { "$type": "color", "$value": "oklch(0.5 0.089047 183)", "$description": "Step 4 of 9 of the ordered scale (01 is the low end)." }, "05": { "$type": "color", "$value": "oklch(0.6 0.085277 183)", "$description": "Step 5 of 9 of the ordered scale (01 is the low end)." }, "06": { "$type": "color", "$value": "oklch(0.7 0.069105 183)", "$description": "Step 6 of 9 of the ordered scale (01 is the low end)." }, "07": { "$type": "color", "$value": "oklch(0.8 0.045619 183)", "$description": "Step 7 of 9 of the ordered scale (01 is the low end)." }, "08": { "$type": "color", "$value": "oklch(0.9 0.019776 183)", "$description": "Step 8 of 9 of the ordered scale (01 is the low end)." }, "09": { "$type": "color", "$value": "oklch(1 0 183)", "$description": "Step 9 of 9 of the ordered scale (01 is the low end)." } }, "diverging": { "neg-01": { "$type": "color", "$value": "oklch(0.46 0.081924 183)", "$description": "Step 1 of 5 below the midpoint of the diverging scale." }, "pos-01": { "$type": "color", "$value": "oklch(0.46 0.081924 23)", "$description": "Step 1 of 5 above the midpoint of the diverging scale." }, "neg-02": { "$type": "color", "$value": "oklch(0.56 0.099733 183)", "$description": "Step 2 of 5 below the midpoint of the diverging scale." }, "pos-02": { "$type": "color", "$value": "oklch(0.56 0.099733 23)", "$description": "Step 2 of 5 above the midpoint of the diverging scale." }, "neg-03": { "$type": "color", "$value": "oklch(0.66 0.095836 183)", "$description": "Step 3 of 5 below the midpoint of the diverging scale." }, "pos-03": { "$type": "color", "$value": "oklch(0.66 0.095836 23)", "$description": "Step 3 of 5 above the midpoint of the diverging scale." }, "neg-04": { "$type": "color", "$value": "oklch(0.76 0.069518 183)", "$description": "Step 4 of 5 below the midpoint of the diverging scale." }, "pos-04": { "$type": "color", "$value": "oklch(0.76 0.069518 23)", "$description": "Step 4 of 5 above the midpoint of the diverging scale." }, "neg-05": { "$type": "color", "$value": "oklch(0.86 0.037498 183)", "$description": "Step 5 of 5 below the midpoint of the diverging scale." }, "pos-05": { "$type": "color", "$value": "oklch(0.86 0.037498 23)", "$description": "Step 5 of 5 above the midpoint of the diverging scale." }, "neutral": { "$type": "color", "$value": "oklch(0.36 0.008 250)", "$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." ], "report": { "valid": true, "brand_id": null, "themes": { "base": { "label": "light", "slots": 103, "provided": 103 }, "dark": { "label": "dark", "slots": 96, "provided": 96 }, "hc": { "label": "high contrast", "slots": 96, "provided": 96 } }, "issues": [], "contrast": { "base": { "graded": 84, "passed": 84, "failed": 0, "ungraded": 0, "charts": { "graded": 7, "passed": 7, "failed": 0, "ungraded": 0 } }, "dark": { "graded": 84, "passed": 84, "failed": 0, "ungraded": 0, "charts": { "graded": 7, "passed": 7, "failed": 0, "ungraded": 0 } }, "hc": { "graded": 83, "passed": 83, "failed": 0, "ungraded": 0, "systemColoursResolvedIn": "Chromium 141.0.7390.37 without forced colours (macOS and Linux, light and dark color-scheme), 2026-09-29", "exempt": 1, "charts": { "graded": 7, "passed": 7, "failed": 0, "ungraded": 0 } } } }, "adjustments": { "light": [ { "role": "critical solid", "from": "oklch(0.625577 0.193344 23)", "to": "oklch(0.590577 0.193344 23)", "fromHex": "#E5484D", "toHex": "#D83B43" }, { "role": "text.accent", "from": "oklch(0.551937 0.100214 179.887749)", "to": "oklch(0.531937 0.096583 179.887749)", "fromHex": "#008574", "toHex": "#007E6E" }, { "role": "accent.text", "from": "oklch(0.551937 0.100214 179.887749)", "to": "oklch(0.529437 0.096129 179.887749)", "fromHex": "#008574", "toHex": "#007D6E" }, { "role": "info solid", "from": "oklch(0.649151 0.193037 251.8)", "to": "oklch(0.566651 0.168568 251.8)", "fromHex": "#0090FF", "toHex": "#0077D5" }, { "role": "status.info.text", "from": "oklch(0.555689 0.162234 252.214666)", "to": "oklch(0.540689 0.162234 252.214666)", "fromHex": "#0D74CE", "toHex": "#016FC9" }, { "role": "success solid", "from": "oklch(0.640602 0.132853 157.7)", "to": "oklch(0.548102 0.128886 157.7)", "fromHex": "#30A46C", "toHex": "#008752" }, { "role": "status.success.text", "from": "oklch(0.543466 0.11158 159.513172)", "to": "oklch(0.523466 0.11158 159.513172)", "fromHex": "#218358", "toHex": "#187D52" }, { "role": "status.warning.text", "from": "oklch(0.570661 0.129157 63.921739)", "to": "oklch(0.553161 0.125197 63.921739)", "fromHex": "#AB6400", "toHex": "#A46000" }, { "role": "accent solid", "from": "oklch(0.649366 0.113782 183)", "to": "oklch(0.554366 0.09873 183)", "fromHex": "#0DA595", "toHex": "#008578" }, { "role": "status.accent.text", "from": "oklch(0.551937 0.100214 179.887749)", "to": "oklch(0.529437 0.096129 179.887749)", "fromHex": "#008574", "toHex": "#007D6E" }, { "role": "viz.scale.categorical.02", "from": "oklch(0.633224 0.210333 3)", "to": "oklch(0.673224 0.210333 3)", "fromHex": "#E93E7E", "toHex": "#F74D8A", "reason": "CIEDE2000 12 from every other series, in every vision" }, { "role": "viz.scale.categorical.03", "from": "oklch(0.652432 0.157767 243)", "to": "oklch(0.512432 0.123914 243)", "fromHex": "#0098E7", "toHex": "#006DA7", "reason": "CIEDE2000 12 from every other series, in every vision" }, { "role": "viz.scale.categorical.04", "from": "oklch(0.765701 0.17466 63)", "to": "oklch(0.535701 0.122197 63)", "fromHex": "#FF9600", "toHex": "#9E5B00", "reason": "3:1 on the canvas; CIEDE2000 12 from every other series, in every vision" }, { "role": "viz.scale.categorical.05", "from": "oklch(0.553384 0.182288 303)", "to": "oklch(0.653384 0.182288 303)", "fromHex": "#894FC8", "toHex": "#A76FEA", "reason": "CIEDE2000 12 from every other series, in every vision" }, { "role": "viz.scale.categorical.06", "from": "oklch(0.891124 0.17584 123)", "to": "oklch(0.656124 0.160977 123)", "fromHex": "#C6ED5C", "toHex": "#7FA000", "reason": "3:1 on the canvas" } ], "dark": [ { "role": "critical solid", "from": "oklch(0.625577 0.193344 23)", "to": "oklch(0.590577 0.193344 23)", "fromHex": "#E5484D", "toHex": "#D83B43" }, { "role": "info solid", "from": "oklch(0.649151 0.193037 251.8)", "to": "oklch(0.566651 0.168568 251.8)", "fromHex": "#0090FF", "toHex": "#0077D5" }, { "role": "success solid", "from": "oklch(0.640602 0.132853 157.7)", "to": "oklch(0.548102 0.128886 157.7)", "fromHex": "#30A46C", "toHex": "#008752" }, { "role": "accent solid", "from": "oklch(0.649366 0.113782 183)", "to": "oklch(0.554366 0.09873 183)", "fromHex": "#0DA595", "toHex": "#008578" }, { "role": "viz.scale.categorical.03", "from": "oklch(0.652432 0.157767 243)", "to": "oklch(0.792432 0.114413 243)", "fromHex": "#0098E7", "toHex": "#76C4FF", "reason": "CIEDE2000 12 from every other series, in every vision" }, { "role": "viz.scale.categorical.04", "from": "oklch(0.765701 0.17466 63)", "to": "oklch(0.745701 0.170098 63)", "fromHex": "#FF9600", "toHex": "#F69000", "reason": "CIEDE2000 12 from every other series, in every vision" }, { "role": "viz.scale.categorical.06", "from": "oklch(0.891124 0.17584 123)", "to": "oklch(0.911124 0.17584 123)", "fromHex": "#C6ED5C", "toHex": "#CCF463", "reason": "CIEDE2000 12 from every other series, in every vision" } ] } } }