@newco-ai-platform/ui 0.1.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/README.md +103 -0
- package/demo.html +468 -0
- package/dist/index.cjs +221 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +210 -0
- package/dist/index.js.map +1 -0
- package/dist/tokens/index.cjs +221 -0
- package/dist/tokens/index.cjs.map +1 -0
- package/dist/tokens/index.d.cts +196 -0
- package/dist/tokens/index.d.ts +196 -0
- package/dist/tokens/index.js +210 -0
- package/dist/tokens/index.js.map +1 -0
- package/package.json +60 -0
- package/src/tokens.css +146 -0
package/README.md
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# @newco-ai-platform/ui
|
|
2
|
+
|
|
3
|
+
NewCo Suite design tokens — **Luminous Multi-Signal**.
|
|
4
|
+
|
|
5
|
+
This is the v0.5 publish: **tokens only**. React primitives, `.p-*` components from the pitch microsite, and Storybook ship at v0.2.0 in Phase 2.
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @newco-ai-platform/ui
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Use — TypeScript
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import {
|
|
17
|
+
colors,
|
|
18
|
+
typography,
|
|
19
|
+
productAccents,
|
|
20
|
+
productAccentList,
|
|
21
|
+
dataViz,
|
|
22
|
+
spacing,
|
|
23
|
+
shadows,
|
|
24
|
+
motion,
|
|
25
|
+
prefersReducedMotion,
|
|
26
|
+
} from '@newco-ai-platform/ui';
|
|
27
|
+
|
|
28
|
+
// Light/dark surfaces
|
|
29
|
+
const bg = colors.light.surface; // '#f7f9ff'
|
|
30
|
+
const bgDark = colors.dark.surface; // '#0F1219'
|
|
31
|
+
|
|
32
|
+
// One product's accent
|
|
33
|
+
const neuronViolet = productAccents.neuron.hex; // '#7C4FE0'
|
|
34
|
+
const neuronTint = productAccents.neuron.tint; // rgba(124, 79, 224, 0.08)
|
|
35
|
+
|
|
36
|
+
// All 5 in customer-journey order — used in MERIDIAN's portfolio chart only
|
|
37
|
+
productAccentList.forEach((p) => console.log(p.displayName, p.hex));
|
|
38
|
+
|
|
39
|
+
// Typography style — spread into CSS-in-JS
|
|
40
|
+
const titleStyle = {
|
|
41
|
+
...typography.pageTitle,
|
|
42
|
+
color: colors.light.onSurface,
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
// Motion — respect user preference
|
|
46
|
+
if (prefersReducedMotion()) {
|
|
47
|
+
// Skip the animation; show the final state directly.
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Use — CSS
|
|
52
|
+
|
|
53
|
+
```css
|
|
54
|
+
@import '@newco-ai-platform/ui/tokens.css';
|
|
55
|
+
|
|
56
|
+
.my-page {
|
|
57
|
+
background: var(--surface);
|
|
58
|
+
color: var(--on-surface);
|
|
59
|
+
font-family: var(--font-body);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.my-page__title {
|
|
63
|
+
font-family: var(--font-display);
|
|
64
|
+
font-size: var(--fs-page-title);
|
|
65
|
+
font-weight: 700;
|
|
66
|
+
letter-spacing: -0.02em;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.my-page__neuron-pill {
|
|
70
|
+
color: var(--neuron);
|
|
71
|
+
background: var(--neuron-tint);
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Set `data-theme="dark"` on `<html>` for the dark variant. Light is the default.
|
|
76
|
+
|
|
77
|
+
## Demo
|
|
78
|
+
|
|
79
|
+
The included `demo.html` renders one example of each token category against the live tokens.
|
|
80
|
+
|
|
81
|
+
```bash
|
|
82
|
+
cd platform/packages/ui
|
|
83
|
+
npm run demo
|
|
84
|
+
# opens http://localhost:8765/demo.html
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Constraints (from DESIGN.md)
|
|
88
|
+
|
|
89
|
+
- **One accent per product.** Cross-product surfaces use neutrals only.
|
|
90
|
+
- **No 1px borders for sectioning.** Use `--shadow-card` for tonal lift.
|
|
91
|
+
- **Body text ≥ 14px on data surfaces.**
|
|
92
|
+
- **Kill switches use the product accent, never red.** Red is reserved for true errors.
|
|
93
|
+
- **`prefers-reduced-motion: reduce` is always honored.** All durations collapse to `0ms`.
|
|
94
|
+
|
|
95
|
+
Full constraints + rationale: see `platform/DESIGN.md`.
|
|
96
|
+
|
|
97
|
+
## Versioning
|
|
98
|
+
|
|
99
|
+
- **v0.1.0** (this release) — tokens-only. Phase 1 D7 unlock criterion.
|
|
100
|
+
- **v0.1.1** (Phase 1 D9) — any v0.5 → v1.0 token deltas after user "approved" sign-off.
|
|
101
|
+
- **v0.2.0** (Phase 2) — adds React primitives (Button, Card, Input, Dialog, Table) + the `.p-*` components from the pitch microsite ported as proper React.
|
|
102
|
+
|
|
103
|
+
Token changes after v0.1.1 require a `design-system-owner` PR review.
|
package/demo.html
ADDED
|
@@ -0,0 +1,468 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en" data-theme="light">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
+
<title>@newco-ai-platform/ui@0.1.0 — Luminous Multi-Signal tokens contact sheet</title>
|
|
7
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
10
|
+
<link rel="stylesheet" href="./src/tokens.css">
|
|
11
|
+
<style>
|
|
12
|
+
* { box-sizing: border-box; }
|
|
13
|
+
html, body { margin: 0; padding: 0; background: var(--surface); color: var(--on-surface); -webkit-font-smoothing: antialiased; }
|
|
14
|
+
body { font-family: var(--font-body); font-size: var(--fs-body-md); line-height: 1.5; }
|
|
15
|
+
|
|
16
|
+
.shell { max-width: var(--container-max); margin: 0 auto; padding: 32px 24px 96px; }
|
|
17
|
+
|
|
18
|
+
/* —— Page header —— */
|
|
19
|
+
.page-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-bottom: 24px; }
|
|
20
|
+
.page-head h1 {
|
|
21
|
+
margin: 0;
|
|
22
|
+
font-family: var(--font-display);
|
|
23
|
+
font-size: var(--fs-page-title); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
|
|
24
|
+
}
|
|
25
|
+
.page-head .version-pill {
|
|
26
|
+
display: inline-flex; align-items: center; gap: 8px;
|
|
27
|
+
padding: 6px 12px; background: var(--surface-card); border-radius: var(--radius-full);
|
|
28
|
+
box-shadow: var(--shadow-card);
|
|
29
|
+
font-family: var(--font-mono); font-size: var(--fs-mono-sm);
|
|
30
|
+
color: var(--on-surface-muted);
|
|
31
|
+
}
|
|
32
|
+
.page-head .version-pill::before {
|
|
33
|
+
content: ""; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--meridian);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.theme-toggle {
|
|
37
|
+
display: inline-flex; align-items: center; gap: 8px;
|
|
38
|
+
padding: 6px 12px; border-radius: var(--radius);
|
|
39
|
+
background: transparent; box-shadow: inset 0 0 0 1px var(--hairline);
|
|
40
|
+
font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 500;
|
|
41
|
+
color: var(--on-surface); cursor: pointer;
|
|
42
|
+
}
|
|
43
|
+
.theme-toggle:hover { background: var(--surface-tint); }
|
|
44
|
+
|
|
45
|
+
/* —— Section —— */
|
|
46
|
+
.section { margin: 48px 0 0; }
|
|
47
|
+
.section-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 16px; }
|
|
48
|
+
.section-head h2 {
|
|
49
|
+
margin: 0;
|
|
50
|
+
font-family: var(--font-display);
|
|
51
|
+
font-size: var(--fs-headline-md); font-weight: 600;
|
|
52
|
+
}
|
|
53
|
+
.section-head .meta {
|
|
54
|
+
font-family: var(--font-body); font-size: var(--fs-body-sm); color: var(--on-surface-muted);
|
|
55
|
+
}
|
|
56
|
+
.section .lead {
|
|
57
|
+
margin: 0 0 16px; max-width: 720px;
|
|
58
|
+
color: var(--on-surface-muted); font-size: var(--fs-body-sm);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
/* —— Swatch grid (product accents) —— */
|
|
62
|
+
.swatch-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
|
|
63
|
+
.swatch {
|
|
64
|
+
background: var(--surface-card); border-radius: var(--radius-lg);
|
|
65
|
+
padding: 16px; box-shadow: var(--shadow-card);
|
|
66
|
+
display: flex; flex-direction: column; gap: 8px;
|
|
67
|
+
}
|
|
68
|
+
.swatch-chip { height: 72px; border-radius: var(--radius); }
|
|
69
|
+
.swatch-name {
|
|
70
|
+
font-family: var(--font-display); font-weight: 700; font-size: 13px;
|
|
71
|
+
letter-spacing: 0.06em;
|
|
72
|
+
}
|
|
73
|
+
.swatch-hex { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--on-surface-muted); }
|
|
74
|
+
.swatch-role { font-size: 12px; color: var(--on-surface-muted); line-height: 1.4; }
|
|
75
|
+
|
|
76
|
+
.chip-prism { background: var(--prism); color: white; }
|
|
77
|
+
.chip-neuron { background: var(--neuron); color: white; }
|
|
78
|
+
.chip-vault { background: var(--vault); color: white; }
|
|
79
|
+
.chip-catalyst { background: var(--catalyst); color: white; }
|
|
80
|
+
.chip-meridian { background: var(--meridian); color: white; }
|
|
81
|
+
|
|
82
|
+
/* —— Neutrals + state grid —— */
|
|
83
|
+
.neutrals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
|
84
|
+
.neutral-card {
|
|
85
|
+
background: var(--surface-card); border-radius: var(--radius-lg);
|
|
86
|
+
padding: 14px; box-shadow: var(--shadow-card);
|
|
87
|
+
display: flex; flex-direction: column; gap: 6px;
|
|
88
|
+
}
|
|
89
|
+
.neutral-chip { height: 44px; border-radius: var(--radius); }
|
|
90
|
+
.neutral-label { font-family: var(--font-body); font-weight: 600; font-size: 13px; }
|
|
91
|
+
.neutral-hex { font-family: var(--font-mono); font-size: 11px; color: var(--on-surface-muted); }
|
|
92
|
+
|
|
93
|
+
/* —— Typography demo —— */
|
|
94
|
+
.type-card {
|
|
95
|
+
background: var(--surface-card); border-radius: var(--radius-lg);
|
|
96
|
+
padding: 24px 28px; box-shadow: var(--shadow-card);
|
|
97
|
+
display: flex; flex-direction: column; gap: 18px;
|
|
98
|
+
}
|
|
99
|
+
.type-row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline; padding-bottom: 12px; }
|
|
100
|
+
.type-row + .type-row { border-top: 1px solid var(--hairline); padding-top: 14px; }
|
|
101
|
+
.type-meta { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--on-surface-muted); line-height: 1.45; }
|
|
102
|
+
.type-meta .name { color: var(--on-surface); font-weight: 600; display: block; margin-bottom: 4px; }
|
|
103
|
+
.type-display-lg { font-family: var(--font-display); font-size: var(--fs-display-lg); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; color: var(--meridian); }
|
|
104
|
+
.type-display-md { font-family: var(--font-display); font-size: var(--fs-display-md); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
|
|
105
|
+
.type-page-title { font-family: var(--font-display); font-size: var(--fs-page-title); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
|
|
106
|
+
.type-headline { font-family: var(--font-display); font-size: var(--fs-headline-md); font-weight: 600; }
|
|
107
|
+
.type-body-md { font-family: var(--font-body); font-size: var(--fs-body-md); font-weight: 400; }
|
|
108
|
+
.type-body-sm { font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 400; }
|
|
109
|
+
.type-label-sm { font-family: var(--font-body); font-size: var(--fs-label-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--on-surface-muted); }
|
|
110
|
+
.type-mono { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: var(--lh-mono); font-variant-numeric: tabular-nums; }
|
|
111
|
+
.type-mono-sm { font-family: var(--font-mono); font-size: var(--fs-mono-sm); line-height: var(--lh-mono-sm); font-variant-numeric: tabular-nums; color: var(--on-surface-muted); }
|
|
112
|
+
|
|
113
|
+
/* —— Spacing demo —— */
|
|
114
|
+
.spacing-card {
|
|
115
|
+
background: var(--surface-card); border-radius: var(--radius-lg);
|
|
116
|
+
padding: 24px 28px; box-shadow: var(--shadow-card);
|
|
117
|
+
}
|
|
118
|
+
.grid-ruler {
|
|
119
|
+
display: grid; grid-template-columns: repeat(15, 8px);
|
|
120
|
+
gap: 0; margin: 12px 0 20px; height: 32px;
|
|
121
|
+
background: var(--surface-tint); border-radius: 2px;
|
|
122
|
+
}
|
|
123
|
+
.grid-ruler > div { border-left: 1px dashed var(--hairline); }
|
|
124
|
+
.row-demo { display: flex; flex-direction: column; gap: 8px; }
|
|
125
|
+
.row-demo .row {
|
|
126
|
+
display: grid; grid-template-columns: 140px 1fr;
|
|
127
|
+
gap: 16px; align-items: center;
|
|
128
|
+
font-family: var(--font-mono); font-size: var(--fs-mono);
|
|
129
|
+
background: var(--surface); padding: 0 12px; border-radius: 2px;
|
|
130
|
+
}
|
|
131
|
+
.row-demo .row.neuron-row { height: var(--row-neuron); }
|
|
132
|
+
.row-demo .row.meridian-row { height: var(--row-meridian); }
|
|
133
|
+
.row-demo .row .label { color: var(--on-surface-muted); }
|
|
134
|
+
|
|
135
|
+
/* —— No-Line Rule demo —— */
|
|
136
|
+
.no-line-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
|
|
137
|
+
.no-line-good {
|
|
138
|
+
background: var(--surface-card); border-radius: var(--radius-lg);
|
|
139
|
+
padding: 20px; box-shadow: var(--shadow-card);
|
|
140
|
+
}
|
|
141
|
+
.no-line-bad {
|
|
142
|
+
background: var(--surface-card); border-radius: var(--radius-lg);
|
|
143
|
+
padding: 20px; border: 1px solid #ccc;
|
|
144
|
+
}
|
|
145
|
+
.no-line-good h3, .no-line-bad h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 16px; font-weight: 600; }
|
|
146
|
+
.no-line-good p, .no-line-bad p { margin: 0; font-size: var(--fs-body-sm); color: var(--on-surface-muted); }
|
|
147
|
+
|
|
148
|
+
/* —— Motion demo —— */
|
|
149
|
+
.motion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
|
|
150
|
+
.motion-card {
|
|
151
|
+
background: var(--surface-card); border-radius: var(--radius-lg);
|
|
152
|
+
padding: 20px; box-shadow: var(--shadow-card);
|
|
153
|
+
display: flex; flex-direction: column; gap: 14px;
|
|
154
|
+
}
|
|
155
|
+
.motion-pulse {
|
|
156
|
+
width: 16px; height: 16px; border-radius: var(--radius-full); background: var(--neuron);
|
|
157
|
+
box-shadow: 0 0 0 0 var(--neuron-strong);
|
|
158
|
+
animation: pulse 1.4s var(--easing-standard) infinite;
|
|
159
|
+
}
|
|
160
|
+
@keyframes pulse {
|
|
161
|
+
0% { box-shadow: 0 0 0 0 rgba(124, 79, 224, 0.45); }
|
|
162
|
+
70% { box-shadow: 0 0 0 12px rgba(124, 79, 224, 0); }
|
|
163
|
+
100% { box-shadow: 0 0 0 0 rgba(124, 79, 224, 0); }
|
|
164
|
+
}
|
|
165
|
+
.motion-cursor {
|
|
166
|
+
width: 8px; height: 16px; background: var(--meridian);
|
|
167
|
+
animation: blink 1.1s steps(2) infinite;
|
|
168
|
+
}
|
|
169
|
+
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
|
|
170
|
+
.motion-fade {
|
|
171
|
+
width: 100%; height: 32px; background: linear-gradient(90deg, var(--prism), var(--neuron));
|
|
172
|
+
border-radius: var(--radius);
|
|
173
|
+
animation: fade 3s ease-in-out infinite alternate;
|
|
174
|
+
}
|
|
175
|
+
@keyframes fade { from { opacity: 0.4 } to { opacity: 1 } }
|
|
176
|
+
@media (prefers-reduced-motion: reduce) {
|
|
177
|
+
.motion-pulse, .motion-cursor, .motion-fade { animation: none; }
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* —— Data-viz demo —— */
|
|
181
|
+
.dv-card {
|
|
182
|
+
background: var(--surface-card); border-radius: var(--radius-lg);
|
|
183
|
+
padding: 24px 28px; box-shadow: var(--shadow-card);
|
|
184
|
+
}
|
|
185
|
+
.dv-bars { display: flex; align-items: end; gap: 18px; height: 140px; }
|
|
186
|
+
.dv-bar { width: 56px; border-radius: 2px 2px 0 0; display: flex; align-items: end; justify-content: center; padding-bottom: 6px; color: white; font-family: var(--font-mono); font-size: 11px; }
|
|
187
|
+
.dv-bar.positive { background: var(--dv-positive); }
|
|
188
|
+
.dv-bar.negative { background: var(--dv-negative); }
|
|
189
|
+
.dv-bar.neutral { background: var(--dv-neutral); }
|
|
190
|
+
.dv-portfolio { margin-top: 24px; }
|
|
191
|
+
.dv-portfolio .bar { display: flex; height: 32px; border-radius: var(--radius); overflow: hidden; }
|
|
192
|
+
.dv-portfolio .bar > div { display: flex; align-items: center; justify-content: center; color: white; font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
|
|
193
|
+
|
|
194
|
+
/* —— Icon note —— */
|
|
195
|
+
.icon-note {
|
|
196
|
+
background: var(--surface-card); border-radius: var(--radius-lg);
|
|
197
|
+
padding: 20px 24px; box-shadow: var(--shadow-card);
|
|
198
|
+
display: flex; gap: 18px; align-items: flex-start;
|
|
199
|
+
}
|
|
200
|
+
.icon-note .icons {
|
|
201
|
+
display: flex; gap: 10px; font-family: var(--font-mono); font-size: 18px;
|
|
202
|
+
color: var(--on-surface-muted);
|
|
203
|
+
}
|
|
204
|
+
.icon-note .text { flex: 1; }
|
|
205
|
+
|
|
206
|
+
/* —— Footer —— */
|
|
207
|
+
.foot { margin-top: 64px; padding-top: 18px; border-top: 1px solid var(--hairline); color: var(--on-surface-muted); font-size: 12px; }
|
|
208
|
+
.foot a { color: var(--meridian); text-decoration: none; }
|
|
209
|
+
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
|
|
210
|
+
</style>
|
|
211
|
+
</head>
|
|
212
|
+
<body>
|
|
213
|
+
|
|
214
|
+
<div class="shell">
|
|
215
|
+
|
|
216
|
+
<header class="page-head">
|
|
217
|
+
<div>
|
|
218
|
+
<h1>@newco-ai-platform/ui — Luminous Multi-Signal</h1>
|
|
219
|
+
<div style="margin-top:8px; color:var(--on-surface-muted)">
|
|
220
|
+
v0.1.0 tokens contact sheet · proves the Phase-1 design system renders end-to-end
|
|
221
|
+
</div>
|
|
222
|
+
</div>
|
|
223
|
+
<div style="display:flex; gap:12px; align-items:center">
|
|
224
|
+
<span class="version-pill">v0.1.0 · staged for publish</span>
|
|
225
|
+
<button class="theme-toggle" onclick="toggleTheme()">◐ Toggle theme</button>
|
|
226
|
+
</div>
|
|
227
|
+
</header>
|
|
228
|
+
|
|
229
|
+
<!-- 5 product accents -->
|
|
230
|
+
<section class="section">
|
|
231
|
+
<div class="section-head">
|
|
232
|
+
<h2>5-signal palette</h2>
|
|
233
|
+
<span class="meta">~60° hue rotation · one accent per product · cross-product surfaces use neutrals only</span>
|
|
234
|
+
</div>
|
|
235
|
+
<div class="swatch-grid">
|
|
236
|
+
<div class="swatch"><div class="swatch-chip chip-prism"></div> <span class="swatch-name">PRISM</span> <span class="swatch-hex">#4F6BED · hue 230°</span> <span class="swatch-role">discovery · process mining</span></div>
|
|
237
|
+
<div class="swatch"><div class="swatch-chip chip-neuron"></div> <span class="swatch-name">NEURON</span> <span class="swatch-hex">#7C4FE0 · hue 260°</span> <span class="swatch-role">orchestration · intelligence</span></div>
|
|
238
|
+
<div class="swatch"><div class="swatch-chip chip-vault"></div> <span class="swatch-name">VAULT</span> <span class="swatch-hex">#5B6B7D · hue 215°</span> <span class="swatch-role">sovereignty · compliance</span></div>
|
|
239
|
+
<div class="swatch"><div class="swatch-chip chip-catalyst"></div><span class="swatch-name">CATALYST</span> <span class="swatch-hex">#C28A2E · hue 36°</span> <span class="swatch-role">reuse · acceleration (only warm)</span></div>
|
|
240
|
+
<div class="swatch"><div class="swatch-chip chip-meridian"></div><span class="swatch-name">MERIDIAN</span> <span class="swatch-hex">#2E8A6B · hue 145°</span> <span class="swatch-role">outcome · EBITDA</span></div>
|
|
241
|
+
</div>
|
|
242
|
+
</section>
|
|
243
|
+
|
|
244
|
+
<!-- Neutrals + state -->
|
|
245
|
+
<section class="section">
|
|
246
|
+
<div class="section-head">
|
|
247
|
+
<h2>Structural neutrals</h2>
|
|
248
|
+
<span class="meta">light theme shown · toggle theme to see dark · No-Line Rule applies</span>
|
|
249
|
+
</div>
|
|
250
|
+
<div class="neutrals-grid">
|
|
251
|
+
<div class="neutral-card"><div class="neutral-chip" style="background:var(--surface); box-shadow:inset 0 0 0 1px var(--hairline)"></div><span class="neutral-label">surface</span> <span class="neutral-hex" id="hex-surface">#f7f9ff</span></div>
|
|
252
|
+
<div class="neutral-card"><div class="neutral-chip" style="background:var(--surface-card); box-shadow:inset 0 0 0 1px var(--hairline)"></div><span class="neutral-label">surface-card</span> <span class="neutral-hex" id="hex-card">#ffffff</span></div>
|
|
253
|
+
<div class="neutral-card"><div class="neutral-chip" style="background:var(--surface-tint); box-shadow:inset 0 0 0 1px var(--hairline)"></div><span class="neutral-label">surface-tint</span> <span class="neutral-hex" id="hex-tint">#edf4ff</span></div>
|
|
254
|
+
<div class="neutral-card"><div class="neutral-chip" style="background:var(--on-surface)"></div> <span class="neutral-label">on-surface</span> <span class="neutral-hex" id="hex-on">#0c1d2c</span></div>
|
|
255
|
+
<div class="neutral-card"><div class="neutral-chip" style="background:var(--on-surface-muted)"></div><span class="neutral-label">on-surface-muted</span> <span class="neutral-hex" id="hex-muted">#5b6b7d</span></div>
|
|
256
|
+
<div class="neutral-card"><div class="neutral-chip" style="background:var(--on-surface-dim)"></div> <span class="neutral-label">on-surface-dim</span> <span class="neutral-hex" id="hex-dim">#8893a3</span></div>
|
|
257
|
+
<div class="neutral-card"><div class="neutral-chip" style="background:var(--hairline)"></div> <span class="neutral-label">hairline</span> <span class="neutral-hex">rgba(91,107,125,0.10)</span></div>
|
|
258
|
+
<div class="neutral-card" style="background:var(--err); color:white"><div class="neutral-chip" style="background:var(--err)"></div><span class="neutral-label" style="color:white">err (true errors only)</span><span class="neutral-hex" style="color:rgba(255,255,255,0.85)">#BA1A1A</span></div>
|
|
259
|
+
</div>
|
|
260
|
+
</section>
|
|
261
|
+
|
|
262
|
+
<!-- Typography -->
|
|
263
|
+
<section class="section">
|
|
264
|
+
<div class="section-head">
|
|
265
|
+
<h2>Type scale</h2>
|
|
266
|
+
<span class="meta">Manrope (display) · Inter (body) · JetBrains Mono (data) — body ≥ 14px on data surfaces</span>
|
|
267
|
+
</div>
|
|
268
|
+
<div class="type-card">
|
|
269
|
+
<div class="type-row">
|
|
270
|
+
<div class="type-meta"><span class="name">displayLg</span>Manrope · 64 · 700<br>-0.025em · tabular</div>
|
|
271
|
+
<div class="type-display-lg">+$1.2M</div>
|
|
272
|
+
</div>
|
|
273
|
+
<div class="type-row">
|
|
274
|
+
<div class="type-meta"><span class="name">displayMd</span>Manrope · 48 · 700<br>-0.02em · tabular</div>
|
|
275
|
+
<div class="type-display-md">90 days</div>
|
|
276
|
+
</div>
|
|
277
|
+
<div class="type-row">
|
|
278
|
+
<div class="type-meta"><span class="name">pageTitle (h1)</span>Manrope · 38 · 700<br>-0.02em · hero only</div>
|
|
279
|
+
<div class="type-page-title">Engagement E-42 · Kintsugi General · Q1 2026</div>
|
|
280
|
+
</div>
|
|
281
|
+
<div class="type-row">
|
|
282
|
+
<div class="type-meta"><span class="name">headlineMd (h2)</span>Manrope · 20 · 600</div>
|
|
283
|
+
<div class="type-headline">Portfolio contribution · Q1 EBITDA uplift</div>
|
|
284
|
+
</div>
|
|
285
|
+
<div class="type-row">
|
|
286
|
+
<div class="type-meta"><span class="name">bodyMd</span>Inter · 16 · 400 · 1.5</div>
|
|
287
|
+
<div class="type-body-md">All three independent reviewers approved the EBITDA uplift attribution. Fee FE-2026-Q1-042 authorized.</div>
|
|
288
|
+
</div>
|
|
289
|
+
<div class="type-row">
|
|
290
|
+
<div class="type-meta"><span class="name">bodySm</span>Inter · 14 · 400 · 1.5</div>
|
|
291
|
+
<div class="type-body-sm">Concur with attribution magnitude. Flagged 2 edge cases where catalyst pipeline reuse complicates lineage.</div>
|
|
292
|
+
</div>
|
|
293
|
+
<div class="type-row">
|
|
294
|
+
<div class="type-meta"><span class="name">labelSm</span>Inter · 12 · 600 · tracked 0.06em<br>uppercase · tabular caps</div>
|
|
295
|
+
<div class="type-label-sm">Audit ledger · sha-256 · chain_v1</div>
|
|
296
|
+
</div>
|
|
297
|
+
<div class="type-row">
|
|
298
|
+
<div class="type-meta"><span class="name">mono</span>JetBrains Mono · 13 / 22<br>tabular · "signal" font</div>
|
|
299
|
+
<div class="type-mono">14:32:18 9f2a8b41c7d3… consensus-agent fee.authorized fe-2026-q1-042</div>
|
|
300
|
+
</div>
|
|
301
|
+
<div class="type-row">
|
|
302
|
+
<div class="type-meta"><span class="name">monoSm</span>JetBrains Mono · 12 / 18<br>tabular</div>
|
|
303
|
+
<div class="type-mono-sm">run-4711 · started 14:31:08 UTC · envelope_v1</div>
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
306
|
+
</section>
|
|
307
|
+
|
|
308
|
+
<!-- Spacing -->
|
|
309
|
+
<section class="section">
|
|
310
|
+
<div class="section-head">
|
|
311
|
+
<h2>Spacing & density</h2>
|
|
312
|
+
<span class="meta">8px base grid · per-product row densities (NEURON 22 / MERIDIAN 28)</span>
|
|
313
|
+
</div>
|
|
314
|
+
<div class="spacing-card">
|
|
315
|
+
<span class="type-label-sm">8px grid · 15 columns shown</span>
|
|
316
|
+
<div class="grid-ruler"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
|
|
317
|
+
|
|
318
|
+
<span class="type-label-sm" style="margin-top:8px; display:block">22px rows · NEURON-density (consoles, run metadata)</span>
|
|
319
|
+
<div class="row-demo" style="margin: 8px 0 18px">
|
|
320
|
+
<div class="row neuron-row"><span class="label">14:32:46</span><span>orchestrator.tool.complete</span></div>
|
|
321
|
+
<div class="row neuron-row"><span class="label">14:32:45</span><span>tool.photo_ocr.image 1/8 · confidence 0.97</span></div>
|
|
322
|
+
<div class="row neuron-row"><span class="label">14:32:44</span><span>tool.photo_ocr.image 2/8 · confidence 0.92</span></div>
|
|
323
|
+
</div>
|
|
324
|
+
|
|
325
|
+
<span class="type-label-sm" style="display:block">28px rows · MERIDIAN-density (ledgers, reviewer panels)</span>
|
|
326
|
+
<div class="row-demo" style="margin-top: 8px">
|
|
327
|
+
<div class="row meridian-row"><span class="label">14:32:18</span><span>consensus-agent · fee.authorized FE-2026-Q1-042</span></div>
|
|
328
|
+
<div class="row meridian-row"><span class="label">14:31:55</span><span>reviewer-c · review.approved · score 8.8</span></div>
|
|
329
|
+
<div class="row meridian-row"><span class="label">14:30:01</span><span>baseline-custodian · baseline.attested Q4 2025</span></div>
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
</section>
|
|
333
|
+
|
|
334
|
+
<!-- No-Line Rule -->
|
|
335
|
+
<section class="section">
|
|
336
|
+
<div class="section-head">
|
|
337
|
+
<h2>No-Line Rule</h2>
|
|
338
|
+
<span class="meta">tonal lift, not borders · 4% opacity shadow max</span>
|
|
339
|
+
</div>
|
|
340
|
+
<div class="no-line-grid">
|
|
341
|
+
<div class="no-line-good">
|
|
342
|
+
<h3>✓ Tonal lift (Level 1)</h3>
|
|
343
|
+
<p>White surface on cool-white base, subtle 4%-opacity shadow. The card feels like a sheet of paper resting on a stone surface.</p>
|
|
344
|
+
</div>
|
|
345
|
+
<div class="no-line-bad" style="opacity:0.6">
|
|
346
|
+
<h3>✗ 1px solid border</h3>
|
|
347
|
+
<p>Refused. Reads like a 2010-era admin panel. Use surface contrast + shadow instead.</p>
|
|
348
|
+
</div>
|
|
349
|
+
</div>
|
|
350
|
+
</section>
|
|
351
|
+
|
|
352
|
+
<!-- Motion -->
|
|
353
|
+
<section class="section">
|
|
354
|
+
<div class="section-head">
|
|
355
|
+
<h2>Motion</h2>
|
|
356
|
+
<span class="meta">calm vigilance · prefers-reduced-motion always honored</span>
|
|
357
|
+
</div>
|
|
358
|
+
<div class="motion-grid">
|
|
359
|
+
<div class="motion-card">
|
|
360
|
+
<div class="motion-pulse" aria-label="pulse"></div>
|
|
361
|
+
<div>
|
|
362
|
+
<div class="type-label-sm">Pulse · 1.4s · standard easing</div>
|
|
363
|
+
<div class="type-body-sm" style="color:var(--on-surface-muted); margin-top:6px">Active-step indicators, live status. Reduces to static dot when motion-reduced.</div>
|
|
364
|
+
</div>
|
|
365
|
+
</div>
|
|
366
|
+
<div class="motion-card">
|
|
367
|
+
<div class="motion-cursor" aria-label="cursor blink"></div>
|
|
368
|
+
<div>
|
|
369
|
+
<div class="type-label-sm">Blink · 1.1s · 2-step</div>
|
|
370
|
+
<div class="type-body-sm" style="color:var(--on-surface-muted); margin-top:6px">Console cursor at the tail of streaming agent output.</div>
|
|
371
|
+
</div>
|
|
372
|
+
</div>
|
|
373
|
+
<div class="motion-card">
|
|
374
|
+
<div class="motion-fade" aria-label="fade"></div>
|
|
375
|
+
<div>
|
|
376
|
+
<div class="type-label-sm">Fade · 3s · ease-in-out</div>
|
|
377
|
+
<div class="type-body-sm" style="color:var(--on-surface-muted); margin-top:6px">Surface transitions, breathing tonal shifts. Never bursts or rotations.</div>
|
|
378
|
+
</div>
|
|
379
|
+
</div>
|
|
380
|
+
</div>
|
|
381
|
+
</section>
|
|
382
|
+
|
|
383
|
+
<!-- Data-viz palette -->
|
|
384
|
+
<section class="section">
|
|
385
|
+
<div class="section-head">
|
|
386
|
+
<h2>Data-viz palette</h2>
|
|
387
|
+
<span class="meta">deltas + neutrals for in-product charts · the 5 accents appear ONLY in MERIDIAN's portfolio chart</span>
|
|
388
|
+
</div>
|
|
389
|
+
<div class="dv-card">
|
|
390
|
+
<span class="type-label-sm">Deltas</span>
|
|
391
|
+
<div class="dv-bars" style="margin-top: 12px">
|
|
392
|
+
<div class="dv-bar positive" style="height: 96px">+12%</div>
|
|
393
|
+
<div class="dv-bar positive" style="height: 72px">+8%</div>
|
|
394
|
+
<div class="dv-bar neutral" style="height: 48px">0%</div>
|
|
395
|
+
<div class="dv-bar negative" style="height: 60px">−6%</div>
|
|
396
|
+
<div class="dv-bar negative" style="height: 84px">−10%</div>
|
|
397
|
+
</div>
|
|
398
|
+
|
|
399
|
+
<div class="dv-portfolio">
|
|
400
|
+
<span class="type-label-sm">Cross-product portfolio chart (special permit — only place all 5 accents appear together)</span>
|
|
401
|
+
<div class="bar" style="margin-top: 10px">
|
|
402
|
+
<div style="width:12%; background:var(--prism)">12%</div>
|
|
403
|
+
<div style="width:46%; background:var(--neuron)">46%</div>
|
|
404
|
+
<div style="width:8%; background:var(--vault)"></div>
|
|
405
|
+
<div style="width:22%; background:var(--catalyst)">22%</div>
|
|
406
|
+
<div style="width:12%; background:var(--meridian)">12%</div>
|
|
407
|
+
</div>
|
|
408
|
+
<div style="display:flex; gap:18px; margin-top:10px; flex-wrap:wrap; font-family:var(--font-mono); font-size:12px; color:var(--on-surface-muted)">
|
|
409
|
+
<span><span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--prism);margin-right:6px"></span>PRISM 12%</span>
|
|
410
|
+
<span><span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--neuron);margin-right:6px"></span>NEURON 46%</span>
|
|
411
|
+
<span><span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--vault);margin-right:6px"></span>VAULT 8%</span>
|
|
412
|
+
<span><span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--catalyst);margin-right:6px"></span>CATALYST 22%</span>
|
|
413
|
+
<span><span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--meridian);margin-right:6px"></span>MERIDIAN 12%</span>
|
|
414
|
+
</div>
|
|
415
|
+
</div>
|
|
416
|
+
</div>
|
|
417
|
+
</section>
|
|
418
|
+
|
|
419
|
+
<!-- Icons -->
|
|
420
|
+
<section class="section">
|
|
421
|
+
<div class="section-head">
|
|
422
|
+
<h2>Iconography</h2>
|
|
423
|
+
<span class="meta">Lucide React · 24px · stroke 1.5 — arrives Phase 2 step 8</span>
|
|
424
|
+
</div>
|
|
425
|
+
<div class="icon-note">
|
|
426
|
+
<div class="icons">◾ ↗ ✓ ● ◐ ▲ ▼ ★ ✦</div>
|
|
427
|
+
<div class="text">
|
|
428
|
+
<div class="type-label-sm">Placeholders</div>
|
|
429
|
+
<div class="type-body-sm" style="margin-top: 6px; color: var(--on-surface-muted)">
|
|
430
|
+
Unicode glyphs in mockups are placeholders. Phase 2 step 8 replaces them with Lucide React components — 1500+ icons, MIT license, 24px / stroke 1.5 to match the engineered-precision ROUND_FOUR shape rules. Non-Lucide icons require a <code style="font-family:var(--font-mono); font-size: 13px; color:var(--meridian)">design-system-owner</code> PR.
|
|
431
|
+
</div>
|
|
432
|
+
</div>
|
|
433
|
+
</div>
|
|
434
|
+
</section>
|
|
435
|
+
|
|
436
|
+
<footer class="foot">
|
|
437
|
+
<strong>@newco-ai-platform/ui</strong> v0.1.0 · Luminous Multi-Signal · staged for npm publish ·
|
|
438
|
+
See <a href="../../../DESIGN.md">platform/DESIGN.md</a> for the full spec.
|
|
439
|
+
Hard rules: one accent per product · no 1px borders for sectioning · body ≥ 14px on data ·
|
|
440
|
+
kill switches use product accent (never red) · <code style="font-family:var(--font-mono); font-size:11px">prefers-reduced-motion</code> always honored.
|
|
441
|
+
</footer>
|
|
442
|
+
|
|
443
|
+
</div>
|
|
444
|
+
|
|
445
|
+
<script>
|
|
446
|
+
function toggleTheme() {
|
|
447
|
+
const html = document.documentElement;
|
|
448
|
+
const current = html.getAttribute('data-theme') || 'light';
|
|
449
|
+
const next = current === 'light' ? 'dark' : 'light';
|
|
450
|
+
html.setAttribute('data-theme', next);
|
|
451
|
+
// Update the hex labels to match the now-active theme. The CSS variables
|
|
452
|
+
// already swap; this just keeps the printed text honest.
|
|
453
|
+
const labels = {
|
|
454
|
+
light: { surface: '#f7f9ff', card: '#ffffff', tint: '#edf4ff', on: '#0c1d2c', muted: '#5b6b7d', dim: '#8893a3' },
|
|
455
|
+
dark: { surface: '#0F1219', card: '#161B26', tint: '#1A2030', on: '#dce2f3', muted: '#8B92A1', dim: '#5F6878' },
|
|
456
|
+
};
|
|
457
|
+
const t = labels[next];
|
|
458
|
+
document.getElementById('hex-surface').textContent = t.surface;
|
|
459
|
+
document.getElementById('hex-card').textContent = t.card;
|
|
460
|
+
document.getElementById('hex-tint').textContent = t.tint;
|
|
461
|
+
document.getElementById('hex-on').textContent = t.on;
|
|
462
|
+
document.getElementById('hex-muted').textContent = t.muted;
|
|
463
|
+
document.getElementById('hex-dim').textContent = t.dim;
|
|
464
|
+
}
|
|
465
|
+
</script>
|
|
466
|
+
|
|
467
|
+
</body>
|
|
468
|
+
</html>
|