Color

181 tokens

Two layers: semantic colors, which components should actually consume, and the color ramps they point at. Semantic colors · Color ramps

Semantic colors

85 tokens

Every token is a reference to a primitive colour (the Primitive column shows which one), and that reference is resolved separately against the light and dark ramps to produce the two values below.

Click any swatch, hex, token name, or variable to copy it. Source: public/tokens/semantic.tokens.json.

Background

8 tokens

Light / Dark	Token	CSS variable	Light	Dark	Primitive	Description
					color/neutral/2	Default background surface.
					color/green/11	Accent background fill for bold or expressive moments. Use sparingly, the neutral background is the default.
					color/red/9	Red expressive background for drawing attention to key moments or categorized content. Text on top should switch to the on-color text token. Also = error/negative color and Lean Lighthouse color.
					color/brand/amber/main	Amber expressive background for drawing attention to key moments or categorized content. Text on top should switch to the on-color text token. Also = warning color and Lean X color.
					color/brand/lime/main	Lime expressive background for drawing attention to key moments or categorized content. Text on top should switch to the on-color text token.
					color/green/10	Green expressive background for drawing attention to key moments or categorized content. Text on top should switch to the on-color text token. Also = success/positive color and Lean Pay color.
					color/brand/blue/main	Blue expressive background for drawing attention to key moments or categorized content. Text on top should switch to the on-color text token. Also = Lean Store color.
					color/brand/iris/main	Iris expressive background for drawing attention to key moments or categorized content. Text on top should switch to the on-color text token.

Text

11 tokens

Light / Dark	Token	CSS variable	Light	Dark	Primitive	Description
					color/neutral/12	Text color for titles and subtitles, the highest-contrast text role. Switch to the on-color text token when sitting on a colored background.
					color/neutral/11	Default body/paragraph text color.
					color/neutral/10	Muted text color for captions and secondary/supporting copy.
					color/neutral/2	Text color for use on colored or expressive backgrounds.
					color/green/11	Accent color for emphasizing short highlighted text, not for full titles or long passages.
					color/red/9	Red text highlight, best suited to code, labels, infographics, or text inside colored containers rather than everyday highlighting. Also indicates errors.
					color/brand/amber/main	Amber text highlight, best suited to code, labels, infographics, or text inside colored containers rather than everyday highlighting. Also indicates warnings.
					color/brand/lime/main	Lime text highlight, best suited to code, labels, infographics, or text inside colored containers rather than everyday highlighting.
					color/green/10	Green text highlight, best suited to code, labels, infographics, or text inside colored containers rather than everyday highlighting. Also indicates positive/success.
					color/brand/blue/main	Blue text highlight, best suited to code, labels, infographics, or text inside colored containers rather than everyday highlighting.
					color/brand/iris/main	Iris text highlight, best suited to code, labels, infographics, or text inside colored containers rather than everyday highlighting.

Stroke

2 tokens

Light / Dark	Token	CSS variable	Light	Dark	Primitive	Description
					color/neutral/7	Default stroke/border color for containers and dividers.
					color/neutral/2	Stroke color for use on colored or expressive backgrounds.

Icon

4 tokens

Light / Dark	Token	CSS variable	Light	Dark	Primitive	Description
					color/green/11	Default icon, number, and bullet color, the brand accent. Switch to the neutral or error variant depending on context.
					color/neutral/10	Neutral icon/number/bullet color, used when a layout already has a lot of color.
					color/neutral/2	Icon/number/bullet color for use on colored backgrounds.
					color/red/9	Icon color reserved for errors, weaknesses, or problem states.

Container

8 tokens

Light / Dark	Token	CSS variable	Light	Dark	Primitive	Description
					color/neutral/3	Default neutral container fill, for text, data, diagrams, code, and general grouping.
					color/green/11	Accent-colored container fill for bold or expressive moments. Use sparingly, the neutral container is the default.
					color/red/9	Red container fill for key highlights, illustrations, or simple infographics. Also used for error/negative emphasis.
					color/brand/amber/main	Amber container fill for key highlights, illustrations, or simple infographics. Also used for warning emphasis.
					color/brand/lime/main	Lime container fill for key highlights, illustrations, or simple infographics.
					color/green/10	Green container fill for key highlights, illustrations, or simple infographics. Also used for success/positive emphasis. Distinct from the brand's primary accent green.
					color/brand/blue/main	Blue container fill for key highlights, illustrations, or simple infographics.
					color/brand/iris/main	Iris container fill for key highlights, illustrations, or simple infographics.

