Skip to content

Add Polaris palette#19

Merged
LeaVerou merged 1 commit into
mainfrom
claude/add-polaris-palette
Jun 21, 2026
Merged

Add Polaris palette#19
LeaVerou merged 1 commit into
mainfrom
claude/add-polaris-palette

Conversation

@LeaVerou

Copy link
Copy Markdown
Member

Summary

Adds the Shopify Polaris color palette, sourced from the foundational base ramps in @shopify/polaris-tokens (the colors.ts module — these are the underlying hue × step scales, not the semantic surface/text tokens layered on top). 13 hue families (gray, azure, blue, cyan, green, lime, magenta, orange, purple, red, rose, teal, yellow), each with 16 steps from 1 (lightest) to 16 (darkest). Alpha-only ramps (blackAlpha, whiteAlpha) are excluded since this repo is sRGB / light-mode only.

Hand-tuning evidence

Sampled OKLCH L across hues at each step (azure, blue, green, red, yellow, purple). Per-step lightness standard deviation:

step mean L σ
1 0.993 0.0019
5 0.928 0.0097
8 0.859 0.0121
10 0.744 0.0206
11 0.628 0.0204
12 0.552 0.0237
13 0.482 0.0323
14 0.406 0.0215
16 0.220 0.0152

σ exceeds 0.02 across the mid/dark range (peak ≈ 0.032 at step 13), so L is clearly not algorithmically locked — these are designer-curated ramps. Polaris designers tune each hue's progression for perceptual balance, especially the chromatic mid-tones (steps 10–14) where ramps shift from chroma growth into darkening. Design rationale: https://polaris.shopify.com/tokens/colors

Files

  • data/raw/polaris.ts — verbatim source from polaris-tokens/src/colors.ts.
  • data/colors/polaris.json — normalized {hue: {step: hex, ...}}, light-mode sRGB.
  • data/palette_metadata.json — Polaris entry inserted as 8th entry, right after Primer.
  • data/hues.json, data/palettes.json — regenerated via npm run build:data.

Test plan


Generated by Claude Code

@netlify

netlify Bot commented May 19, 2026

Copy link
Copy Markdown

Deploy Preview for colorjs-palettes ready!

Name Link
🔨 Latest commit 6ea8b30
🔍 Latest deploy log https://app.netlify.com/projects/colorjs-palettes/deploys/6a0cba8da0d4cd0008192f8e
😎 Deploy Preview https://deploy-preview-19--colorjs-palettes.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@LeaVerou LeaVerou merged commit aa562d3 into main Jun 21, 2026
4 checks passed
@LeaVerou LeaVerou deleted the claude/add-polaris-palette branch June 21, 2026 15:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants