@equal-experts/kuat-react 0.14.0-beta.2 → 0.15.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/agent-docs/AGENTS.md +1 -1
- package/agent-docs/README.md +1 -1
- package/agent-docs/external/kuat-agent-rules/reference/accessibility/accessibility.md +27 -1
- package/agent-docs/external/kuat-agent-rules/reference/design-language/colour-usage.md +107 -0
- package/agent-docs/external/kuat-agent-rules/reference/design-language/colours.md +86 -11
- package/agent-docs/external/kuat-agent-rules/reference/design-language/tokens/colors.tokens.json +193 -5
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/patterns/README.md +6 -0
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/website.md +14 -0
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/README.md +1 -0
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/accessibility.md +0 -29
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/colour-modes.md +58 -0
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/component-decision-tree.md +3 -32
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/component-registry.md +1 -1
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/content/product-content.md +0 -26
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/README.md +14 -5
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/{forms.md → complete-a-form.md} +43 -53
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/{dashboards.md → dashboard.md} +42 -51
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/documentation.md +41 -51
- package/agent-docs/external/kuat-agent-rules/reference/media-types/web-product/patterns/{authentication.md → sign-in.md} +42 -52
- package/agent-docs/manifest.json +3 -3
- package/agent-docs/rules/LOADING-consumer.md +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/agent-docs/AGENTS.md
CHANGED
|
@@ -7,4 +7,4 @@ Rules for this install live under `agent-docs/` in `@equal-experts/kuat-core`, `
|
|
|
7
7
|
3. Load component guides via `agent-docs/components/components.manifest.json`.
|
|
8
8
|
4. Skills: `kuat-review`, `kuat-create` from [kuat-agent-docs](https://github.com/equalexperts/kuat-agent-docs).
|
|
9
9
|
|
|
10
|
-
**Version:** 0.
|
|
10
|
+
**Version:** 0.15.0-beta.0 · **Rules snapshot:** 24ebd2dee5cc
|
package/agent-docs/README.md
CHANGED
|
@@ -99,11 +99,37 @@ When using colour for status (red/amber/green):
|
|
|
99
99
|
3. **Include legend** - Always explain what colours mean
|
|
100
100
|
4. **Consider colour blindness** - Red/green are commonly confused
|
|
101
101
|
|
|
102
|
+
### Status / RAG Colour Values
|
|
103
|
+
|
|
104
|
+
The semantic layer in [colours.md](../design-language/colours.md#semantic--rag-colours) fixes the
|
|
105
|
+
status set — always pair with the listed shape/icon, never colour alone:
|
|
106
|
+
|
|
107
|
+
| State | Colour | Required text | Ratio |
|
|
108
|
+
|-------|--------|----------------|-------|
|
|
109
|
+
| Error / danger | Runtime Red `#a3152b` | White | 7.8:1 AAA |
|
|
110
|
+
| Warning | Equal Ember `#f07c00` | Dark Data (white **fails**, 2.8:1) | 5.6:1 AA |
|
|
111
|
+
| Success | Uptime Green `#11821b` | White | 5.0:1 AA |
|
|
112
|
+
| Info / call-out | Index Indigo `#352361` | White | 13.4:1 AAA |
|
|
113
|
+
|
|
114
|
+
Runtime Red and Uptime Green collapse under protanopia — the icon/shape/label partner is what
|
|
115
|
+
makes RAG status colour-blind safe, not the colour itself.
|
|
116
|
+
|
|
117
|
+
### Accessible Link Colour (WIP)
|
|
118
|
+
|
|
119
|
+
EE Blue (`#1795d4`) fails body-text contrast (3.3:1 on white) and is reserved for buttons, icons,
|
|
120
|
+
and larger CTAs. Text links and small text use the semantic `link` token (`#0080be`) instead —
|
|
121
|
+
see [colour-usage.md](../design-language/colour-usage.md#links-vs-buttons--the-accessible-blue).
|
|
122
|
+
This value is deliberately just under the 4.5:1 AA threshold (4.34:1 on white, ≈97%) to stay close
|
|
123
|
+
to EE Blue, pending validation in real link contexts; a strict-AA fallback (`#007cb9`, 4.58:1)
|
|
124
|
+
exists if that validation doesn't hold.
|
|
125
|
+
|
|
102
126
|
### Charts and Data Visualisation
|
|
103
127
|
|
|
104
128
|
- Use patterns or textures in addition to colours
|
|
105
|
-
- Ensure adjacent colours have sufficient contrast
|
|
129
|
+
- Ensure adjacent colours have sufficient contrast (3:1 minimum, WCAG 1.4.11)
|
|
130
|
+
- Never place EE Blue and Transform Teal adjacent — near-identical lightness (1.01:1)
|
|
106
131
|
- Provide data tables as alternatives to charts
|
|
132
|
+
- Full CVD rules and the categorical sequence: [colours.md](../design-language/colours.md#data-visualisation--categorical-order)
|
|
107
133
|
|
|
108
134
|
---
|
|
109
135
|
|
|
@@ -0,0 +1,107 @@
|
|
|
1
|
+
# Colour Usage
|
|
2
|
+
|
|
3
|
+
Tier, pairing, and role rules for the Equal Experts palette. This is the prose companion to
|
|
4
|
+
[colours.md](./colours.md) (generated — the token-derived swatches and values live there); this
|
|
5
|
+
file states the rules that govern *when* each tier applies. See
|
|
6
|
+
[accessibility.md](../accessibility/accessibility.md) for contrast targets and the never-colour-alone
|
|
7
|
+
rule, and each medium's own reference (`media-types/<medium>/`) for how a tier applies there.
|
|
8
|
+
|
|
9
|
+
Source: the June 2026 Nick Orme / Ed Ford colours lockdown.
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## The tier model
|
|
14
|
+
|
|
15
|
+
Colour is governed by **what it is allowed to do**, not by which palette it belongs to.
|
|
16
|
+
|
|
17
|
+
| Tier | Contents | Where |
|
|
18
|
+
|------|----------|-------|
|
|
19
|
+
| **Tier 1 — Core** | The four brand hues (EE Blue, Transform Teal, Tech Blue, Equal Ember) + neutrals (Dark Data, The Cloud, Byte White) | Default for almost everything: product UI, adverts, the body of most slide decks |
|
|
20
|
+
| **Tier 2 — Extended accents** | The ten extended-palette colours | Exception only: small pull-out highlights, keyed diagrams, illustration accents. Capped at roughly 5–10% of a page's area |
|
|
21
|
+
| **Tier 3 — Data encoding** | The `categorical-1…8` sequence | Charts and data visualisation only |
|
|
22
|
+
| **Semantic / RAG** | `error`, `warning`, `success`, `info`, `link`, `interaction-state` | Cross-cutting — sits above all tiers, may appear in any scenario, reserved for meaning and never reused decoratively |
|
|
23
|
+
|
|
24
|
+
Core is what almost everyone should use almost all the time. The extended colours exist for
|
|
25
|
+
defined situations, used sparingly — flooding a layout with them reads as a different brand.
|
|
26
|
+
|
|
27
|
+
---
|
|
28
|
+
|
|
29
|
+
## Background floods
|
|
30
|
+
|
|
31
|
+
Full-page background floods are restricted to **Dark Data** or **Tech Blue** (or light greys /
|
|
32
|
+
The Cloud). **EE Blue, Transform Teal, and Equal Ember are not full-page fills** — they are
|
|
33
|
+
block/component-level backgrounds and accent/CTA colours only. A full-page EE Blue background is
|
|
34
|
+
too bright and swallows CTAs; the same logic applies to Transform Teal and Equal Ember.
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## The three-stage blue
|
|
39
|
+
|
|
40
|
+
The blue family forms a deliberate three-step ramp:
|
|
41
|
+
|
|
42
|
+
**Tech Blue** (dark) → **EE Blue** (mid) → **Edge Blue** (light).
|
|
43
|
+
|
|
44
|
+
Edge Blue is the light end, brought in specifically for hover/active interaction states — it has
|
|
45
|
+
a defined product-UI role, not just decoration.
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## Adjacency and pairing rules
|
|
50
|
+
|
|
51
|
+
- **Never place EE Blue and Transform Teal adjacent** in a categorical sequence, fill, or chart.
|
|
52
|
+
They share near-identical lightness (1.01:1 contrast) — indistinguishable in greyscale and for
|
|
53
|
+
many colour-vision-deficient viewers. Use one or the other per chart, not both.
|
|
54
|
+
- **The Fruity combination is decoration-only.** Runtime Red, Cursor Coral, Uptime Green, Logic
|
|
55
|
+
Lime, Signal Yellow, and Patch Peach together collapse under protanopia (Runtime Red and Uptime
|
|
56
|
+
Green become indistinguishable). Never use Fruity to encode data, status, or categories.
|
|
57
|
+
- **White text on Equal Ember fails** (2.8:1) — Equal Ember always takes Dark Data text.
|
|
58
|
+
- Dark-surface extended colours (Index Indigo, Packet Plum, Runtime Red, Uptime Green, Server
|
|
59
|
+
Slate) take white text; bright-surface extended colours (Logic Lime, Edge Blue, Signal Yellow,
|
|
60
|
+
Cursor Coral, Patch Peach) take Dark Data text — see [colours.md](./colours.md#pairing-summary)
|
|
61
|
+
for the generated pairing table.
|
|
62
|
+
|
|
63
|
+
---
|
|
64
|
+
|
|
65
|
+
## Server Slate vs the EE neutral scale
|
|
66
|
+
|
|
67
|
+
Server Slate is a distinct **brand grey** (a peer of the other extended colours, its own 50–950
|
|
68
|
+
scale). The EE neutral scale (Byte White → Dark Data) is a separate **UI neutral** scale for
|
|
69
|
+
surfaces, borders, and text. The two are kept apart because they serve different jobs: Server
|
|
70
|
+
Slate carries brand identity in a near-neutral tone; the neutral scale is the plain structural
|
|
71
|
+
scale product UI is built on.
|
|
72
|
+
|
|
73
|
+
---
|
|
74
|
+
|
|
75
|
+
## Links vs buttons — the accessible blue
|
|
76
|
+
|
|
77
|
+
EE Blue (`#1795d4`) fails body-text contrast (3.3:1 on white) but is retained for buttons, icons,
|
|
78
|
+
and larger CTAs, where it remains iconic and visually acceptable. Text links and small text use
|
|
79
|
+
the semantic `link` token instead (`#0080be`), a darkened EE Blue that keeps close to the brand
|
|
80
|
+
hue.
|
|
81
|
+
|
|
82
|
+
**The `link` value is WIP.** It is set deliberately just under the 4.5:1 AA threshold (4.34:1 on
|
|
83
|
+
white, ≈97%) to stay as close to EE Blue as possible — a brand-fidelity-over-strict-compliance
|
|
84
|
+
call, pending validation in real link contexts. A strict-AA fallback (`#007cb9`, 4.58:1) exists if
|
|
85
|
+
that validation doesn't hold up. Don't hard-code the current hex in a consuming app; reference the
|
|
86
|
+
`link` token so the value can move without a second migration.
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
## Named combinations
|
|
91
|
+
|
|
92
|
+
Brand groups colours into five named combinations — **Core, Data, Digital, Fruity, Ocean** — used
|
|
93
|
+
as mood/theme groupings for marketing and slide decks (Ocean reads cool/corporate, Fruity reads
|
|
94
|
+
energetic, and so on). These are theme palettes, not data-series orders: for charts, use the
|
|
95
|
+
Tier 3 categorical sequence in [colours.md](./colours.md), not a named combination. Fruity in
|
|
96
|
+
particular must never encode data (see above).
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
100
|
+
## Related
|
|
101
|
+
|
|
102
|
+
- [colours.md](./colours.md) — generated token values: brand colours, the extended palette, the
|
|
103
|
+
neutral scale, semantic roles, and the data-viz categorical order.
|
|
104
|
+
- [accessibility.md](../accessibility/accessibility.md) — contrast targets and the
|
|
105
|
+
never-colour-alone rule.
|
|
106
|
+
- `media-types/<medium>/` — how a tier applies in web product, web marketing, charts, slides, and
|
|
107
|
+
imagery.
|
|
@@ -88,24 +88,99 @@ How the brand palettes map to semantic roles in kuat-core `variables.css`. **Use
|
|
|
88
88
|
| `--foreground` (`--brand-dark-data`) | text dark | `#212526` |
|
|
89
89
|
| `--background` (`--brand-byte-white`) | white | `#ffffff` |
|
|
90
90
|
| `--muted` (`--brand-the-cloud`) | Slate 100 | `#f5f5f5` |
|
|
91
|
-
| `--destructive` | Red 600 | `#
|
|
91
|
+
| `--destructive` | Runtime Red 600 | `#a3152b` |
|
|
92
92
|
|
|
93
93
|
Support scales (slate, red, indigo) back these aliases but are **not brand colours** — never use them directly as a brand colour.
|
|
94
94
|
|
|
95
95
|
---
|
|
96
96
|
|
|
97
|
-
##
|
|
97
|
+
## Extended Palette (exception-only)
|
|
98
|
+
|
|
99
|
+
Added in the June 2026 colours lockdown. **Core is primary; extended is exception-only** — see
|
|
100
|
+
[colour-usage.md](./colour-usage.md) for the tier model (data viz, keyed diagrams, small pull-outs).
|
|
101
|
+
Each is a flat peer scale (50–950), anchored at its measured lightness step, not forced to 500.
|
|
102
|
+
|
|
103
|
+
| Colour | Role | Value | Text on it |
|
|
104
|
+
|--------|------|-------|------------|
|
|
105
|
+
| Index Indigo | Info / call-out | `#352361` (step 800) | White |
|
|
106
|
+
| Packet Plum | Expressive accent / dark surface | `#853d7b` (step 600) | White |
|
|
107
|
+
| Runtime Red | Error / danger | `#a3152b` (step 600) | White |
|
|
108
|
+
| Uptime Green | Success | `#11821b` (step 500) | White |
|
|
109
|
+
| Server Slate | Near-neutral brand grey (distinct from the EE neutral scale) | `#4c5659` (step 600) | White |
|
|
110
|
+
| Logic Lime | Bright pull-out accent · display alias "Lime" | `#b1d923` (step 300) | Dark Data |
|
|
111
|
+
| Edge Blue | Hover/active state — light end of the 3-stage blue | `#a1c8e2` (step 200) | Dark Data |
|
|
112
|
+
| Signal Yellow | Bright pull-out accent · display alias "Sunflower" | `#ffd930` (step 300) | Dark Data |
|
|
113
|
+
| Cursor Coral | Decorative pull-out (not error) | `#ff5c5c` (step 400) | Dark Data |
|
|
114
|
+
| Patch Peach | Light warm pull-out accent | `#fca84e` (step 300) | Dark Data |
|
|
98
115
|
|
|
99
|
-
|
|
116
|
+
---
|
|
100
117
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
|
106
|
-
|
|
107
|
-
|
|
|
108
|
-
|
|
|
118
|
+
## EE Neutral Scale
|
|
119
|
+
|
|
120
|
+
Monotonic Byte White → Dark Data, distinct from Server Slate (a brand grey, not a UI neutral):
|
|
121
|
+
|
|
122
|
+
| Step | Value | Alias |
|
|
123
|
+
|------|-------|-------|
|
|
124
|
+
| 50 | `#ffffff` | **Byte White** |
|
|
125
|
+
| 100 | `#f5f5f5` | **The Cloud** |
|
|
126
|
+
| 200 | `#dbdbdb` | |
|
|
127
|
+
| 300 | `#c1c2c2` | |
|
|
128
|
+
| 400 | `#a7a9a9` | |
|
|
129
|
+
| 500 | `#8f9192` | |
|
|
130
|
+
| 600 | `#777a7a` | **Overcast** |
|
|
131
|
+
| 700 | `#606364` | |
|
|
132
|
+
| 800 | `#4a4d4e` | |
|
|
133
|
+
| 900 | `#35393a` | |
|
|
134
|
+
| 950 | `#212526` | **Dark Data** |
|
|
135
|
+
|
|
136
|
+
---
|
|
137
|
+
|
|
138
|
+
## Semantic / RAG Colours
|
|
139
|
+
|
|
140
|
+
Cross-cutting roles that mean a *specific thing* and may appear in any scenario — reserved for
|
|
141
|
+
meaning, never reused decoratively. Always pair with an icon/shape/label (WCAG 1.4.1 — never
|
|
142
|
+
colour alone).
|
|
143
|
+
|
|
144
|
+
| Role | Value | Required text | Notes |
|
|
145
|
+
|------|-------|----------------|-------|
|
|
146
|
+
| Error / danger | `#a3152b` | White | 7.8:1 AAA · replaces support #dc2626 |
|
|
147
|
+
| Warning | `#f07c00` | Dark Data | 5.6:1 AA · white text FAILS (2.8:1) |
|
|
148
|
+
| Success | `#11821b` | White | 5.0:1 AA |
|
|
149
|
+
| Info / call-out | `#352361` | White | 13.4:1 AAA |
|
|
150
|
+
| Text link / small text | `#0080be` | is the text | WIP — ~97% of AA on white (4.34:1), deliberately close to EE Blue; strict-AA fallback #007cb9 |
|
|
151
|
+
| Interaction state (hover/active) | `#a1c8e2` | Dark Data | 8.8:1 AAA |
|
|
152
|
+
| Error, on dark surfaces | `#d98786` | — | lighter step for on-dark text |
|
|
153
|
+
| Success, on dark surfaces | `#72b070` | — | lighter step for on-dark text |
|
|
154
|
+
| Info, on dark surfaces | `#a49ec1` | — | lighter step for on-dark text |
|
|
155
|
+
|
|
156
|
+
---
|
|
157
|
+
|
|
158
|
+
## Data Visualisation — Categorical Order
|
|
159
|
+
|
|
160
|
+
Tier 3 sequence for charts/data viz only. Use in order; stop when there are enough categories.
|
|
161
|
+
CVD-checked, lightness-separated. Never place EE Blue and Transform Teal adjacent.
|
|
162
|
+
|
|
163
|
+
1. **EE Blue** `#1795d4`
|
|
164
|
+
2. **Equal Ember** `#f07c00`
|
|
165
|
+
3. **Tech Blue** `#22567c`
|
|
166
|
+
4. **Logic Lime** `#b1d923`
|
|
167
|
+
5. **Packet Plum** `#853d7b`
|
|
168
|
+
6. **Edge Blue** `#a1c8e2`
|
|
169
|
+
7. **Runtime Red** `#a3152b`
|
|
170
|
+
8. **Signal Yellow** `#ffd930`
|
|
171
|
+
|
|
172
|
+
---
|
|
173
|
+
|
|
174
|
+
## Pairing Summary
|
|
175
|
+
|
|
176
|
+
**Dark surfaces (white text):** Index Indigo, Packet Plum, Runtime Red, Uptime Green, Server Slate, Dark Data.
|
|
177
|
+
|
|
178
|
+
**Bright surfaces (Dark Data text):** Logic Lime, Edge Blue, Signal Yellow, Cursor Coral, Patch Peach, EE Blue, Transform Teal, Equal Ember.
|
|
179
|
+
|
|
180
|
+
**Do not pair:**
|
|
181
|
+
- EE Blue `#1795d4` and Transform Teal `#269c9e` adjacent in a categorical sequence — 1.01:1 luminance, indistinguishable in greyscale/CVD.
|
|
182
|
+
- The Fruity combination (Runtime Red, Cursor Coral, Uptime Green, Logic Lime, Signal Yellow, Patch Peach) for any data encoding — collapses under protanopia. Decoration only.
|
|
183
|
+
- White text on Equal Ember `#f07c00` — fails at 2.8:1; use Dark Data.
|
|
109
184
|
|
|
110
185
|
---
|
|
111
186
|
|
package/agent-docs/external/kuat-agent-rules/reference/design-language/tokens/colors.tokens.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://tr.designtokens.org/format/",
|
|
3
|
-
"$description": "Equal Experts brand COLOUR tokens — the SINGLE SOURCE OF TRUTH (upstream, in kuat-agent-rules). Downstream artifacts are GENERATED from this file: reference/design-language/colours.md (human-readable) and @equal-experts/kuat-core src/variables.css (CSS). Never hand-edit those; change colours HERE. kuat-core is downstream — do not invert. Support scales (slate/red/indigo) are NOT brand colours and live only in kuat-core. Format: W3C Design Tokens; $value is hex, oklch preserved in $extensions.",
|
|
3
|
+
"$description": "Equal Experts brand COLOUR tokens — the SINGLE SOURCE OF TRUTH (upstream, in kuat-agent-rules). Downstream artifacts are GENERATED from this file: reference/design-language/colours.md (human-readable) and @equal-experts/kuat-core src/variables.css (CSS). Never hand-edit those; change colours HERE. kuat-core is downstream — do not invert. Support scales (slate/red/indigo) are NOT brand colours and live only in kuat-core. Format: W3C Design Tokens; $value is hex, oklch preserved in $extensions. Extended palette + neutral scale + semantic layer added per the June 2026 colours lockdown (extended-palette-review.md) — accessible link blue is WIP, flagged in its own $description.",
|
|
4
4
|
"color": {
|
|
5
5
|
"ee-blue": {
|
|
6
6
|
"$description": "EE Blue — primary brand colour (trust, technology). Scale 50 (light) → 950 (dark).",
|
|
@@ -57,6 +57,160 @@
|
|
|
57
57
|
"800": { "$type": "color", "$value": "#603100", "$extensions": { "oklch": "oklch(0.325 0.140 65.0)" } },
|
|
58
58
|
"900": { "$type": "color", "$value": "#301900", "$extensions": { "oklch": "oklch(0.225 0.120 65.0)" } },
|
|
59
59
|
"950": { "$type": "color", "$value": "#180c00", "$extensions": { "oklch": "oklch(0.125 0.100 65.0)" } }
|
|
60
|
+
},
|
|
61
|
+
"index-indigo": {
|
|
62
|
+
"$description": "Index Indigo — info/call-out (white text). Extended palette (2026-06-29 colours lockdown). Scale 50 (light) → 950 (dark), anchored at 800 (measured lightness) — not forced to 500.",
|
|
63
|
+
"50": { "$type": "color", "$value": "#f0eefb", "$extensions": { "oklch": "oklch(0.955 0.018 292.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--index-indigo-50)" } } },
|
|
64
|
+
"100": { "$type": "color", "$value": "#d6d3e8", "$extensions": { "oklch": "oklch(0.875 0.029 292.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--index-indigo-100)" } } },
|
|
65
|
+
"200": { "$type": "color", "$value": "#bcb8d4", "$extensions": { "oklch": "oklch(0.795 0.040 292.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--index-indigo-200)" } } },
|
|
66
|
+
"300": { "$type": "color", "$value": "#a49ec1", "$extensions": { "oklch": "oklch(0.715 0.051 292.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--index-indigo-300)" } } },
|
|
67
|
+
"400": { "$type": "color", "$value": "#8b84ad", "$extensions": { "oklch": "oklch(0.635 0.061 292.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--index-indigo-400)" } } },
|
|
68
|
+
"500": { "$type": "color", "$value": "#746b9a", "$extensions": { "oklch": "oklch(0.555 0.072 292.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--index-indigo-500)" } } },
|
|
69
|
+
"600": { "$type": "color", "$value": "#5e5387", "$extensions": { "oklch": "oklch(0.475 0.083 292.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--index-indigo-600)" } } },
|
|
70
|
+
"700": { "$type": "color", "$value": "#493b74", "$extensions": { "oklch": "oklch(0.395 0.094 292.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--index-indigo-700)" } } },
|
|
71
|
+
"800": { "$type": "color", "$value": "#352361", "$extensions": { "oklch": "oklch(0.315 0.105 292.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--index-indigo-800)" } } },
|
|
72
|
+
"900": { "$type": "color", "$value": "#1d1338", "$extensions": { "oklch": "oklch(0.223 0.070 292.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--index-indigo-900)" } } },
|
|
73
|
+
"950": { "$type": "color", "$value": "#080514", "$extensions": { "oklch": "oklch(0.130 0.036 292.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--index-indigo-950)" } } }
|
|
74
|
+
},
|
|
75
|
+
"packet-plum": {
|
|
76
|
+
"$description": "Packet Plum — expressive accent / dark surface (white text). Extended palette. Scale 50 (light) → 950 (dark), anchored at 600 (measured lightness).",
|
|
77
|
+
"50": { "$type": "color", "$value": "#faebf6", "$extensions": { "oklch": "oklch(0.955 0.022 332.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--packet-plum-50)" } } },
|
|
78
|
+
"100": { "$type": "color", "$value": "#e7cde1", "$extensions": { "oklch": "oklch(0.875 0.039 332.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--packet-plum-100)" } } },
|
|
79
|
+
"200": { "$type": "color", "$value": "#d3afcc", "$extensions": { "oklch": "oklch(0.796 0.057 332.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--packet-plum-200)" } } },
|
|
80
|
+
"300": { "$type": "color", "$value": "#c092b8", "$extensions": { "oklch": "oklch(0.716 0.074 332.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--packet-plum-300)" } } },
|
|
81
|
+
"400": { "$type": "color", "$value": "#ad76a3", "$extensions": { "oklch": "oklch(0.636 0.092 332.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--packet-plum-400)" } } },
|
|
82
|
+
"500": { "$type": "color", "$value": "#995a8f", "$extensions": { "oklch": "oklch(0.557 0.109 332.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--packet-plum-500)" } } },
|
|
83
|
+
"600": { "$type": "color", "$value": "#853d7b", "$extensions": { "oklch": "oklch(0.477 0.127 332.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--packet-plum-600)" } } },
|
|
84
|
+
"700": { "$type": "color", "$value": "#652c5d", "$extensions": { "oklch": "oklch(0.390 0.106 332.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--packet-plum-700)" } } },
|
|
85
|
+
"800": { "$type": "color", "$value": "#471b41", "$extensions": { "oklch": "oklch(0.303 0.085 332.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--packet-plum-800)" } } },
|
|
86
|
+
"900": { "$type": "color", "$value": "#2a0c26", "$extensions": { "oklch": "oklch(0.217 0.064 332.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--packet-plum-900)" } } },
|
|
87
|
+
"950": { "$type": "color", "$value": "#11020e", "$extensions": { "oklch": "oklch(0.130 0.043 332.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--packet-plum-950)" } } }
|
|
88
|
+
},
|
|
89
|
+
"runtime-red": {
|
|
90
|
+
"$description": "Runtime Red — error/danger (white text); replaces support-scale #dc2626. Extended palette. Scale 50 (light) → 950 (dark), anchored at 600 (measured lightness).",
|
|
91
|
+
"50": { "$type": "color", "$value": "#ffebea", "$extensions": { "oklch": "oklch(0.955 0.022 20.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--runtime-red-50)" } } },
|
|
92
|
+
"100": { "$type": "color", "$value": "#f7c8c6", "$extensions": { "oklch": "oklch(0.873 0.053 20.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--runtime-red-100)" } } },
|
|
93
|
+
"200": { "$type": "color", "$value": "#e8a7a6", "$extensions": { "oklch": "oklch(0.790 0.077 20.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--runtime-red-200)" } } },
|
|
94
|
+
"300": { "$type": "color", "$value": "#d98786", "$extensions": { "oklch": "oklch(0.708 0.101 20.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--runtime-red-300)" } } },
|
|
95
|
+
"400": { "$type": "color", "$value": "#c86667", "$extensions": { "oklch": "oklch(0.626 0.125 20.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--runtime-red-400)" } } },
|
|
96
|
+
"500": { "$type": "color", "$value": "#b64349", "$extensions": { "oklch": "oklch(0.543 0.149 20.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--runtime-red-500)" } } },
|
|
97
|
+
"600": { "$type": "color", "$value": "#a3152b", "$extensions": { "oklch": "oklch(0.461 0.173 20.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--runtime-red-600)" } } },
|
|
98
|
+
"700": { "$type": "color", "$value": "#7d0a1e", "$extensions": { "oklch": "oklch(0.378 0.144 20.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--runtime-red-700)" } } },
|
|
99
|
+
"800": { "$type": "color", "$value": "#590211", "$extensions": { "oklch": "oklch(0.295 0.116 20.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--runtime-red-800)" } } },
|
|
100
|
+
"900": { "$type": "color", "$value": "#370006", "$extensions": { "oklch": "oklch(0.213 0.086 20.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--runtime-red-900)" } } },
|
|
101
|
+
"950": { "$type": "color", "$value": "#180001", "$extensions": { "oklch": "oklch(0.130 0.054 20.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--runtime-red-950)" } } }
|
|
102
|
+
},
|
|
103
|
+
"uptime-green": {
|
|
104
|
+
"$description": "Uptime Green — success (white text). Extended palette. Scale 50 (light) → 950 (dark), anchored at 500 (measured lightness — this one lands naturally at 500).",
|
|
105
|
+
"50": { "$type": "color", "$value": "#e5f5e4", "$extensions": { "oklch": "oklch(0.955 0.028 143.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--uptime-green-50)" } } },
|
|
106
|
+
"100": { "$type": "color", "$value": "#bfdebd", "$extensions": { "oklch": "oklch(0.870 0.056 143.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--uptime-green-100)" } } },
|
|
107
|
+
"200": { "$type": "color", "$value": "#99c797", "$extensions": { "oklch": "oklch(0.785 0.084 143.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--uptime-green-200)" } } },
|
|
108
|
+
"300": { "$type": "color", "$value": "#72b070", "$extensions": { "oklch": "oklch(0.699 0.112 143.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--uptime-green-300)" } } },
|
|
109
|
+
"400": { "$type": "color", "$value": "#4a9949", "$extensions": { "oklch": "oklch(0.614 0.139 143.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--uptime-green-400)" } } },
|
|
110
|
+
"500": { "$type": "color", "$value": "#11821b", "$extensions": { "oklch": "oklch(0.529 0.167 143.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--uptime-green-500)" } } },
|
|
111
|
+
"600": { "$type": "color", "$value": "#056810", "$extensions": { "oklch": "oklch(0.449 0.145 143.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--uptime-green-600)" } } },
|
|
112
|
+
"700": { "$type": "color", "$value": "#004f07", "$extensions": { "oklch": "oklch(0.369 0.122 143.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--uptime-green-700)" } } },
|
|
113
|
+
"800": { "$type": "color", "$value": "#003603", "$extensions": { "oklch": "oklch(0.290 0.095 143.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--uptime-green-800)" } } },
|
|
114
|
+
"900": { "$type": "color", "$value": "#002001", "$extensions": { "oklch": "oklch(0.210 0.070 143.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--uptime-green-900)" } } },
|
|
115
|
+
"950": { "$type": "color", "$value": "#000b00", "$extensions": { "oklch": "oklch(0.130 0.045 143.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--uptime-green-950)" } } }
|
|
116
|
+
},
|
|
117
|
+
"server-slate": {
|
|
118
|
+
"$description": "Server Slate — near-neutral brand grey (white text); kept distinct from the EE neutral scale (WS0.5: they serve different jobs). Extended palette. Scale 50 (light) → 950 (dark), anchored at 600 (measured lightness).",
|
|
119
|
+
"50": { "$type": "color", "$value": "#eef0f1", "$extensions": { "oklch": "oklch(0.955 0.002 217.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--server-slate-50)" } } },
|
|
120
|
+
"100": { "$type": "color", "$value": "#d1d5d6", "$extensions": { "oklch": "oklch(0.870 0.004 217.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--server-slate-100)" } } },
|
|
121
|
+
"200": { "$type": "color", "$value": "#b5babb", "$extensions": { "oklch": "oklch(0.785 0.006 217.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--server-slate-200)" } } },
|
|
122
|
+
"300": { "$type": "color", "$value": "#99a0a2", "$extensions": { "oklch": "oklch(0.700 0.008 217.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--server-slate-300)" } } },
|
|
123
|
+
"400": { "$type": "color", "$value": "#7e8689", "$extensions": { "oklch": "oklch(0.615 0.010 217.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--server-slate-400)" } } },
|
|
124
|
+
"500": { "$type": "color", "$value": "#646e70", "$extensions": { "oklch": "oklch(0.530 0.012 217.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--server-slate-500)" } } },
|
|
125
|
+
"600": { "$type": "color", "$value": "#4c5659", "$extensions": { "oklch": "oklch(0.445 0.014 217.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--server-slate-600)" } } },
|
|
126
|
+
"700": { "$type": "color", "$value": "#384043", "$extensions": { "oklch": "oklch(0.366 0.012 217.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--server-slate-700)" } } },
|
|
127
|
+
"800": { "$type": "color", "$value": "#262c2e", "$extensions": { "oklch": "oklch(0.287 0.009 217.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--server-slate-800)" } } },
|
|
128
|
+
"900": { "$type": "color", "$value": "#15191a", "$extensions": { "oklch": "oklch(0.209 0.007 217.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--server-slate-900)" } } },
|
|
129
|
+
"950": { "$type": "color", "$value": "#060808", "$extensions": { "oklch": "oklch(0.130 0.005 217.7)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--server-slate-950)" } } }
|
|
130
|
+
},
|
|
131
|
+
"logic-lime": {
|
|
132
|
+
"$description": "Logic Lime — bright pull-out accent (dark text); display alias \"Lime\". Extended palette. Scale 50 (light) → 950 (dark), anchored at 300 (measured lightness).",
|
|
133
|
+
"50": { "$type": "color", "$value": "#ecf4dc", "$extensions": { "oklch": "oklch(0.955 0.033 122.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--logic-lime-50)" } } },
|
|
134
|
+
"100": { "$type": "color", "$value": "#d8ecac", "$extensions": { "oklch": "oklch(0.912 0.086 122.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--logic-lime-100)" } } },
|
|
135
|
+
"200": { "$type": "color", "$value": "#c4e376", "$extensions": { "oklch": "oklch(0.870 0.140 122.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--logic-lime-200)" } } },
|
|
136
|
+
"300": { "$type": "color", "$value": "#b1d923", "$extensions": { "oklch": "oklch(0.827 0.193 122.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--logic-lime-300)" } } },
|
|
137
|
+
"400": { "$type": "color", "$value": "#94b70d", "$extensions": { "oklch": "oklch(0.727 0.175 122.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--logic-lime-400)" } } },
|
|
138
|
+
"500": { "$type": "color", "$value": "#799600", "$extensions": { "oklch": "oklch(0.628 0.153 122.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--logic-lime-500)" } } },
|
|
139
|
+
"600": { "$type": "color", "$value": "#5f7600", "$extensions": { "oklch": "oklch(0.528 0.129 122.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--logic-lime-600)" } } },
|
|
140
|
+
"700": { "$type": "color", "$value": "#465800", "$extensions": { "oklch": "oklch(0.429 0.105 122.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--logic-lime-700)" } } },
|
|
141
|
+
"800": { "$type": "color", "$value": "#2e3b00", "$extensions": { "oklch": "oklch(0.329 0.081 122.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--logic-lime-800)" } } },
|
|
142
|
+
"900": { "$type": "color", "$value": "#182100", "$extensions": { "oklch": "oklch(0.230 0.057 122.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--logic-lime-900)" } } },
|
|
143
|
+
"950": { "$type": "color", "$value": "#050900", "$extensions": { "oklch": "oklch(0.130 0.034 122.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--logic-lime-950)" } } }
|
|
144
|
+
},
|
|
145
|
+
"edge-blue": {
|
|
146
|
+
"$description": "Edge Blue — light end of the 3-stage blue (Tech Blue → EE Blue → Edge Blue); hover/active state (dark text). Extended palette. Scale 50 (light) → 950 (dark), anchored at 200 (measured lightness).",
|
|
147
|
+
"50": { "$type": "color", "$value": "#ebf1f6", "$extensions": { "oklch": "oklch(0.955 0.009 237.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--edge-blue-50)" } } },
|
|
148
|
+
"100": { "$type": "color", "$value": "#c6dcec", "$extensions": { "oklch": "oklch(0.884 0.032 237.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--edge-blue-100)" } } },
|
|
149
|
+
"200": { "$type": "color", "$value": "#a1c8e2", "$extensions": { "oklch": "oklch(0.813 0.055 237.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--edge-blue-200)" } } },
|
|
150
|
+
"300": { "$type": "color", "$value": "#8aacc3", "$extensions": { "oklch": "oklch(0.728 0.050 237.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--edge-blue-300)" } } },
|
|
151
|
+
"400": { "$type": "color", "$value": "#7391a6", "$extensions": { "oklch": "oklch(0.642 0.046 237.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--edge-blue-400)" } } },
|
|
152
|
+
"500": { "$type": "color", "$value": "#5d7889", "$extensions": { "oklch": "oklch(0.557 0.041 237.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--edge-blue-500)" } } },
|
|
153
|
+
"600": { "$type": "color", "$value": "#485f6e", "$extensions": { "oklch": "oklch(0.471 0.037 237.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--edge-blue-600)" } } },
|
|
154
|
+
"700": { "$type": "color", "$value": "#344753", "$extensions": { "oklch": "oklch(0.386 0.032 237.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--edge-blue-700)" } } },
|
|
155
|
+
"800": { "$type": "color", "$value": "#21303a", "$extensions": { "oklch": "oklch(0.301 0.028 237.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--edge-blue-800)" } } },
|
|
156
|
+
"900": { "$type": "color", "$value": "#0f1b23", "$extensions": { "oklch": "oklch(0.215 0.023 237.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--edge-blue-900)" } } },
|
|
157
|
+
"950": { "$type": "color", "$value": "#02080e", "$extensions": { "oklch": "oklch(0.130 0.019 237.6)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--edge-blue-950)" } } }
|
|
158
|
+
},
|
|
159
|
+
"signal-yellow": {
|
|
160
|
+
"$description": "Signal Yellow — bright pull-out accent (dark text); display alias \"Sunflower\"; NOT a status colour. Extended palette. Scale 50 (light) → 950 (dark), anchored at 300 (measured lightness).",
|
|
161
|
+
"50": { "$type": "color", "$value": "#f6f0db", "$extensions": { "oklch": "oklch(0.955 0.029 95.2)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--signal-yellow-50)" } } },
|
|
162
|
+
"100": { "$type": "color", "$value": "#f9eaae", "$extensions": { "oklch": "oklch(0.934 0.077 95.2)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--signal-yellow-100)" } } },
|
|
163
|
+
"200": { "$type": "color", "$value": "#fce27c", "$extensions": { "oklch": "oklch(0.913 0.125 95.2)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--signal-yellow-200)" } } },
|
|
164
|
+
"300": { "$type": "color", "$value": "#ffd930", "$extensions": { "oklch": "oklch(0.892 0.173 95.2)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--signal-yellow-300)" } } },
|
|
165
|
+
"400": { "$type": "color", "$value": "#d8b618", "$extensions": { "oklch": "oklch(0.783 0.157 95.2)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--signal-yellow-400)" } } },
|
|
166
|
+
"500": { "$type": "color", "$value": "#b19500", "$extensions": { "oklch": "oklch(0.674 0.139 95.2)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--signal-yellow-500)" } } },
|
|
167
|
+
"600": { "$type": "color", "$value": "#8b7400", "$extensions": { "oklch": "oklch(0.565 0.116 95.2)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--signal-yellow-600)" } } },
|
|
168
|
+
"700": { "$type": "color", "$value": "#675600", "$extensions": { "oklch": "oklch(0.457 0.094 95.2)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--signal-yellow-700)" } } },
|
|
169
|
+
"800": { "$type": "color", "$value": "#463900", "$extensions": { "oklch": "oklch(0.348 0.072 95.2)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--signal-yellow-800)" } } },
|
|
170
|
+
"900": { "$type": "color", "$value": "#261e00", "$extensions": { "oklch": "oklch(0.239 0.050 95.2)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--signal-yellow-900)" } } },
|
|
171
|
+
"950": { "$type": "color", "$value": "#0b0700", "$extensions": { "oklch": "oklch(0.130 0.028 95.2)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--signal-yellow-950)" } } }
|
|
172
|
+
},
|
|
173
|
+
"cursor-coral": {
|
|
174
|
+
"$description": "Cursor Coral — decorative pull-out (dark text); NOT error/destructive. Extended palette. Scale 50 (light) → 950 (dark), anchored at 400 (measured lightness).",
|
|
175
|
+
"50": { "$type": "color", "$value": "#ffebe9", "$extensions": { "oklch": "oklch(0.955 0.022 23.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--cursor-coral-50)" } } },
|
|
176
|
+
"100": { "$type": "color", "$value": "#ffccc8", "$extensions": { "oklch": "oklch(0.889 0.058 23.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--cursor-coral-100)" } } },
|
|
177
|
+
"200": { "$type": "color", "$value": "#ffaca6", "$extensions": { "oklch": "oklch(0.823 0.099 23.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--cursor-coral-200)" } } },
|
|
178
|
+
"300": { "$type": "color", "$value": "#ff8882", "$extensions": { "oklch": "oklch(0.757 0.145 23.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--cursor-coral-300)" } } },
|
|
179
|
+
"400": { "$type": "color", "$value": "#ff5c5c", "$extensions": { "oklch": "oklch(0.691 0.199 23.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--cursor-coral-400)" } } },
|
|
180
|
+
"500": { "$type": "color", "$value": "#d44849", "$extensions": { "oklch": "oklch(0.597 0.177 23.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--cursor-coral-500)" } } },
|
|
181
|
+
"600": { "$type": "color", "$value": "#ab3436", "$extensions": { "oklch": "oklch(0.504 0.155 23.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--cursor-coral-600)" } } },
|
|
182
|
+
"700": { "$type": "color", "$value": "#842124", "$extensions": { "oklch": "oklch(0.410 0.133 23.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--cursor-coral-700)" } } },
|
|
183
|
+
"800": { "$type": "color", "$value": "#5e0f13", "$extensions": { "oklch": "oklch(0.317 0.111 23.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--cursor-coral-800)" } } },
|
|
184
|
+
"900": { "$type": "color", "$value": "#3b0005", "$extensions": { "oklch": "oklch(0.223 0.090 23.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--cursor-coral-900)" } } },
|
|
185
|
+
"950": { "$type": "color", "$value": "#180001", "$extensions": { "oklch": "oklch(0.130 0.055 23.9)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--cursor-coral-950)" } } }
|
|
186
|
+
},
|
|
187
|
+
"patch-peach": {
|
|
188
|
+
"$description": "Patch Peach — light warm pull-out accent (dark text). Extended palette. Scale 50 (light) → 950 (dark), anchored at 300 (measured lightness).",
|
|
189
|
+
"50": { "$type": "color", "$value": "#fcede0", "$extensions": { "oklch": "oklch(0.955 0.024 64.8)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--patch-peach-50)" } } },
|
|
190
|
+
"100": { "$type": "color", "$value": "#fed7b3", "$extensions": { "oklch": "oklch(0.903 0.064 64.8)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--patch-peach-100)" } } },
|
|
191
|
+
"200": { "$type": "color", "$value": "#fec084", "$extensions": { "oklch": "oklch(0.850 0.104 64.8)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--patch-peach-200)" } } },
|
|
192
|
+
"300": { "$type": "color", "$value": "#fca84e", "$extensions": { "oklch": "oklch(0.798 0.144 64.8)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--patch-peach-300)" } } },
|
|
193
|
+
"400": { "$type": "color", "$value": "#d68c3c", "$extensions": { "oklch": "oklch(0.703 0.130 64.8)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--patch-peach-400)" } } },
|
|
194
|
+
"500": { "$type": "color", "$value": "#b2722a", "$extensions": { "oklch": "oklch(0.607 0.117 64.8)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--patch-peach-500)" } } },
|
|
195
|
+
"600": { "$type": "color", "$value": "#8f5819", "$extensions": { "oklch": "oklch(0.512 0.103 64.8)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--patch-peach-600)" } } },
|
|
196
|
+
"700": { "$type": "color", "$value": "#6d4007", "$extensions": { "oklch": "oklch(0.416 0.090 64.8)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--patch-peach-700)" } } },
|
|
197
|
+
"800": { "$type": "color", "$value": "#4c2a00", "$extensions": { "oklch": "oklch(0.321 0.072 64.8)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--patch-peach-800)" } } },
|
|
198
|
+
"900": { "$type": "color", "$value": "#2c1600", "$extensions": { "oklch": "oklch(0.225 0.051 64.8)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--patch-peach-900)" } } },
|
|
199
|
+
"950": { "$type": "color", "$value": "#0f0500", "$extensions": { "oklch": "oklch(0.130 0.031 64.8)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--patch-peach-950)" } } }
|
|
200
|
+
},
|
|
201
|
+
"neutral": {
|
|
202
|
+
"$description": "EE neutral scale — monotonic Byte White (50) → Dark Data (950). Distinct from Server Slate (a brand grey, not a UI neutral). Aliased at 50/100/600/950 (see brand.byte-white / brand.the-cloud / brand.overcast / brand.dark-data).",
|
|
203
|
+
"50": { "$type": "color", "$value": "#ffffff", "$extensions": { "oklch": "oklch(1.000 0.0000 214.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--neutral-50)" } } },
|
|
204
|
+
"100": { "$type": "color", "$value": "#f5f5f5", "$extensions": { "oklch": "oklch(0.970 0.0000 214.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--neutral-100)" } } },
|
|
205
|
+
"200": { "$type": "color", "$value": "#dbdbdb", "$extensions": { "oklch": "oklch(0.891 0.0007 214.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--neutral-200)" } } },
|
|
206
|
+
"300": { "$type": "color", "$value": "#c1c2c2", "$extensions": { "oklch": "oklch(0.813 0.0014 214.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--neutral-300)" } } },
|
|
207
|
+
"400": { "$type": "color", "$value": "#a7a9a9", "$extensions": { "oklch": "oklch(0.734 0.0020 214.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--neutral-400)" } } },
|
|
208
|
+
"500": { "$type": "color", "$value": "#8f9192", "$extensions": { "oklch": "oklch(0.655 0.0027 214.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--neutral-500)" } } },
|
|
209
|
+
"600": { "$type": "color", "$value": "#777a7a", "$extensions": { "oklch": "oklch(0.576 0.0034 214.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--neutral-600)" } } },
|
|
210
|
+
"700": { "$type": "color", "$value": "#606364", "$extensions": { "oklch": "oklch(0.497 0.0041 214.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--neutral-700)" } } },
|
|
211
|
+
"800": { "$type": "color", "$value": "#4a4d4e", "$extensions": { "oklch": "oklch(0.418 0.0047 214.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--neutral-800)" } } },
|
|
212
|
+
"900": { "$type": "color", "$value": "#35393a", "$extensions": { "oklch": "oklch(0.340 0.0054 214.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--neutral-900)" } } },
|
|
213
|
+
"950": { "$type": "color", "$value": "#212526", "$extensions": { "oklch": "oklch(0.261 0.0061 214.4)", "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--neutral-950)" } } }
|
|
60
214
|
}
|
|
61
215
|
},
|
|
62
216
|
"brand": {
|
|
@@ -66,9 +220,20 @@
|
|
|
66
220
|
"transform-teal": { "$type": "color", "$value": "{color.transform-teal.500}" },
|
|
67
221
|
"equal-ember": { "$type": "color", "$value": "{color.equal-ember.500}" },
|
|
68
222
|
"ee-blue-accent": { "$type": "color", "$value": "{color.ee-blue.50}" },
|
|
69
|
-
"dark-data": { "$type": "color", "$value": "
|
|
70
|
-
"the-cloud": { "$type": "color", "$value": "
|
|
71
|
-
"byte-white": { "$type": "color", "$value": "#ffffff" }
|
|
223
|
+
"dark-data": { "$type": "color", "$value": "{color.neutral.950}", "$description": "Primary text dark. Now aliased into the EE neutral scale (was a raw hex; value unchanged, #212526)." },
|
|
224
|
+
"the-cloud": { "$type": "color", "$value": "{color.neutral.100}", "$description": "Light surface. Now aliased into the EE neutral scale (was a raw hex; value unchanged, #f5f5f5)." },
|
|
225
|
+
"byte-white": { "$type": "color", "$value": "{color.neutral.50}", "$description": "Now aliased into the EE neutral scale (was a raw hex; value unchanged, #ffffff)." },
|
|
226
|
+
"overcast": { "$type": "color", "$value": "{color.neutral.600}", "$description": "Mid neutral grey — the fourth named EE neutral point (WS0.1).", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--neutral-600)" } } },
|
|
227
|
+
"index-indigo": { "$type": "color", "$value": "{color.index-indigo.800}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--index-indigo-800)" } } },
|
|
228
|
+
"packet-plum": { "$type": "color", "$value": "{color.packet-plum.600}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--packet-plum-600)" } } },
|
|
229
|
+
"runtime-red": { "$type": "color", "$value": "{color.runtime-red.600}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--runtime-red-600)" } } },
|
|
230
|
+
"uptime-green": { "$type": "color", "$value": "{color.uptime-green.500}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--uptime-green-500)" } } },
|
|
231
|
+
"server-slate": { "$type": "color", "$value": "{color.server-slate.600}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--server-slate-600)" } } },
|
|
232
|
+
"logic-lime": { "$type": "color", "$value": "{color.logic-lime.300}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--logic-lime-300)" } } },
|
|
233
|
+
"edge-blue": { "$type": "color", "$value": "{color.edge-blue.200}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--edge-blue-200)" } } },
|
|
234
|
+
"signal-yellow": { "$type": "color", "$value": "{color.signal-yellow.300}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--signal-yellow-300)" } } },
|
|
235
|
+
"cursor-coral": { "$type": "color", "$value": "{color.cursor-coral.400}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--cursor-coral-400)" } } },
|
|
236
|
+
"patch-peach": { "$type": "color", "$value": "{color.patch-peach.300}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--patch-peach-300)" } } }
|
|
72
237
|
},
|
|
73
238
|
"alias": {
|
|
74
239
|
"$description": "Semantic role → brand mapping (mirrors kuat-core ee-light). Support-scale-backed roles (muted/border/ring/destructive) resolve to non-brand scales in kuat-core and are intentionally omitted here except destructive.",
|
|
@@ -79,6 +244,29 @@
|
|
|
79
244
|
"foreground": { "$type": "color", "$value": "{brand.dark-data}" },
|
|
80
245
|
"background": { "$type": "color", "$value": "{brand.byte-white}" },
|
|
81
246
|
"muted": { "$type": "color", "$value": "{brand.the-cloud}" },
|
|
82
|
-
"destructive": { "$type": "color", "$value": "
|
|
247
|
+
"destructive": { "$type": "color", "$value": "{brand.runtime-red}", "$description": "Runtime Red #a3152b — replaces support-scale #dc2626 per the June 2026 colours lockdown (WS0.3)." }
|
|
248
|
+
},
|
|
249
|
+
"semantic": {
|
|
250
|
+
"$description": "Cross-cutting semantic / RAG roles (sit above the tiers — see reference/design-language/colour-usage.md). Never colour alone (WCAG 1.4.1): pair with icon/shape/label. Link is WIP — value may change pending validation in real link contexts.",
|
|
251
|
+
"error": { "$type": "color", "$value": "{brand.runtime-red}", "$description": "Error/danger. White text (7.8:1 AAA). Shape/label partner: ✕ / \"Error:\" + icon.", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], "codeSyntax": { "WEB": "var(--color-error)" } } },
|
|
252
|
+
"warning": { "$type": "color", "$value": "{brand.equal-ember}", "$description": "Warning (core Orange, not yellow). DARK DATA text required (5.6:1 AA) — white text fails (2.8:1). Shape/label partner: △ / \"Warning:\" + icon.", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], "codeSyntax": { "WEB": "var(--color-warning)" } } },
|
|
253
|
+
"success": { "$type": "color", "$value": "{brand.uptime-green}", "$description": "Success. White text (5.0:1 AA). Shape/label partner: ✓ / \"Success:\" + icon.", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], "codeSyntax": { "WEB": "var(--color-success)" } } },
|
|
254
|
+
"info": { "$type": "color", "$value": "{brand.index-indigo}", "$description": "Info/call-out. White text (13.4:1 AAA). Shape/label partner: ⓘ / \"Info:\" + icon.", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], "codeSyntax": { "WEB": "var(--color-info)" } } },
|
|
255
|
+
"link": { "$type": "color", "$value": "#0080be", "$description": "WIP — accessible EE Blue for text links/small text; EE Blue #1795d4 itself fails small-text contrast (3.3:1). Deliberately ~97% of AA on white (4.34:1) to stay close to EE Blue (ΔE≈7.5) — a brand-fidelity-over-strict-compliance call, flagged for validation in real link contexts. Strict-AA fallback: #007cb9 (4.58:1).", "$extensions": { "scopes": ["TEXT_FILL"], "codeSyntax": { "WEB": "var(--color-link)" } } },
|
|
256
|
+
"interaction-state": { "$type": "color", "$value": "{brand.edge-blue}", "$description": "Hover/active state — light end of the 3-stage blue. Dark Data text (8.8:1 AAA).", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], "codeSyntax": { "WEB": "var(--color-interaction-state)" } } },
|
|
257
|
+
"error-dark": { "$type": "color", "$value": "{color.runtime-red.300}", "$description": "On-dark-surface text variant of error (lighter step for legibility on dark backgrounds).", "$extensions": { "scopes": ["TEXT_FILL"], "codeSyntax": { "WEB": "var(--color-error-dark)" } } },
|
|
258
|
+
"success-dark": { "$type": "color", "$value": "{color.uptime-green.300}", "$description": "On-dark-surface text variant of success (lighter step for legibility on dark backgrounds).", "$extensions": { "scopes": ["TEXT_FILL"], "codeSyntax": { "WEB": "var(--color-success-dark)" } } },
|
|
259
|
+
"info-dark": { "$type": "color", "$value": "{color.index-indigo.300}", "$description": "On-dark-surface text variant of info (lighter step for legibility on dark backgrounds).", "$extensions": { "scopes": ["TEXT_FILL"], "codeSyntax": { "WEB": "var(--color-info-dark)" } } }
|
|
260
|
+
},
|
|
261
|
+
"data-viz": {
|
|
262
|
+
"$description": "Tier 3 categorical sequence for charts/data viz only — use in order, stop when there are enough categories. CVD-checked (deutan/protan/tritan), lightness-separated. NEVER place ee-blue and transform-teal adjacent (1.01:1 luminance — pick one per chart). Prefer these extended hues over raw core colours inside core-coloured UI so series stand apart from chrome.",
|
|
263
|
+
"categorical-1": { "$type": "color", "$value": "{brand.ee-blue}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL"], "codeSyntax": { "WEB": "var(--categorical-1)" } } },
|
|
264
|
+
"categorical-2": { "$type": "color", "$value": "{brand.equal-ember}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL"], "codeSyntax": { "WEB": "var(--categorical-2)" } } },
|
|
265
|
+
"categorical-3": { "$type": "color", "$value": "{brand.tech-blue}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL"], "codeSyntax": { "WEB": "var(--categorical-3)" } } },
|
|
266
|
+
"categorical-4": { "$type": "color", "$value": "{brand.logic-lime}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL"], "codeSyntax": { "WEB": "var(--categorical-4)" } } },
|
|
267
|
+
"categorical-5": { "$type": "color", "$value": "{brand.packet-plum}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL"], "codeSyntax": { "WEB": "var(--categorical-5)" } } },
|
|
268
|
+
"categorical-6": { "$type": "color", "$value": "{brand.edge-blue}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL"], "codeSyntax": { "WEB": "var(--categorical-6)" } } },
|
|
269
|
+
"categorical-7": { "$type": "color", "$value": "{brand.runtime-red}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL"], "codeSyntax": { "WEB": "var(--categorical-7)" } } },
|
|
270
|
+
"categorical-8": { "$type": "color", "$value": "{brand.signal-yellow}", "$extensions": { "scopes": ["FRAME_FILL", "SHAPE_FILL"], "codeSyntax": { "WEB": "var(--categorical-8)" } } }
|
|
83
271
|
}
|
|
84
272
|
}
|
package/agent-docs/external/kuat-agent-rules/reference/media-types/web-marketing/patterns/README.md
CHANGED
|
@@ -5,3 +5,9 @@ Applied layout and design patterns for marketing website page types.
|
|
|
5
5
|
| Pattern | For | Base layout |
|
|
6
6
|
|---------|-----|-------------|
|
|
7
7
|
| [marketing-pages.md](./marketing-pages.md) | Landing pages, pricing, features, case studies | Horizontal navigation |
|
|
8
|
+
|
|
9
|
+
> **Pattern model (later cut):** These patterns will adopt the
|
|
10
|
+
> [outcome-framed pattern model](../../../patterns/overview.md) in a later cut, splitting page types into
|
|
11
|
+
> individual patterns and linking shared concepts. The marketing case study will then implement the
|
|
12
|
+
> shared [describe a case study](../../../patterns/help-users/describe-a-case-study.md) concept. Existing
|
|
13
|
+
> files stay as-is for now.
|