@opendirectory.dev/skills 0.1.58 → 0.1.60

package/skills/graphic-chart/references/chart-library.md

@@ -0,0 +1,487 @@
+# Chart Library — graphic-chart (ECharts v6)
+
+8 chart types with full Apache ECharts v6 config specs. Read this before generating HTML in Step 3.
+
+CDN:
+```html
+<script src="https://cdn.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js"></script>
+```
+
+**No plugins needed.** ECharts v6 has built-in data labels, annotations (markPoint/markLine/markArea), and all chart types. No separate CDN scripts.
+
+---
+
+## Universal Init Pattern (apply to ALL chart types)
+
+```javascript
+window.__chartReady = false;
+
+document.fonts.ready.then(() => {
+  const chart = echarts.init(document.getElementById('chart'), null, { renderer: 'canvas' });
+
+  // CRITICAL: register BEFORE setOption — ECharts bug #14101/#17500
+  chart.on('finished', () => { window.__chartReady = true; });
+  chart.on('rendered', () => {
+    clearTimeout(window.__renderDebounce);
+    window.__renderDebounce = setTimeout(() => { window.__chartReady = true; }, 100);
+  });
+
+  const option = {
+    animation: false,            // instant render for Playwright screenshot
+    backgroundColor: 'transparent',
+    // ... chart-specific config
+  };
+
+  chart.setOption(option);       // ALWAYS last
+});
+```
+
+---
+
+## ECharts Structure vs Chart.js (LLM trap — read this)
+
+| Concept | Chart.js | ECharts |
+|---|---|---|
+| Chart structure | `{ type, data: {labels, datasets}, options }` | **Flat:** `{ xAxis, yAxis, series, grid, title, legend }` |
+| Category labels | `data.labels: ['Q1','Q2']` | `xAxis: { type: 'category', data: ['Q1','Q2'] }` |
+| Series data | `datasets: [{ data: [...] }]` | `series: [{ type: 'bar', data: [...] }]` |
+| Highlight bar | `backgroundColor: array` | `data: [{ value: N, itemStyle: { color } }]` per item |
+| Doughnut | `type: 'doughnut'` | `type: 'pie'` + `radius: ['40%','70%']` |
+| Area | `fill: 'origin'` | `areaStyle: {}` on series |
+| Data labels | `chartjs-plugin-datalabels` (external) | `label: { show: true }` built into every series |
+
+---
+
+## 1. bar
+
+```javascript
+{
+  animation: false,
+  backgroundColor: 'transparent',
+  grid: {
+    left: '8%', right: '8%', top: 80, bottom: 60,
+    containLabel: true,
+  },
+  xAxis: {
+    type: 'category',                // REQUIRED — not inferred
+    data: ['Q1', 'Q2', 'Q3', 'Q4'],
+    axisLine: { lineStyle: { color: 'rgba(255,255,255,0.15)' } },
+    axisTick: { show: false },
+    axisLabel: {
+      color: 'var(--text-muted)',
+      fontFamily: 'var(--font-body)',
+      fontSize: 14,
+    },
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: { lineStyle: { color: 'rgba(255,255,255,0.07)' } },
+    axisLabel: {
+      color: 'var(--text-muted)',
+      fontFamily: 'var(--font-body)',
+      fontSize: 12,
+      formatter: (v) => '$' + v + 'k',   // customize per data
+    },
+  },
+  series: [{
+    type: 'bar',
+    name: 'Revenue',
+    barMaxWidth: 72,
+    itemStyle: {
+      color: palette[0],
+      borderRadius: [4, 4, 0, 0],          // rounded top corners
+    },
+    // Highlight one bar — per-item override
+    data: [
+      { value: 420, itemStyle: { color: palette[1], borderRadius: [4,4,0,0] } },
+      { value: 510, itemStyle: { color: palette[1], borderRadius: [4,4,0,0] } },
+      { value: 480, itemStyle: { color: palette[1], borderRadius: [4,4,0,0] } },
+      { value: 780, itemStyle: { color: palette[0], borderRadius: [4,4,0,0] } },  // highlighted
+    ],
+    // Built-in data label — no plugin
+    label: {
+      show: false,                          // set true to show value on bar
+      position: 'top',
+      formatter: '{c}',
+      color: 'var(--text)',
+      fontFamily: 'var(--font-body)',
+      fontSize: 13,
+    },
+    // Highlight annotation — label above bar with callout
+    markPoint: {
+      symbol: 'pin',
+      symbolSize: 0,                        // hide symbol, show label only
+      label: {
+        show: true,
+        formatter: '$780k',
+        backgroundColor: palette[0],
+        color: '#000',
+        borderRadius: 4,
+        padding: [6, 10],
+        fontWeight: 'bold',
+        fontSize: 13,
+      },
+      data: [{ coord: ['Q4', 780] }],       // [categoryLabel, value]
+    },
+  }]
+}
+```
+
+**Horizontal bar:** Swap axes — put `type: 'category'` on `yAxis`, `type: 'value'` on `xAxis`.
+
+**Multi-series bar:**
+```javascript
+series: [
+  { type: 'bar', name: '2023', data: [...], itemStyle: { color: palette[0], borderRadius: [4,4,0,0] } },
+  { type: 'bar', name: '2024', data: [...], itemStyle: { color: palette[1], borderRadius: [4,4,0,0] } },
+]
+legend: { show: true, bottom: 0, textStyle: { color: 'var(--text)' } }
+```
+
+**Stacked bar:** Add `stack: 'total'` on each series.
+
+**Dark vs light grid color:**
+- Dark presets: `splitLine: { lineStyle: { color: 'rgba(255,255,255,0.07)' } }`
+- Light presets: `splitLine: { lineStyle: { color: 'rgba(0,0,0,0.08)' } }`
+
+---
+
+## 2. line
+
+```javascript
+{
+  animation: false,
+  backgroundColor: 'transparent',
+  grid: { left: '8%', right: '8%', top: 80, bottom: 60, containLabel: true },
+  xAxis: {
+    type: 'category',
+    data: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
+    boundaryGap: false,                   // line starts at first point, not center of band
+    axisLine: { lineStyle: { color: 'rgba(255,255,255,0.15)' } },
+    axisTick: { show: false },
+    axisLabel: { color: 'var(--text-muted)', fontSize: 12 },
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: { lineStyle: { color: 'rgba(255,255,255,0.07)' } },
+    axisLabel: { color: 'var(--text-muted)', fontSize: 12, formatter: '{value}k' },
+  },
+  series: [{
+    type: 'line',
+    name: 'ARR ($k)',
+    data: [12, 18, 22, 25, 31, 38, 44, 52, 61, 68, 78, 95],
+    smooth: true,                         // natural curve (vs false = straight segments)
+    lineStyle: { color: palette[0], width: 2.5 },
+    itemStyle: { color: palette[0] },
+    symbolSize: 8,
+    symbol: 'circle',
+    // Highlight specific point (e.g. December)
+    markPoint: {
+      symbolSize: 0,
+      label: {
+        show: true,
+        formatter: '$95k',
+        backgroundColor: palette[0],
+        color: '#000',
+        borderRadius: 4,
+        padding: [6, 10],
+        fontWeight: 'bold',
+        fontSize: 13,
+      },
+      data: [{ coord: ['Dec', 95] }],
+    },
+  }]
+}
+```
+
+---
+
+## 3. area
+
+**No `type: 'area'` in ECharts — it's `type: 'line'` with `areaStyle`.**
+
+```javascript
+series: [{
+  type: 'line',                           // NOT 'area'
+  smooth: true,
+  lineStyle: { color: palette[0], width: 2 },
+  itemStyle: { color: palette[0] },
+  areaStyle: {                            // THIS is what makes it an area chart
+    color: {
+      type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
+      colorStops: [
+        { offset: 0, color: paletteAlpha[0] },    // top: semi-transparent
+        { offset: 1, color: 'rgba(0,0,0,0)' },    // bottom: fully transparent
+      ]
+    }
+  },
+  data: [5, 8, 12, 10, 15, 22, 28, 25, 32, 38, 45, 52],
+  symbolSize: 6,
+}]
+```
+
+---
+
+## 4. pie
+
+**CRITICAL sizing:** Pie fills 100% of container. Always use body `padding: 64px 80px` and `.chart-container { max-height: 860px }` — see SKILL.md rule #12.
+
+```javascript
+{
+  animation: false,
+  backgroundColor: 'transparent',
+  // No xAxis/yAxis for pie
+  legend: {
+    orient: 'vertical',
+    right: '5%',
+    top: 'center',
+    textStyle: {
+      color: 'var(--text)',
+      fontFamily: 'var(--font-body)',
+      fontSize: 20,                       // 20px = readable at 2× retina output
+    },
+    itemGap: 20,
+    formatter: (name) => {
+      // Include % in legend — requires access to data
+      return name;                        // customize with data lookup if needed
+    },
+  },
+  series: [{
+    type: 'pie',
+    radius: '65%',                        // size as % of container
+    center: ['42%', '50%'],               // shift left to give legend room
+    data: [
+      { value: 45, name: 'Product A', itemStyle: { color: palette[0] } },
+      { value: 28, name: 'Product B', itemStyle: { color: palette[1] } },
+      { value: 17, name: 'Product C', itemStyle: { color: palette[2] } },
+      { value: 10, name: 'Other',     itemStyle: { color: palette[3] } },
+    ],
+    // Built-in labels — no plugin needed
+    label: {
+      show: true,
+      formatter: '{b}\n{d}%',            // name + percentage
+      color: '#09090B',                  // dark text on bright palette colors
+      fontFamily: 'var(--font-body)',
+      fontSize: 18,
+      fontWeight: 'bold',
+      minMargin: 5,
+    },
+    labelLine: {
+      show: true,
+      length: 15,
+      length2: 10,
+      lineStyle: { color: 'rgba(255,255,255,0.3)' },
+    },
+    // Hide label on tiny slices (< 12%)
+    labelFilter: (params) => params.data.value >= 12,
+    itemStyle: { borderColor: 'var(--bg)', borderWidth: 3 },
+    emphasis: { scale: true, scaleSize: 6 },
+  }]
+}
+```
+
+**No annotation plugin for pie** — ECharts pie doesn't support markPoint/markLine.
+
+If > 7 segments, consolidate smallest as "Other".
+
+---
+
+## 5. doughnut
+
+Same as pie + `radius: ['40%', '70%']`. No `type: 'doughnut'` in ECharts.
+
+```javascript
+series: [{
+  type: 'pie',
+  radius: ['40%', '68%'],               // [inner, outer] — creates the hole
+  center: ['42%', '50%'],
+  // All other config same as pie
+}]
+```
+
+**Optional center label:**
+```javascript
+// Register as a custom ECharts plugin after chart init:
+chart.setOption({
+  graphic: [{
+    type: 'text',
+    left: 'center',
+    top: 'center',
+    style: {
+      text: '73%',
+      font: 'bold 32px Inter, sans-serif',
+      fill: 'var(--text)',
+      textAlign: 'center',
+    }
+  }]
+});
+```
+
+---
+
+## 6. scatter
+
+```javascript
+{
+  animation: false,
+  backgroundColor: 'transparent',
+  grid: { left: '8%', right: '8%', top: 80, bottom: 60, containLabel: true },
+  xAxis: {
+    type: 'value',                        // value axis — not category
+    splitLine: { lineStyle: { color: 'rgba(255,255,255,0.07)' } },
+    axisLabel: { color: 'var(--text-muted)', fontSize: 12 },
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: { lineStyle: { color: 'rgba(255,255,255,0.07)' } },
+    axisLabel: { color: 'var(--text-muted)', fontSize: 12 },
+  },
+  series: [{
+    type: 'scatter',
+    symbolSize: 12,
+    itemStyle: { color: palette[0], opacity: 0.85 },
+    data: [[1.5, 2.3], [2.0, 3.1], [3.5, 1.8], [4.2, 4.5]],  // [x, y] pairs
+    emphasis: { scale: true },
+  }]
+}
+```
+
+Highlight a specific point:
+```javascript
+data: [
+  [1.5, 2.3],
+  { value: [4.2, 4.5], itemStyle: { color: palette[0], borderColor: '#fff', borderWidth: 2 } }
+]
+```
+
+---
+
+## 7. radar
+
+```javascript
+{
+  animation: false,
+  backgroundColor: 'transparent',
+  radar: {
+    shape: 'circle',                      // or 'polygon'
+    indicator: [
+      { name: 'Speed',    max: 100 },
+      { name: 'Accuracy', max: 100 },
+      { name: 'Strength', max: 100 },
+      { name: 'Stamina',  max: 100 },
+      { name: 'Agility',  max: 100 },
+    ],
+    radius: '65%',
+    center: ['50%', '55%'],
+    axisName: { color: 'var(--text)', fontSize: 13 },
+    splitLine: { lineStyle: { color: 'rgba(255,255,255,0.12)' } },
+    splitArea: { show: false },
+    axisLine: { lineStyle: { color: 'rgba(255,255,255,0.15)' } },
+  },
+  legend: {
+    bottom: 0,
+    textStyle: { color: 'var(--text)', fontSize: 14 },
+  },
+  series: [{
+    type: 'radar',
+    data: [{
+      name: 'Team A',
+      value: [85, 92, 70, 88, 76],
+      lineStyle: { color: palette[0], width: 2 },
+      itemStyle: { color: palette[0] },
+      areaStyle: { color: paletteAlpha[0] },
+    }]
+  }]
+}
+```
+
+---
+
+## 8. treemap
+
+```javascript
+{
+  animation: false,
+  backgroundColor: 'transparent',
+  series: [{
+    type: 'treemap',
+    width: '100%',
+    height: '100%',
+    roam: false,                          // disable pan/zoom (static PNG)
+    nodeClick: false,
+    breadcrumb: { show: false },
+    label: {
+      show: true,
+      formatter: '{b}\n{c}',             // name + value
+      fontSize: 14,
+      fontFamily: 'var(--font-body)',
+      color: '#fff',
+    },
+    itemStyle: {
+      borderColor: 'var(--bg)',
+      borderWidth: 2,
+      gapWidth: 2,
+    },
+    levels: [{
+      itemStyle: { borderWidth: 3, borderColor: 'var(--bg)' },
+      upperLabel: { show: false },
+    }],
+    data: [
+      { name: 'Category A', value: 45, itemStyle: { color: palette[0] } },
+      { name: 'Category B', value: 28, itemStyle: { color: palette[1] } },
+      { name: 'Category C', value: 17, itemStyle: { color: palette[2] } },
+      { name: 'Other',       value: 10, itemStyle: { color: palette[3] } },
+    ],
+  }]
+}
+```
+
+---
+
+## Highlight Patterns (applies to bar, line, scatter)
+
+**Per-item color highlight (most common):**
+```javascript
+data: [
+  420, 510, 480,
+  { value: 780, itemStyle: { color: palette[0], borderRadius: [4,4,0,0] } }  // highlighted
+]
+```
+
+**MarkPoint callout label above bar:**
+```javascript
+markPoint: {
+  symbolSize: 0,                        // invisible pin, just show the label
+  data: [{ coord: ['Q4', 780] }],
+  label: {
+    show: true,
+    formatter: '$780k',
+    backgroundColor: palette[0],
+    color: '#000',
+    fontWeight: 'bold',
+    fontSize: 14,
+    fontFamily: 'var(--font-body)',
+    borderRadius: 4,
+    padding: [6, 12],
+  },
+}
+```
+
+**MarkArea background highlight:**
+```javascript
+markArea: {
+  silent: true,
+  itemStyle: { color: 'rgba(250,204,21,0.1)', borderColor: 'rgba(250,204,21,0.5)', borderWidth: 1 },
+  data: [[{ xAxis: 'Q4' }, { xAxis: 'Q4' }]],
+}
+```
+
+**MarkLine (average, target, threshold):**
+```javascript
+markLine: {
+  silent: true,
+  lineStyle: { type: 'dashed', color: 'rgba(255,255,255,0.4)', width: 1.5 },
+  label: { formatter: 'Avg: {c}', color: 'var(--text-muted)' },
+  data: [{ type: 'average' }],
+}
+```

