@nadicodeai/design-system 0.5.2 → 0.5.3

package/DESIGN.md

@@ -104,6 +104,14 @@ colors:
   chart-4: "#cd212a"
   chart-5: "#00838f"
   chart-6: "#6f42c1"
+  chart-seq-1: "#7d99f2"
+  chart-seq-2: "#4f6ae6"
+  chart-seq-3: "#2743d8"
+  chart-seq-4: "#1d33ad"
+  chart-seq-5: "#16277f"
+  chart-div-warm: "#d98800"
+  chart-div-mid: "#8f8f8f"
+  chart-div-cool: "#7d99f2"
   dark-canvas: "#0a0a0a"
   dark-canvas-soft: "#171717"
   dark-canvas-soft-2: "#262626"
@@ -142,6 +150,14 @@ colors:
   dark-chart-4: "#f28085"
   dark-chart-5: "#33d1cb"
   dark-chart-6: "#9575cd"
+  dark-chart-seq-1: "#4f6ae6"
+  dark-chart-seq-2: "#7d99f2"
+  dark-chart-seq-3: "#a9befa"
+  dark-chart-seq-4: "#cdd9fd"
+  dark-chart-seq-5: "#eef2ff"
+  dark-chart-div-warm: "#ffd97d"
+  dark-chart-div-mid: "#e6e6e6"
+  dark-chart-div-cool: "#cdd9fd"
 
 typography:
   display-xl:
@@ -523,6 +539,37 @@ This grayscale-only discipline is not dark-specific: it governs the whole genera
 
 Do not delete a color because the current website kernel does not consume it. Prototype usage is not palette authority; removals require an explicit palette migration decision.
 
+## Data Visualization
+
+### Entity-color assignment
+
+- **Entity-color assignment**: categorical hues (`{colors.chart-1}`…`{colors.chart-6}`) assign in fixed order to entities per page context, and the assignment follows the entity identity, never rank, sort position, or array index. One assignment map exists per surface; a filter or re-sort never repaints the entities that remain on screen. Beyond six entities, fold the tail into a single neutral "other" slot (`{colors.muted}` register), never a seventh hue.
+
+### Sequential ramp and diverging pair
+
+- **Sequential ramp** (`{colors.chart-seq-1}`…`{colors.chart-seq-5}`, light→dark on the `blue-cobalto` scale: `chart-seq-1` on `blue-cobalto-500`, `chart-seq-2` on `blue-cobalto-600`, `chart-seq-3` on `blue-cobalto-700`, `chart-seq-4` on `blue-cobalto-800`, `chart-seq-5` on `blue-cobalto-900`): ordered magnitude on one hue, never nominal categories, never a rainbow. `{colors.dark-chart-seq-1}`…`{colors.dark-chart-seq-5}` remap in the `.dark` scope like the categorical set, anchor flipped so `dark-chart-seq-1` is the dimmest step (`blue-cobalto-600`) and `dark-chart-seq-5` the brightest (`blue-cobalto-100`), each clearing the 3:1 WCAG 1.4.11 data-mark floor against `{colors.dark-canvas}`.
+- **Diverging pair** (`{colors.chart-div-warm}` on `amber-700`, `{colors.chart-div-mid}` on `gray-700`, `{colors.chart-div-cool}` on `blue-cobalto-500`; dark counterparts `{colors.dark-chart-div-warm}` on `amber-400`, `{colors.dark-chart-div-mid}` on `gray-300`, `{colors.dark-chart-div-cool}` on `blue-cobalto-300`, remapped in the `.dark` scope the same way): the warm and cool poles carry the sign, the neutral midpoint never carries hue. Meter tracks use a lighter step of the same ramp as their fill.
+
+### Meter and bullet grammar
+
+- **Meter and bullet grammar**: cap and included-usage bars carry a positional threshold tick at the product-configured warning fraction (80% is the common default; the fraction is a consumer input, never a constant of this contract) and a cap tick at 100%. Overflow renders as a distinct segment continuing past the cap tick, never clamped away. Severity state tokens (`{colors.state-*}`) reinforce position, never act as the sole signal. The current value reads at the bar tip. Every meter carries an accessible name, and its `aria` values clamp to the meter maximum.
+
+### Mark specs
+
+- **Mark specs**: bars and columns run at most 24px thick with 4px rounded data-ends anchored square at the baseline. Stacked segments and adjacent marks keep a 2px surface gap, one consistent gap width per chart. Lines run at least 2px with round joins and caps; point markers run at least 8px with a 2px surface ring. Area fills read as a light wash (roughly 10% opacity) under a full-strength line. Gridlines and axes are recessive 1px solid hairlines one step off the surface, never dashed. Chart text always carries ink tokens (`{colors.ink}`, `{colors.muted}`), never the series color. Marks render in real pixel space; a chart never scales its viewBox non-uniformly.
+
+### Delta and trend encoding
+
+- **Delta and trend encoding**: a change reads as a direction glyph (▲ ▼) plus a tone token, never bare signed text and never color alone. Tone follows direction crossed with whether up is good in that context. Sparklines normalize against a meaningful baseline, never the visible min-max span alone.
+
+### Legends and labels
+
+- **Legends and labels**: at two or more series, every series is identified — up to four series prefer direct labels, which then replace the legend; beyond four, or whenever direct labels are not feasible, a legend is required (ink-token text beside a color swatch; text never wears the series color). A single series is titled, not legended. Every chart names a table alternative. Tooltips enhance a chart and never gate a value.
+
+### Texture fallback
+
+- **Texture fallback**: under forced-colors, print, or an accessibility setting, series distinguish by one directional line texture at 45 or 135 degrees (tone-on-tone, a darker step of the fill's own ramp), ordered with magnitude on value scales, with the arm angle carrying the diverging sign. Texture is never on by default. The two brand-locked categorical pairs (`chart-2`/`chart-4`, `chart-1`/`chart-6`) always require redundant encoding, never hue alone, restating the Chart categoricals distinguishability rule.
+
 ## Typography
 
 Geist Sans carries all narrative and interface copy. Geist Mono is reserved for eyebrows, labels, status tags, code, traces, and small technical metadata.

package/dist/css/tokens.generated.css

@@ -101,6 +101,14 @@
   --nc-chart-4: #cd212a;
   --nc-chart-5: #00838f;
   --nc-chart-6: #6f42c1;
+  --nc-chart-seq-1: #7d99f2;
+  --nc-chart-seq-2: #4f6ae6;
+  --nc-chart-seq-3: #2743d8;
+  --nc-chart-seq-4: #1d33ad;
+  --nc-chart-seq-5: #16277f;
+  --nc-chart-div-warm: #d98800;
+  --nc-chart-div-mid: #8f8f8f;
+  --nc-chart-div-cool: #7d99f2;
   --nc-dark-canvas: #0a0a0a;
   --nc-dark-canvas-soft: #171717;
   --nc-dark-canvas-soft-2: #262626;
@@ -139,6 +147,14 @@
   --nc-dark-chart-4: #f28085;
   --nc-dark-chart-5: #33d1cb;
   --nc-dark-chart-6: #9575cd;
+  --nc-dark-chart-seq-1: #4f6ae6;
+  --nc-dark-chart-seq-2: #7d99f2;
+  --nc-dark-chart-seq-3: #a9befa;
+  --nc-dark-chart-seq-4: #cdd9fd;
+  --nc-dark-chart-seq-5: #eef2ff;
+  --nc-dark-chart-div-warm: #ffd97d;
+  --nc-dark-chart-div-mid: #e6e6e6;
+  --nc-dark-chart-div-cool: #cdd9fd;
 
   /* Spacing */
   --nc-xxs: 4px;

package/dist/tailwind/nadicode.tailwind.json

@@ -98,6 +98,14 @@
         "chart-4": "#cd212a",
         "chart-5": "#00838f",
         "chart-6": "#6f42c1",
+        "chart-seq-1": "#7d99f2",
+        "chart-seq-2": "#4f6ae6",
+        "chart-seq-3": "#2743d8",
+        "chart-seq-4": "#1d33ad",
+        "chart-seq-5": "#16277f",
+        "chart-div-warm": "#d98800",
+        "chart-div-mid": "#8f8f8f",
+        "chart-div-cool": "#7d99f2",
         "dark-canvas": "#0a0a0a",
         "dark-canvas-soft": "#171717",
         "dark-canvas-soft-2": "#262626",
@@ -135,7 +143,15 @@
         "dark-chart-3": "#ffd97d",
         "dark-chart-4": "#f28085",
         "dark-chart-5": "#33d1cb",
-        "dark-chart-6": "#9575cd"
+        "dark-chart-6": "#9575cd",
+        "dark-chart-seq-1": "#4f6ae6",
+        "dark-chart-seq-2": "#7d99f2",
+        "dark-chart-seq-3": "#a9befa",
+        "dark-chart-seq-4": "#cdd9fd",
+        "dark-chart-seq-5": "#eef2ff",
+        "dark-chart-div-warm": "#ffd97d",
+        "dark-chart-div-mid": "#e6e6e6",
+        "dark-chart-div-cool": "#cdd9fd"
       },
       "fontFamily": {
         "display-xl": [

package/dist/tailwind/nadicode.theme.css

@@ -89,6 +89,14 @@
   --nc-chart-4: var(--nc-dark-chart-4);
   --nc-chart-5: var(--nc-dark-chart-5);
   --nc-chart-6: var(--nc-dark-chart-6);
+  --nc-chart-seq-1: var(--nc-dark-chart-seq-1);
+  --nc-chart-seq-2: var(--nc-dark-chart-seq-2);
+  --nc-chart-seq-3: var(--nc-dark-chart-seq-3);
+  --nc-chart-seq-4: var(--nc-dark-chart-seq-4);
+  --nc-chart-seq-5: var(--nc-dark-chart-seq-5);
+  --nc-chart-div-warm: var(--nc-dark-chart-div-warm);
+  --nc-chart-div-mid: var(--nc-dark-chart-div-mid);
+  --nc-chart-div-cool: var(--nc-dark-chart-div-cool);
 }
 
 :root {
@@ -252,6 +260,14 @@
   --color-chart-4: #cd212a;
   --color-chart-5: #00838f;
   --color-chart-6: #6f42c1;
+  --color-chart-seq-1: #7d99f2;
+  --color-chart-seq-2: #4f6ae6;
+  --color-chart-seq-3: #2743d8;
+  --color-chart-seq-4: #1d33ad;
+  --color-chart-seq-5: #16277f;
+  --color-chart-div-warm: #d98800;
+  --color-chart-div-mid: #8f8f8f;
+  --color-chart-div-cool: #7d99f2;
   --color-dark-canvas: #0a0a0a;
   --color-dark-canvas-soft: #171717;
   --color-dark-canvas-soft-2: #262626;
@@ -290,6 +306,14 @@
   --color-dark-chart-4: #f28085;
   --color-dark-chart-5: #33d1cb;
   --color-dark-chart-6: #9575cd;
+  --color-dark-chart-seq-1: #4f6ae6;
+  --color-dark-chart-seq-2: #7d99f2;
+  --color-dark-chart-seq-3: #a9befa;
+  --color-dark-chart-seq-4: #cdd9fd;
+  --color-dark-chart-seq-5: #eef2ff;
+  --color-dark-chart-div-warm: #ffd97d;
+  --color-dark-chart-div-mid: #e6e6e6;
+  --color-dark-chart-div-cool: #cdd9fd;
   --color-nadicode-muted: #888888;
   --color-nadicode-primary: #008c45;
   --color-nadicode-chart-1: #2743d8;

package/dist/tokens/nadicode.dtcg.json

@@ -1060,6 +1060,94 @@
           "hex": "#6f42c1"
         }
       },
+      "chart-seq-1": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.49,
+            0.6,
+            0.949
+          ],
+          "hex": "#7d99f2"
+        }
+      },
+      "chart-seq-2": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.31,
+            0.416,
+            0.902
+          ],
+          "hex": "#4f6ae6"
+        }
+      },
+      "chart-seq-3": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.153,
+            0.263,
+            0.847
+          ],
+          "hex": "#2743d8"
+        }
+      },
+      "chart-seq-4": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.114,
+            0.2,
+            0.678
+          ],
+          "hex": "#1d33ad"
+        }
+      },
+      "chart-seq-5": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.086,
+            0.153,
+            0.498
+          ],
+          "hex": "#16277f"
+        }
+      },
+      "chart-div-warm": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.851,
+            0.533,
+            0
+          ],
+          "hex": "#d98800"
+        }
+      },
+      "chart-div-mid": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.561,
+            0.561,
+            0.561
+          ],
+          "hex": "#8f8f8f"
+        }
+      },
+      "chart-div-cool": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.49,
+            0.6,
+            0.949
+          ],
+          "hex": "#7d99f2"
+        }
+      },
       "dark-canvas": {
         "$value": {
           "colorSpace": "srgb",
@@ -1477,6 +1565,94 @@
           ],
           "hex": "#9575cd"
         }
+      },
+      "dark-chart-seq-1": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.31,
+            0.416,
+            0.902
+          ],
+          "hex": "#4f6ae6"
+        }
+      },
+      "dark-chart-seq-2": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.49,
+            0.6,
+            0.949
+          ],
+          "hex": "#7d99f2"
+        }
+      },
+      "dark-chart-seq-3": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.663,
+            0.745,
+            0.98
+          ],
+          "hex": "#a9befa"
+        }
+      },
+      "dark-chart-seq-4": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.804,
+            0.851,
+            0.992
+          ],
+          "hex": "#cdd9fd"
+        }
+      },
+      "dark-chart-seq-5": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.933,
+            0.949,
+            1
+          ],
+          "hex": "#eef2ff"
+        }
+      },
+      "dark-chart-div-warm": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            1,
+            0.851,
+            0.49
+          ],
+          "hex": "#ffd97d"
+        }
+      },
+      "dark-chart-div-mid": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.902,
+            0.902,
+            0.902
+          ],
+          "hex": "#e6e6e6"
+        }
+      },
+      "dark-chart-div-cool": {
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [
+            0.804,
+            0.851,
+            0.992
+          ],
+          "hex": "#cdd9fd"
+        }
       }
     },
     "spacing": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nadicodeai/design-system",
-  "version": "0.5.2",
+  "version": "0.5.3",
   "type": "module",
   "publishConfig": {
     "access": "public"