Add Atlassian Design System palette#20
Merged
Merged
Conversation
✅ Deploy Preview for colorjs-palettes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Adds the Atlassian Design System (Atlaskit) primitive color palette, sourced from the design-system/tokens artifacts. Includes 9 chromatic hue families (red, orange, yellow, lime, green, teal, blue, purple, magenta) plus a light-mode neutral ramp, each with 12 steps (100-1000, with 250 and 850 sub-steps).
LeaVerou
force-pushed
the
claude/add-atlassian-palette
branch
from
339f1f1 to
ed499a1
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds the Atlassian Design System primitive color palette as
atlassian, inserted as the 9th entry (right aftercarbon).design-system/tokens/src/artifacts/palettes-raw/palette.tsxfrom the Atlaskit codebase (via theatlassian-frontend-mirrormirror of the Bitbucket monorepo).100, 200, 250, 300, 400, 500, 600, 700, 800, 850, 900, 1000(the250and850sub-steps are extra tuning points the designers added between the main decades). Dark-mode neutrals and alpha overlays in the source were intentionally excluded per the repo convention (light if multi-mode; ramps only).Why this is hand-tuned (not algorithmic)
The chromatic ramps are not locked-L — designers tuned each hue's lightness curve separately. OKLCH L standard deviation across the nine chromatic hues, per step:
Five of the twelve steps exceed the σ < 0.02 locked-L threshold, with steps 300-500 showing σ ≈ 0.033 — the mid-range carries hue-specific lightness shifts characteristic of perceptual hand-tuning (yellow/lime kept lighter, blue/red kept darker at the same step). Peak chroma also moves freely across hues:
Purple500reaches C=0.216 whileTeal500sits at C=0.112, again inconsistent with a pure algorithm.Key accent (step 500) OKLCH coords:
Atlassian's design rationale and accessibility/contrast goals for the palette are documented at https://atlassian.design/foundations/color-new/color-palette-new and in the community announcement.
Test plan
npm run build:dataregeneratesdata/palettes.jsonanddata/hues.jsonwithout errorspalettes.atlassianshowscount: { hue: 9, neutral: 1 },levels.steps: { min: 12, max: 12 }npm run build:html)Generated by Claude Code