@nurix/etna 0.18.20 → 0.18.22

package/data/harnesses/code/skills/design/data/design-tokens/spotify/design.tokens.json

@@ -0,0 +1,974 @@
+{
+  "$description": "Spotify — the near-black operator reading\n[verbosity] derived: content-first, scannable — Spotify trusts dense content over explanatory chrome\n[density-tier] corpus: content density over breathing room, dark compression\n[color-tokens.light] categorically-dark brand — the default slot carries Spotify's near-black surface set; the corpus forbids light primary surfaces",
+  "$extensions": {
+    "com.nurix.design": {
+      "schema": "design-tokens/v1",
+      "dtcg": "2025.10",
+      "product": "Spotify",
+      "provenance": "library",
+      "sourced": "2026-07-04",
+      "product-traits": [
+        "media-library",
+        "catalog",
+        "dashboard",
+        "content-ops",
+        "admin"
+      ],
+      "verbosity": "compact",
+      "feedback": "subtle",
+      "density-tier": "dense",
+      "lever-manifest": {
+        "spacing-scale": [
+          2,
+          4,
+          8,
+          12,
+          16,
+          20,
+          24,
+          32,
+          48
+        ],
+        "radius-scale": [
+          4,
+          6,
+          8,
+          12,
+          9999
+        ],
+        "shadow-levels": [
+          "none",
+          "sm",
+          "md",
+          "lg"
+        ],
+        "motion": {
+          "durations": [
+            100,
+            150,
+            250
+          ],
+          "easings": [
+            "cubic-bezier(0.4,0,0.2,1)"
+          ]
+        },
+        "icons": {
+          "family": "lucide"
+        },
+        "accent-count": 1
+      }
+    }
+  },
+  "primitive": {
+    "radius": {
+      "$type": "dimension",
+      "$value": {
+        "value": 8,
+        "unit": "px"
+      },
+      "$description": "corpus: Spotify's comfortable/dialog radius; controls read rounded-tactile without the 500px hero pill (left behind)"
+    },
+    "shadow-intensity": {
+      "$type": "number",
+      "$value": 0.8,
+      "$description": "corpus: depth is heavy shadow (0.3-0.5 alpha at 8-24px) — on near-black a hairline vanishes, so shadow lifts; the flat default is inverted here"
+    },
+    "border-weight": {
+      "$type": "dimension",
+      "$value": {
+        "value": 1,
+        "unit": "px"
+      }
+    },
+    "density-gap": {
+      "$type": "number",
+      "$value": 0.85,
+      "$description": "derived: dark-compression — Spotify packs content densely, gaps and rows tighten"
+    },
+    "density-inset": {
+      "$type": "number",
+      "$value": 0.85,
+      "$description": "derived: matches the dense tier's tighter component insets"
+    },
+    "font-sans": {
+      "$type": "fontFamily",
+      "$value": [
+        "SpotifyMixUI",
+        "Inter",
+        "system-ui",
+        "sans-serif"
+      ],
+      "$description": "SpotifyMixUI (Circular family); Inter is the corpus-adjacent substitute; the Title cut serves headings, same family",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "SpotifyMixUI, Inter, system-ui, sans-serif"
+        }
+      }
+    },
+    "font-mono": {
+      "$type": "fontFamily",
+      "$value": [
+        "JetBrains Mono",
+        "ui-monospace",
+        "monospace"
+      ],
+      "$description": "derived: corpus names no mono (a player has no IDs/logs); operator tables need a numeric voice",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "JetBrains Mono, ui-monospace, monospace"
+        }
+      }
+    },
+    "font-weight-normal": {
+      "$type": "fontWeight",
+      "$value": 400,
+      "$description": "corpus: regular is 400"
+    },
+    "font-weight-strong": {
+      "$type": "fontWeight",
+      "$value": 700,
+      "$description": "corpus: the bold/regular binary — most text is 700 or 400, 600 sparingly"
+    },
+    "heading-tracking": {
+      "$type": "number",
+      "$value": 0,
+      "$description": "corpus: Spotify titles track normal; the wide 1.4-2px tracking rides the uppercase label voice, not headings",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "0"
+        }
+      }
+    },
+    "duration-unit": {
+      "$type": "duration",
+      "$value": {
+        "value": 50,
+        "unit": "ms"
+      },
+      "$description": "derived: corpus silent on motion; functional operator base"
+    },
+    "duration-fast": {
+      "$type": "duration",
+      "$value": {
+        "value": 100,
+        "unit": "ms"
+      },
+      "$description": "derived: corpus silent on motion"
+    },
+    "duration-normal": {
+      "$type": "duration",
+      "$value": {
+        "value": 150,
+        "unit": "ms"
+      },
+      "$description": "derived: corpus silent on motion"
+    },
+    "duration-slow": {
+      "$type": "duration",
+      "$value": {
+        "value": 250,
+        "unit": "ms"
+      },
+      "$description": "derived: corpus silent on motion"
+    },
+    "ease-default": {
+      "$type": "cubicBezier",
+      "$value": [
+        0.4,
+        0,
+        0.2,
+        1
+      ],
+      "$description": "derived: corpus silent; standard functional ease",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "cubic-bezier(0.4,0,0.2,1)"
+        }
+      }
+    },
+    "contrast-boost": {
+      "$type": "number",
+      "$value": 1,
+      "$description": "derived: the grid reads via surface-lightening and shadow, not boosted hairlines"
+    },
+    "icon-stroke": {
+      "$type": "number",
+      "$value": 2,
+      "$description": "derived: Spotify's filled, bold glyph character → the full lucide stroke, not the refined 1.75"
+    },
+    "icon-size-base": {
+      "$type": "dimension",
+      "$value": {
+        "value": 16,
+        "unit": "px"
+      },
+      "$description": "derived: corpus silent; operator base control-icon size"
+    },
+    "sidebar-width-expanded": {
+      "$type": "dimension",
+      "$value": {
+        "value": 256,
+        "unit": "px"
+      },
+      "$description": "derived: a media-library rail wants room for playlist/entity names; a touch wider than the dense 248 default"
+    },
+    "sidebar-width-collapsed": {
+      "$type": "dimension",
+      "$value": {
+        "value": 56,
+        "unit": "px"
+      },
+      "$description": "derived: corpus silent; operator icon rail"
+    },
+    "topbar-height": {
+      "$type": "dimension",
+      "$value": {
+        "value": 64,
+        "unit": "px"
+      },
+      "$description": "derived: Spotify's top chrome is generous for the search pill and account"
+    },
+    "side-panel-width": {
+      "$type": "dimension",
+      "$value": {
+        "value": 420,
+        "unit": "px"
+      },
+      "$description": "derived: corpus's now-playing/queue panel; operator standard"
+    },
+    "side-panel-width-rich": {
+      "$type": "dimension",
+      "$value": {
+        "value": 640,
+        "unit": "px"
+      },
+      "$description": "derived: content-heavy detail width"
+    },
+    "modal-width-max": {
+      "$type": "dimension",
+      "$value": {
+        "value": 560,
+        "unit": "px"
+      },
+      "$description": "derived: corpus silent; confirmations only"
+    },
+    "form-max-width": {
+      "$type": "dimension",
+      "$value": {
+        "value": 640,
+        "unit": "px"
+      },
+      "$description": "derived: corpus silent; operator standard"
+    },
+    "table-row-height": {
+      "$type": "dimension",
+      "$value": {
+        "value": 40,
+        "unit": "px"
+      },
+      "$description": "derived: Spotify's album-thumbnail track rows run taller (~56px); a bare operator data row lands at 40px, dense archetypes step down"
+    }
+  },
+  "color": {
+    "background": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.07059,
+          0.07059,
+          0.07059
+        ],
+        "hex": "#121212"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#121212"
+        }
+      }
+    },
+    "foreground": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          1,
+          1
+        ],
+        "hex": "#ffffff"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#ffffff"
+        }
+      }
+    },
+    "card": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.09412,
+          0.09412,
+          0.09412
+        ],
+        "hex": "#181818"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#181818"
+        }
+      }
+    },
+    "card-foreground": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          1,
+          1
+        ],
+        "hex": "#ffffff"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#ffffff"
+        }
+      }
+    },
+    "muted": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.12157,
+          0.12157,
+          0.12157
+        ],
+        "hex": "#1f1f1f"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#1f1f1f"
+        }
+      }
+    },
+    "muted-foreground": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.70196,
+          0.70196,
+          0.70196
+        ],
+        "hex": "#b3b3b3"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#b3b3b3"
+        }
+      }
+    },
+    "border": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.16471,
+          0.16471,
+          0.16471
+        ],
+        "hex": "#2a2a2a"
+      },
+      "$description": "derived: subtle grid/field hairline on near-black; corpus reserves #4d4d4d for control borders and prefers inset/surface-lightening over exposed lines",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#2a2a2a"
+        }
+      }
+    },
+    "input": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.16471,
+          0.16471,
+          0.16471
+        ],
+        "hex": "#2a2a2a"
+      },
+      "$description": "derived: field edge; input focus draws the ring",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#2a2a2a"
+        }
+      }
+    },
+    "ring": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.11765,
+          0.84314,
+          0.37647
+        ],
+        "hex": "#1ed760"
+      },
+      "$description": "derived: keyboard-first needs a visible ring; the accent green is the natural choice (corpus's #000000 focus edge fails the ring-visible floor)",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#1ed760"
+        }
+      }
+    },
+    "primary": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.11765,
+          0.84314,
+          0.37647
+        ],
+        "hex": "#1ed760"
+      },
+      "$description": "corpus: Spotify Green — the one accent",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#1ed760"
+        }
+      }
+    },
+    "primary-foreground": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0,
+          0
+        ],
+        "hex": "#000000"
+      },
+      "$description": "corpus: black icon/text on green — the signature, never white on green",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#000000"
+        }
+      }
+    },
+    "accent": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.15686,
+          0.15686,
+          0.15686
+        ],
+        "hex": "#282828"
+      },
+      "$description": "derived: selection/hover lightens the surface a step (corpus hover = background lightening), a neutral lift, never a green wash",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#282828"
+        }
+      }
+    },
+    "accent-foreground": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          1,
+          1
+        ],
+        "hex": "#ffffff"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#ffffff"
+        }
+      }
+    },
+    "destructive": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.95294,
+          0.44706,
+          0.49804
+        ],
+        "hex": "#f3727f"
+      },
+      "$description": "corpus: negative red (--text-negative)",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#f3727f"
+        }
+      }
+    },
+    "destructive-foreground": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0,
+          0
+        ],
+        "hex": "#000000"
+      },
+      "$description": "derived: black reads on the light coral-red; white on #f3727f fails contrast",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#000000"
+        }
+      }
+    },
+    "success": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.11373,
+          0.72549,
+          0.32941
+        ],
+        "hex": "#1db954"
+      },
+      "$description": "corpus: the deeper green-border variant, distinct from the bright #1ed760 accent so status green does not read as the primary CTA",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#1db954"
+        }
+      }
+    },
+    "warning": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          0.64314,
+          0.16863
+        ],
+        "hex": "#ffa42b"
+      },
+      "$description": "corpus: warning orange (--text-warning)",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#ffa42b"
+        }
+      }
+    },
+    "popover": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.15686,
+          0.15686,
+          0.15686
+        ],
+        "hex": "#282828"
+      },
+      "$description": "derived: elevated overlay/menu surface, a step above card, lifted by heavy shadow",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#282828"
+        }
+      }
+    },
+    "popover-foreground": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          1,
+          1
+        ],
+        "hex": "#ffffff"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#ffffff"
+        }
+      }
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.12157,
+          0.12157,
+          0.12157
+        ],
+        "hex": "#1f1f1f"
+      },
+      "$description": "corpus: interactive/button surface (#1f1f1f)",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#1f1f1f"
+        }
+      }
+    },
+    "secondary-foreground": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          1,
+          1
+        ],
+        "hex": "#ffffff"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#ffffff"
+        }
+      }
+    },
+    "chart-1": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.11765,
+          0.84314,
+          0.37647
+        ],
+        "hex": "#1ed760"
+      },
+      "$description": "green",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#1ed760"
+        }
+      }
+    },
+    "chart-2": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.32549,
+          0.61569,
+          0.96078
+        ],
+        "hex": "#539df5"
+      },
+      "$description": "corpus: announcement blue",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#539df5"
+        }
+      }
+    },
+    "chart-3": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          0.64314,
+          0.16863
+        ],
+        "hex": "#ffa42b"
+      },
+      "$description": "corpus: warning orange",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#ffa42b"
+        }
+      }
+    },
+    "chart-4": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.95294,
+          0.44706,
+          0.49804
+        ],
+        "hex": "#f3727f"
+      },
+      "$description": "corpus: negative red",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#f3727f"
+        }
+      }
+    },
+    "chart-5": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.70196,
+          0.70196,
+          0.70196
+        ],
+        "hex": "#b3b3b3"
+      },
+      "$description": "derived: silver neutral for the fifth series (green + achromatic palette — no purple)",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#b3b3b3"
+        }
+      }
+    },
+    "sidebar": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.07059,
+          0.07059,
+          0.07059
+        ],
+        "hex": "#121212"
+      },
+      "$description": "corpus: navigation sidebar #121212",
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#121212"
+        }
+      }
+    },
+    "sidebar-foreground": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          1,
+          1
+        ],
+        "hex": "#ffffff"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#ffffff"
+        }
+      }
+    },
+    "sidebar-primary": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.11765,
+          0.84314,
+          0.37647
+        ],
+        "hex": "#1ed760"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#1ed760"
+        }
+      }
+    },
+    "sidebar-primary-foreground": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0,
+          0
+        ],
+        "hex": "#000000"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#000000"
+        }
+      }
+    },
+    "sidebar-accent": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.15686,
+          0.15686,
+          0.15686
+        ],
+        "hex": "#282828"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#282828"
+        }
+      }
+    },
+    "sidebar-accent-foreground": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          1,
+          1
+        ],
+        "hex": "#ffffff"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#ffffff"
+        }
+      }
+    },
+    "sidebar-border": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.16471,
+          0.16471,
+          0.16471
+        ],
+        "hex": "#2a2a2a"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#2a2a2a"
+        }
+      }
+    },
+    "sidebar-ring": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.11765,
+          0.84314,
+          0.37647
+        ],
+        "hex": "#1ed760"
+      },
+      "$extensions": {
+        "com.nurix.design": {
+          "css": "#1ed760"
+        }
+      }
+    }
+  },
+  "typography": {
+    "family": {
+      "heading": {
+        "$type": "fontFamily",
+        "$value": "{primitive.font-sans}"
+      },
+      "body": {
+        "$type": "fontFamily",
+        "$value": "{primitive.font-sans}"
+      },
+      "mono": {
+        "$type": "fontFamily",
+        "$value": "{primitive.font-mono}"
+      }
+    },
+    "ramp": {
+      "h1": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "{typography.family.heading}",
+          "fontSize": {
+            "value": 24,
+            "unit": "px"
+          },
+          "lineHeight": 1.25,
+          "fontWeight": "{primitive.font-weight-strong}",
+          "letterSpacing": 0
+        }
+      },
+      "h2": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "{typography.family.heading}",
+          "fontSize": {
+            "value": 18,
+            "unit": "px"
+          },
+          "lineHeight": 1.3,
+          "fontWeight": "{primitive.font-weight-strong}",
+          "letterSpacing": 0
+        }
+      },
+      "h3": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "{typography.family.heading}",
+          "fontSize": {
+            "value": 16,
+            "unit": "px"
+          },
+          "lineHeight": 1.4,
+          "fontWeight": "{primitive.font-weight-strong}",
+          "letterSpacing": 0
+        }
+      },
+      "body": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "{typography.family.body}",
+          "fontSize": {
+            "value": 14,
+            "unit": "px"
+          },
+          "lineHeight": 1.45,
+          "fontWeight": "{primitive.font-weight-normal}",
+          "letterSpacing": 0
+        }
+      },
+      "small": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "{typography.family.body}",
+          "fontSize": {
+            "value": 12,
+            "unit": "px"
+          },
+          "lineHeight": 1.5,
+          "fontWeight": "{primitive.font-weight-normal}",
+          "letterSpacing": 0
+        }
+      },
+      "caption": {
+        "$type": "typography",
+        "$value": {
+          "fontFamily": "{typography.family.body}",
+          "fontSize": {
+            "value": 12,
+            "unit": "px"
+          },
+          "lineHeight": 1.33,
+          "fontWeight": "{primitive.font-weight-strong}",
+          "letterSpacing": 0.1
+        },
+        "$description": "uppercase eyebrow",
+        "$extensions": {
+          "com.nurix.design": {
+            "css": {
+              "letterSpacing": "+0.1em"
+            }
+          }
+        }
+      }
+    }
+  }
+}