Three brand ramps on top of the Tailwind palette. Neutrals, success, warning, and error roles continue to draw from Tailwind (slate, red, amber, green, blue). These are the only brand-owned scales.
Brand identity, primary actions, links, focus rings, selection states.
Warm accent. Marketing highlights, illustration, secondary CTAs, data-viz series.
Cool accent. Complementary data-viz series, tags, accent emphasis.
Brand hue. Anchor #8D58FE at step 500. 5 tints (50–400) for surfaces & hover states; 5 shades (600–950) for hover/pressed/ink.
Warm accent. Anchor #FF7F50 at step 500. Symmetric 5+5 structure around the brand stop.
Cool accent. Anchor #0ABAB5 at step 500. Symmetric 5+5 structure around the brand stop.
Components consume these role tokens, never the raw ramp. Retune the brand by pointing these aliases at different steps — no component changes needed.
Success, warning, danger, info. These pull from Tailwind (green, amber, red, blue) so brand accents stay meaning-free. Coral ≠ danger. Teal ≠ success.
Drawn from Tailwind slate. Brand guideline stops (#FFFFFF / #FAFAFA / #F5F5F5 / #717680) map cleanly onto this ramp — no separate brand-gray needed.
How the three roles compose. Primary carries action; secondary and accent are non-competing accents.
Primary surface and primary action — iris-50 + iris-500.
Use coral sparingly — never next to primary CTAs. Great for marketing highlights and illustration accents.
Teal for tags, secondary categories, and second data-viz series alongside iris.
Drop into your :root or Tailwind @theme block. Click any swatch above to copy its hex.