package/skills/graphic-chart/references/style-presets.md

@@ -0,0 +1,219 @@
+# Style Presets — graphic-chart
+
+5 recommended presets for data visualization charts. Each includes CSS tokens AND a data color palette — both are required.
+
+The CSS tokens control: background, typography, grid lines, axis labels.
+The data palette controls: bar/line/point colors and pie segment fills.
+
+Read this file before generating HTML in Step 3. Apply ALL tokens from the chosen preset.
+
+---
+
+## 1. clean-slate
+
+**Character:** Professional. Enterprise-safe. High-trust. Works for any audience.
+
+```css
+:root {
+  --bg:           #FFFFFF;
+  --bg-elevated:  #F8FAFC;
+  --text:         #0F172A;
+  --text-muted:   #64748B;
+  --accent:       #3B82F6;
+  --divider:      #E2E8F0;
+  --font-display: 'Plus Jakarta Sans', sans-serif;
+  --font-body:    'Plus Jakarta Sans', sans-serif;
+}
+```
+
+Font CDN:
+```html
+<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+```
+
+Data palette (ordered by visual hierarchy):
+```javascript
+const palette = ['#3B82F6','#10B981','#F59E0B','#EF4444','#8B5CF6','#EC4899','#06B6D4'];
+const paletteAlpha = ['rgba(59,130,246,0.15)','rgba(16,185,129,0.15)','rgba(245,158,11,0.15)','rgba(239,68,68,0.15)','rgba(139,92,246,0.15)','rgba(236,72,153,0.15)','rgba(6,182,212,0.15)'];
+```
+
+Grid line color: `rgba(0,0,0,0.07)`
+Axis tick color: `#64748B`
+
+**Best for:** B2B reports, LinkedIn posts, investor decks, any content requiring professional restraint.
+
+---
+
+## 2. midnight-editorial
+
+**Character:** Editorial. Premium dark. Authoritative.
+
+```css
+:root {
+  --bg:           #111111;
+  --bg-elevated:  #1A1A1A;
+  --text:         #F5F5F5;
+  --text-muted:   #9CA3AF;
+  --accent:       #D8F90A;
+  --divider:      #2D2D2D;
+  --font-display: 'Instrument Serif', serif;
+  --font-body:    'Inter', sans-serif;
+}
+```
+
+Font CDN:
+```html
+<link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+```
+
+Data palette:
+```javascript
+const palette = ['#D8F90A','#60A5FA','#34D399','#FB923C','#C084FC','#F472B6','#38BDF8'];
+const paletteAlpha = ['rgba(216,249,10,0.18)','rgba(96,165,250,0.18)','rgba(52,211,153,0.18)','rgba(251,146,60,0.18)','rgba(192,132,252,0.18)','rgba(244,114,182,0.18)','rgba(56,189,248,0.18)'];
+```
+
+Grid line color: `rgba(255,255,255,0.07)`
+Axis tick color: `#9CA3AF`
+
+**Best for:** Thought leadership content, editorial publications, agency presentations, premium brand charts.
+
+---
+
+## 3. matt-gray
+
+**Character:** Neutral. Sophisticated. Board-room-safe.
+
+```css
+:root {
+  --bg:           #F5F5F0;
+  --bg-elevated:  #EBEBЕ6;
+  --text:         #1C1C1C;
+  --text-muted:   #737373;
+  --accent:       #1C1C1C;
+  --divider:      #D4D4C8;
+  --font-display: 'DM Serif Display', serif;
+  --font-body:    'DM Sans', sans-serif;
+}
+```
+
+Font CDN:
+```html
+<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
+```
+
+Data palette (rich single-accent approach for this neutral style):
+```javascript
+const palette = ['#1C1C1C','#525252','#737373','#A3A3A3','#D4D4D4','#404040','#262626'];
+// For multi-series, add a single accent color:
+// const palette = ['#1C1C1C','#D97706','#525252','#92400E','#A3A3A3','#404040','#262626'];
+```
+
+Grid line color: `rgba(0,0,0,0.09)`
+Axis tick color: `#737373`
+
+**Best for:** Internal reviews, board materials, consultancy reports, mixed professional audiences.
+
+---
+
+## 4. electric-burst
+
+**Character:** Bold. High-contrast. Energy.
+
+```css
+:root {
+  --bg:           #09090B;
+  --bg-elevated:  #18181B;
+  --text:         #FAFAFA;
+  --text-muted:   #A1A1AA;
+  --accent:       #FACC15;
+  --divider:      #27272A;
+  --font-display: 'Space Grotesk', sans-serif;
+  --font-body:    'DM Sans', sans-serif;
+}
+```
+
+Font CDN:
+```html
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:wght@400;500&display=swap" rel="stylesheet">
+```
+
+Data palette:
+```javascript
+const palette = ['#FACC15','#60A5FA','#4ADE80','#F87171','#A78BFA','#FB923C','#34D399'];
+const paletteAlpha = ['rgba(250,204,21,0.18)','rgba(96,165,250,0.18)','rgba(74,222,128,0.18)','rgba(248,113,113,0.18)','rgba(167,139,250,0.18)','rgba(251,146,60,0.18)','rgba(52,211,153,0.18)'];
+```
+
+Grid line color: `rgba(255,255,255,0.07)`
+Axis tick color: `#A1A1AA`
+
+**Accent usage rule for electric-burst:** Yellow (`#FACC15`) on the primary dataset or highlight annotation only. Use blue/green for secondary series. Yellow everywhere = no yellow.
+
+**Best for:** Growth metrics, social media content, startup metrics, bold data stories for tech audiences.
+
+---
+
+## 5. brutalist
+
+**Character:** Raw. Stark. Confrontational. Zero decoration.
+
+```css
+:root {
+  --bg:           #FFFFFF;
+  --bg-elevated:  #F5F5F5;
+  --text:         #000000;
+  --text-muted:   #666666;
+  --accent:       #FF0000;
+  --divider:      #000000;
+  --font-display: 'Space Mono', monospace;
+  --font-body:    'Space Mono', monospace;
+}
+```
+
+Font CDN:
+```html
+<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
+```
+
+Data palette:
+```javascript
+const palette = ['#000000','#FF0000','#555555','#888888','#BBBBBB','#333333','#777777'];
+const paletteAlpha = ['rgba(0,0,0,0.15)','rgba(255,0,0,0.15)','rgba(85,85,85,0.15)','rgba(136,136,136,0.15)','rgba(187,187,187,0.15)','rgba(51,51,51,0.15)','rgba(119,119,119,0.15)'];
+```
+
+Grid line color: `rgba(0,0,0,0.15)`
+Axis tick color: `#666666`
+
+**Chart.js defaults override for brutalist:**
+```javascript
+Chart.defaults.font.family = 'Space Mono, monospace';
+Chart.defaults.color = '#666666';
+Chart.defaults.borderColor = 'rgba(0,0,0,0.15)';
+```
+
+**Best for:** Design-forward agencies, bold comparisons, impact charts where the data itself is the aesthetic.
+
+---
+
+## Chart.js Global Defaults — Set Before Chart Init
+
+Apply immediately after `document.fonts.ready.then(() => {`:
+```javascript
+Chart.defaults.font.family = getComputedStyle(document.documentElement)
+  .getPropertyValue('--font-body').trim() || 'system-ui, sans-serif';
+Chart.defaults.color = '#64748B';        // use --text-muted value for each preset
+Chart.defaults.borderColor = '#E2E8F0'; // use --divider value for each preset
+```
+
+Per-preset `Chart.defaults.color` values:
+- clean-slate: `#64748B`
+- midnight-editorial: `#9CA3AF`
+- matt-gray: `#737373`
+- electric-burst: `#A1A1AA`
+- brutalist: `#666666`
+
+Per-preset `Chart.defaults.borderColor` values:
+- clean-slate: `rgba(226,232,240,1)` → `#E2E8F0`
+- midnight-editorial: `rgba(45,45,45,1)` → `#2D2D2D`
+- matt-gray: `rgba(212,212,200,1)` → `#D4D4C8`
+- electric-burst: `rgba(39,39,42,1)` → `#27272A`
+- brutalist: `rgba(0,0,0,0.15)`