Brand color · Primary

iris

The one brand ramp. Anchor #8D58FE at step 500. Used for primary actions, links, focus rings, and brand surfaces. Every component that carries brand identity references this ramp — not directly, but through the --color-primary-* aliases.

iris-500

Primary

iris

#8D58FE · oklch(60% 0.25 293)

Brand hue. 5 tints (50–400) for surfaces and hover states; 5 shades (600–950) for hover / pressed / ink. The anchor sits at 500 so retuning brightness is symmetric in either direction.

11-step ramp

50 is the lightest tint, 950 is deepest ink. The anchor (●) marks the brand stop at 500.

Aliases

What components consume.

--color-primary:         var(--color-iris-500);  /* default action */
--color-primary-hover:   var(--color-iris-600);  /* hover */
--color-primary-pressed: var(--color-iris-700);  /* active / pressed */
--color-primary-surface: var(--color-iris-50);   /* tinted surface */
--color-primary-border:  var(--color-iris-200);  /* soft outline */
--color-on-primary:      #ffffff;                /* text on primary */

In use

Primary is the strongest voice in the system — use it for one action per view.

Brand surface

Start your workspace

iris-50 surface, iris-500 action, iris-700 outline text.

● Link

Text & links

Links use iris-700 for AA contrast on white; hover drops to iris-800.

Read the release notes for what shipped this week.

● Dark surface

Dark mode anchor

iris-950 as the branded dark canvas. iris-100 as inverted ink.