jouw-stem__design-system 0.1.0 → 0.2.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/dist/css/theme-dark.css +78 -78
- package/dist/css/theme-light.css +888 -888
- package/dist/manifest.json +2 -2
- package/dist/scss/_tokens.scss +48 -48
- package/dist/token-refs.json +67 -67
- package/package.json +1 -1
- package/src/components/ButtonPrimary/ButtonPrimary.tokens.theme-light.json +8 -8
- package/tokens/themes/theme-dark/color.json +9 -9
- package/tokens/themes/theme-light/color.json +52 -52
|
@@ -1,90 +1,90 @@
|
|
|
1
1
|
{
|
|
2
|
-
"$comment": "Full semantic color set for the light theme. Palette
|
|
2
|
+
"$comment": "Full semantic color set for the light theme. Palette extracted from the 'Jouw Stem' design mockups (INPUT/0{1..6}-*.png in the jouw-stem website repo) on 2026-08-09 via pixel-histogram vision analysis. High-confidence flat-fill measurements: warm off-white canvas #faf8f5 (239k px, dominant across all six frames); deep petrol dark surface #041a26 (footer + CTA bands, 28k px); teal action fill measured at #097878 (hue 180, sat 0.92, val 0.47 on every primary button); tinted recessed band #eceeec (quote + offer panels); warm hairline border ~#e6e2dd. The measured action teal lands within 2% of the primitive teal.700 (#0f766e), so the whole interactive chain references the shared teal ramp rather than literal hex — that keeps button-primary compliant with tests/unit/state-palette-rules.spec.ts (same-ramp, monotonic steps) and survives a future rebrand. Surface, ink and feedback values stay literal: they are desaturated warm/cool greys with no matching ramp step. Text inks are medium-confidence — the 512px mockups anti-alias body copy, so ink values are anchored to the darkest observed stroke plateau (#000c1c in the home H1) and tuned upward to meet WCAG AA against the warm canvas. Gradient tokens are intentionally flattened (start === end): the design is uniformly flat, using hairline borders rather than fills or shadows for separation. Note that the brand chain still resolves primary=navy / secondary=blue / accent=amber, which no longer matches this identity — see the follow-up about switching tokens/brand.json to the teal ramp via the rebrand skill.",
|
|
3
3
|
|
|
4
4
|
"surface": {
|
|
5
|
-
"canvas": { "value": "#
|
|
6
|
-
"panel": { "value": "#
|
|
5
|
+
"canvas": { "value": "#faf8f5", "type": "color", "description": "Main page background — warm off-white, the dominant fill across all six mockups" },
|
|
6
|
+
"panel": { "value": "#ffffff", "type": "color", "description": "Card/panel background — pure white cards sitting on the warm canvas (pricing cards, form fields)" },
|
|
7
7
|
"elevated": { "value": "#ffffff", "type": "color", "description": "Elevated surface (modals, dropdowns)" },
|
|
8
|
-
"overlay": { "value": "rgba(
|
|
9
|
-
"muted": { "value": "#
|
|
10
|
-
"inverse": { "value": "#
|
|
11
|
-
"highlight": { "value": "#
|
|
8
|
+
"overlay": { "value": "rgba(4, 26, 38, 0.55)", "type": "color", "description": "Modal overlay backdrop — deep petrol wash rather than neutral black" },
|
|
9
|
+
"muted": { "value": "#eceeec", "type": "color", "description": "Subtle/recessed background — cool grey-green band (quote block, 'eerste les gratis' strip)" },
|
|
10
|
+
"inverse": { "value": "#041a26", "type": "color", "description": "Dark surface for contrast (footer, CTA bands) — deep petrol, measured flat fill" },
|
|
11
|
+
"highlight": { "value": "#e2efec", "type": "color", "description": "Accent surface — light teal tint (selected/'meest gekozen' card wash)" },
|
|
12
12
|
"gradient": {
|
|
13
|
-
"start": { "value": "#
|
|
14
|
-
"end": { "value": "#
|
|
13
|
+
"start": { "value": "#faf8f5", "type": "color", "description": "Gradient background start — flattened to solid (design uses no surface gradients)" },
|
|
14
|
+
"end": { "value": "#faf8f5", "type": "color", "description": "Gradient background end — flattened to solid (design uses no surface gradients)" }
|
|
15
15
|
}
|
|
16
16
|
},
|
|
17
17
|
|
|
18
18
|
"text": {
|
|
19
|
-
"default": { "value": "#
|
|
20
|
-
"primary": { "value": "#
|
|
21
|
-
"secondary": { "value": "#
|
|
22
|
-
"muted": { "value": "#
|
|
23
|
-
"subtle": { "value": "#
|
|
24
|
-
"inverse": { "value": "#
|
|
25
|
-
"link": { "value": "
|
|
26
|
-
"linkHover": { "value": "
|
|
27
|
-
"linkVisited": { "value": "#
|
|
28
|
-
"heading": { "value": "#
|
|
19
|
+
"default": { "value": "#253a43", "type": "color", "description": "Primary body text — petrol slate, 11.2:1 on canvas" },
|
|
20
|
+
"primary": { "value": "#253a43", "type": "color", "description": "Primary text (alias)" },
|
|
21
|
+
"secondary": { "value": "#3d5058", "type": "color", "description": "Secondary text — lifted petrol slate, 8.0:1 on canvas" },
|
|
22
|
+
"muted": { "value": "#5f7178", "type": "color", "description": "Helper/secondary text — 4.8:1 on canvas, holds AA" },
|
|
23
|
+
"subtle": { "value": "#7d8f95", "type": "color", "description": "Placeholder text — 3.2:1 on canvas (AA-large / non-text minimum)" },
|
|
24
|
+
"inverse": { "value": "#faf8f5", "type": "color", "description": "Text on dark surfaces — warm off-white, 16.8:1 on the petrol inverse" },
|
|
25
|
+
"link": { "value": "{teal.700}", "type": "color", "description": "Link text — teal ramp step 700, 5.2:1 on canvas" },
|
|
26
|
+
"linkHover": { "value": "{teal.800}", "type": "color", "description": "Link hover — one ramp step deeper, 7.2:1 on canvas" },
|
|
27
|
+
"linkVisited": { "value": "#4a5f74", "type": "color", "description": "Visited link — muted slate-blue, kept distinguishable from the teal link" },
|
|
28
|
+
"heading": { "value": "#04141f", "type": "color", "description": "Heading text — near-black petrol ink, 17.6:1 on canvas (darkest measured stroke plateau)" }
|
|
29
29
|
},
|
|
30
30
|
|
|
31
31
|
"border": {
|
|
32
|
-
"subtle": { "value": "#
|
|
33
|
-
"default": { "value": "#
|
|
34
|
-
"strong": { "value": "#
|
|
35
|
-
"focus": { "value": "
|
|
32
|
+
"subtle": { "value": "#e6e2dd", "type": "color", "description": "Subtle borders — warm hairline measured on the pricing-card outlines" },
|
|
33
|
+
"default": { "value": "#d5d8d4", "type": "color", "description": "Default borders — cool hairline matching the recessed band" },
|
|
34
|
+
"strong": { "value": "#04141f", "type": "color", "description": "Emphasised borders — petrol ink rule (used under headings in the mockups)" },
|
|
35
|
+
"focus": { "value": "{teal.700}", "type": "color", "description": "Focus ring colour — teal ramp step 700" },
|
|
36
36
|
"vibrant": {
|
|
37
|
-
"start": { "value": "
|
|
38
|
-
"end": { "value": "
|
|
37
|
+
"start": { "value": "{teal.700}", "type": "color", "description": "Vibrant gradient border start — flattened to solid teal" },
|
|
38
|
+
"end": { "value": "{teal.700}", "type": "color", "description": "Vibrant gradient border end — flattened to solid teal" }
|
|
39
39
|
}
|
|
40
40
|
},
|
|
41
41
|
|
|
42
42
|
"feedback": {
|
|
43
|
-
"success": { "value": "#
|
|
44
|
-
"successSubtle": { "value": "#
|
|
45
|
-
"successEmphasis": { "value": "#
|
|
46
|
-
"warning": { "value": "#
|
|
47
|
-
"warningSubtle": { "value": "#
|
|
48
|
-
"warningEmphasis": { "value": "#
|
|
49
|
-
"error": { "value": "#
|
|
50
|
-
"errorSubtle": { "value": "#
|
|
51
|
-
"errorEmphasis": { "value": "#
|
|
52
|
-
"info": { "value": "
|
|
53
|
-
"infoSubtle": { "value": "#
|
|
54
|
-
"infoEmphasis": { "value": "
|
|
43
|
+
"success": { "value": "#1f7a55", "type": "color", "description": "Success state — teal-leaning green, harmonised with the palette (5.0:1 on canvas)" },
|
|
44
|
+
"successSubtle": { "value": "#e4f2ec", "type": "color", "description": "Success background" },
|
|
45
|
+
"successEmphasis": { "value": "#145c3f", "type": "color", "description": "Success text" },
|
|
46
|
+
"warning": { "value": "#b3701a", "type": "color", "description": "Warning state — warm ochre tuned to the warm canvas (3.8:1)" },
|
|
47
|
+
"warningSubtle": { "value": "#f7eddf", "type": "color", "description": "Warning background" },
|
|
48
|
+
"warningEmphasis": { "value": "#8a5410", "type": "color", "description": "Warning text — 5.9:1 on canvas" },
|
|
49
|
+
"error": { "value": "#b8342c", "type": "color", "description": "Error state — muted brick red, desaturated to sit beside the teal (5.6:1)" },
|
|
50
|
+
"errorSubtle": { "value": "#f7e6e4", "type": "color", "description": "Error background" },
|
|
51
|
+
"errorEmphasis": { "value": "#8f2620", "type": "color", "description": "Error text — 8.0:1 on canvas" },
|
|
52
|
+
"info": { "value": "{teal.700}", "type": "color", "description": "Info state — teal (the design carries no separate informational blue)" },
|
|
53
|
+
"infoSubtle": { "value": "#e2efee", "type": "color", "description": "Info background" },
|
|
54
|
+
"infoEmphasis": { "value": "{teal.800}", "type": "color", "description": "Info text — one ramp step deeper" }
|
|
55
55
|
},
|
|
56
56
|
|
|
57
57
|
"accent": {
|
|
58
58
|
"gradient": {
|
|
59
|
-
"start": { "value": "
|
|
60
|
-
"end": { "value": "
|
|
61
|
-
"hoverStart": { "value": "
|
|
62
|
-
"hoverEnd": { "value": "
|
|
59
|
+
"start": { "value": "{teal.700}", "type": "color", "description": "Accent gradient start — flattened to solid teal (design uses solid fills)" },
|
|
60
|
+
"end": { "value": "{teal.700}", "type": "color", "description": "Accent gradient end — flattened to solid teal" },
|
|
61
|
+
"hoverStart": { "value": "{teal.800}", "type": "color", "description": "Accent hover start — flattened to one ramp step deeper" },
|
|
62
|
+
"hoverEnd": { "value": "{teal.800}", "type": "color", "description": "Accent hover end — flattened to one ramp step deeper" }
|
|
63
63
|
}
|
|
64
64
|
},
|
|
65
65
|
|
|
66
66
|
"intent": {
|
|
67
67
|
"action": {
|
|
68
|
-
"default": { "value": "
|
|
69
|
-
"hover": { "value": "
|
|
70
|
-
"active": { "value": "
|
|
71
|
-
"disabled": { "value": "#
|
|
68
|
+
"default": { "value": "{teal.700}", "type": "color", "description": "Primary CTA colour — teal.700 #0f766e, within 2% of the measured button fill #097878; 5.5:1 against a white label" },
|
|
69
|
+
"hover": { "value": "{teal.800}", "type": "color", "description": "Primary CTA hover — one ramp step deeper, 7.6:1 against white" },
|
|
70
|
+
"active": { "value": "{teal.900}", "type": "color", "description": "Primary CTA pressed — two ramp steps deeper, 9.5:1 against white" },
|
|
71
|
+
"disabled": { "value": "#d5d8d4", "type": "color", "description": "Disabled state" }
|
|
72
72
|
},
|
|
73
73
|
"secondary": {
|
|
74
74
|
"default": { "value": "transparent", "type": "color", "description": "Secondary action bg" },
|
|
75
|
-
"hover": { "value": "#
|
|
76
|
-
"border": { "value": "
|
|
75
|
+
"hover": { "value": "#eceeec", "type": "color", "description": "Secondary action hover — recessed band tint" },
|
|
76
|
+
"border": { "value": "{teal.700}", "type": "color", "description": "Secondary action border — teal outline (matches the 'Meer over mij' ghost buttons)" }
|
|
77
77
|
}
|
|
78
78
|
},
|
|
79
79
|
|
|
80
80
|
"focus": {
|
|
81
|
-
"ring": { "value": "
|
|
81
|
+
"ring": { "value": "{teal.700}", "type": "color", "description": "Focus ring colour — teal.700, 5.2:1 on canvas" }
|
|
82
82
|
},
|
|
83
83
|
|
|
84
84
|
"brand": {
|
|
85
|
-
"primary": { "value": "
|
|
86
|
-
"secondary": { "value": "
|
|
87
|
-
"accent": { "value": "
|
|
88
|
-
"subtle": { "value": "#
|
|
85
|
+
"primary": { "value": "{teal.700}", "type": "color", "description": "Primary brand colour — the 'Jouw Stem' teal, carried by every CTA and the logo waveform" },
|
|
86
|
+
"secondary": { "value": "{teal.600}", "type": "color", "description": "Secondary brand colour — mid teal used for the decorative connector lines and icon strokes" },
|
|
87
|
+
"accent": { "value": "{teal.400}", "type": "color", "description": "Accent brand colour — light teal for on-dark use (footer section labels, 9.6:1 on the petrol inverse)" },
|
|
88
|
+
"subtle": { "value": "#e2efec", "type": "color", "description": "Subtle brand background — light teal wash" }
|
|
89
89
|
}
|
|
90
90
|
}
|