Graphic

18 tokens

Light / Dark	Token	CSS variable	Light	Dark	Primitive	Description
					color/red/5	Red (dark) for patterns, infographics, illustrations, badges, and graphic ui screens. Also used for error/negative meaning.
					color/red/9	Red (medium) for patterns, infographics, illustrations, badges, and graphic ui screens. Also used for error/negative meaning.
					color/red/12	Red (light) for patterns, infographics, illustrations, badges, and graphic ui screens. Also used for error/negative meaning.
					color/brand/amber/subtle	Amber (dark) for patterns, infographics, illustrations, badges, and graphic ui screens. Also used for warning meaning.
					color/brand/amber/main	Amber (medium) for patterns, infographics, illustrations, badges, and graphic ui screens. Also used for warning meaning.
					color/brand/amber/strong	Amber (light) for patterns, infographics, illustrations, badges, and graphic ui screens. Also used for warning meaning.
					color/brand/lime/subtle	Lime (dark) for patterns, infographics, illustrations, badges, and graphic ui screens.
					color/brand/lime/main	Lime (medium) for patterns, infographics, illustrations, badges, and graphic ui screens.
					color/brand/lime/strong	Lime (light) for patterns, infographics, illustrations, badges, and graphic ui screens.
					color/green/6	Green (dark) for patterns, infographics, illustrations, badges, and graphic ui screens. Also used for success/positive meaning.
					color/green/10	Green (medium) for patterns, infographics, illustrations, badges, and graphic ui screens. Also used for success/positive meaning.
					color/green/12	Green (light) for patterns, infographics, illustrations, badges, and graphic ui screens. Also used for success/positive meaning.
					color/brand/blue/subtle	Blue (dark) for patterns, infographics, illustrations, badges, and graphic ui screens.
					color/brand/blue/main	Blue (medium) for patterns, infographics, illustrations, badges, and graphic ui screens.
					color/brand/blue/strong	Blue (light) for patterns, infographics, illustrations, badges, and graphic ui screens.
					color/brand/iris/subtle	Iris (dark) for patterns, infographics, illustrations, badges, and graphic ui screens.
					color/brand/iris/main	Iris (medium) for patterns, infographics, illustrations, badges, and graphic ui screens.
					color/brand/iris/strong	Iris (light) for patterns, infographics, illustrations, badges, and graphic ui screens.

Image treatment

6 tokens

Light / Dark	Token	CSS variable	Light	Dark	Primitive	Description
					color/red/9	Red multiply effect on black and white photo.
					color/brand/amber/main	Amber multiply effect on black and white photo.
					color/brand/lime/main	Lime multiply effect on black and white photo.
					color/green/10	Green multiply effect on black and white photo.
					color/brand/blue/main	Blue multiply effect on black and white photo.
					color/brand/iris/main	Iris multiply effect on black and white photo.

Badge

24 tokens

Light / Dark	Token	CSS variable	Light	Dark	Primitive	Description
					color/brand/iris/subtle	Badge fill color for the channel actor category (examples: KSA, UAE, app, merchant...).
					color/brand/iris/strong	Badge text color for the channel actor category, paired with its matching fill.
					color/brand/lime/subtle	Badge fill color for the channel action category.
					color/brand/lime/main	Badge text color for the channel action category, paired with its matching fill.
					color/brand/blue/subtle	Badge fill color for the channel output category.
					color/brand/blue/main	Badge text color for the channel output category, paired with its matching fill.
					color/green/4	Badge fill color for the product category.
					color/green/11	Badge text color for the product category, paired with its matching fill.
					color/neutral/3	Badge fill color for the pending category.
					color/neutral/11	Badge text color for the pending category, paired with its matching fill.
					color/green/11	Badge fill color for the active category.
					color/green/6	Badge text color for the active category, paired with its matching fill.
					color/green/11	Badge border color for the in-progress category (stroke-style badge).
					color/green/11	Badge text color for the in-progress category, paired with its matching border.
					color/brand/amber/main	Badge border color for the deprecated category (stroke-style badge).
					color/brand/amber/main	Badge text color for the deprecated category, paired with its matching border.
					color/brand/lime/main	Badge border color for the roadmap category (stroke-style badge).
					color/brand/lime/main	Badge text color for the roadmap category, paired with its matching border.
					color/red/5	Badge fill color for the issue category.
					color/red/9	Badge text color for the issue category, paired with its matching fill.
					color/brand/amber/subtle	Badge fill color for the currency category.
					color/brand/amber/main	Badge text color for the currency category.
					color/neutral/3	Badge fill color for the industry category.
					color/neutral/11	Badge text color for the industry category.

Subbrand

4 tokens

Light / Dark	Token	CSS variable	Light	Dark	Primitive	Description
					color/red/9	Lean Lighthouse sub-brand color. Also doubles as the error color, check intent before use.
					color/brand/amber/main	Lean X sub-brand color. Also doubles as the warning colo, check intent before use.
					color/green/10	Lean Pay sub-brand color. Also doubles as the success color, check intent before use.
					color/brand/blue/main	Lean Store sub-brand color. No secondary meaning.

Color ramps

96 tokens

The raw palette: 7 families of 12 steps, in both modes, plus the brand palette below them. Amber, lime, iris and blue follow the Radix colour scales (blue is Radix cyan), so step numbers keep their Radix roles. Semantic tokens point at these slots, so reach for a semantic token in product code and use these for reference.

Counted per mode, so each family below carries 12 light and 12 dark values. Source: public/tokens/primitive.{light,dark}.tokens.json.

neutral

Raw neutral value in Lean's color scale. Used for backgrounds, text, containers, and strokes via semantic tokens.

light

dark

Step	CSS variable	Light	Dark
neutral.1
neutral.2
neutral.3
neutral.4
neutral.5
neutral.6
neutral.7
neutral.8
neutral.9
neutral.10
neutral.11
neutral.12

red

Raw red value in Lean's color scale. Actual usage is defined by the semantic tokens that reference it.

light

dark

Step	CSS variable	Light	Dark
red.1
red.2
red.3
red.4
red.5
red.6
red.7
red.8
red.9
red.10
red.11
red.12

amber

Raw amber value in Lean's color scale. Actual usage is defined by the semantic tokens that reference it.

light

dark

Step	CSS variable	Light	Dark
amber.1
amber.2
amber.3
amber.4
amber.5
amber.6
amber.7
amber.8
amber.9
amber.10
amber.11
amber.12

lime

Raw lime value in Lean's color scale. Actual usage is defined by the semantic tokens that reference it.

light

dark

Step	CSS variable	Light	Dark
lime.1
lime.2
lime.3
lime.4
lime.5
lime.6
lime.7
lime.8
lime.9
lime.10
lime.11
lime.12

green

Raw green value in Lean's color scale. Actual usage is defined by the semantic tokens that reference it.

light

dark

Step	CSS variable	Light	Dark
green.1
green.2
green.3
green.4
green.5
green.6
green.7
green.8
green.9
green.10
green.11
green.12

blue

Raw blue value in Lean's color scale. Actual usage is defined by the semantic tokens that reference it.

light

dark

Step	CSS variable	Light	Dark
blue.1
blue.2
blue.3
blue.4
blue.5
blue.6
blue.7
blue.8
blue.9
blue.10
blue.11
blue.12

iris

Raw iris value in Lean's color scale. Actual usage is defined by the semantic tokens that reference it.

light

dark

Step	CSS variable	Light	Dark
iris.1
iris.2
iris.3
iris.4
iris.5
iris.6
iris.7
iris.8
iris.9
iris.10
iris.11
iris.12

brand

Lean brand colours for graphics, badges and illustration: a subtle tint, the main brand colour and a strong contrast tone for each hue. Main is identical in light and dark; subtle and strong swap to stay legible.

light

dark

Step	CSS variable	Light	Dark
brand.amber.subtle
brand.amber.main
brand.amber.strong
brand.lime.subtle
brand.lime.main
brand.lime.strong
brand.blue.subtle
brand.blue.main
brand.blue.strong
brand.iris.subtle
brand.iris.main
brand.iris.strong