Wiz'rd
Colour Aliases
Alias tier — map semantic colour roles to your raw palette shades. Components reference these aliases (e.g. "primary", "danger") rather than specific hex values, so changing a mapping here cascades through every component that uses it.
Primary
Primary
Primary
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Primary Hover
Primary Hover
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Primary Active
Primary Active
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
On Primary
On Primary
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Surface
Surface Default
Surface Default
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Surface Muted
Surface Muted
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Surface Raised
Surface Raised
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
On Surface Default
On Surface Default
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
On Surface Muted
On Surface Muted
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Border
Border Default
Border Default
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Border Strong
Border Strong
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Border Focus
Border Focus
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Danger
Danger
Danger
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Danger Surface
Danger Surface
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
On Danger
On Danger
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
On Danger Surface
On Danger Surface
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Success
Success
Success
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Success Surface
Success Surface
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
On Success
On Success
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
On Success Surface
On Success Surface
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Warning
Warning
Warning
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Warning Surface
Warning Surface
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
On Warning
On Warning
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
On Warning Surface
On Warning Surface
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Info
Info
Info
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Info Surface
Info Surface
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
On Info
On Info
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
On Info Surface
On Info Surface
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Disabled
Disabled
Disabled
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
On Disabled
On Disabled
White (#ffffff)Black (#000000)Blue 50 (#f0f6ff)Blue 100 (#eff5ff)Blue 200 (#e5efff)Blue 300 (#c4dbff)Blue 400 (#88b5ff)Blue 500 (#3b82f6)Blue 600 (#0550bc)Blue 700 (#003180)Blue 800 (#00205f)Blue 900 (#011e50)Blue 950 (#092045)Neutral 50 (#f5f5f5)Neutral 100 (#f5f5f5)Neutral 200 (#ededed)Neutral 300 (#d4d4d4)Neutral 400 (#a8a8a8)Neutral 500 (#737373)Neutral 600 (#4e4e4e)Neutral 700 (#343434)Neutral 800 (#262626)Neutral 900 (#222222)Neutral 950 (#222222)Red 50 (#fff2f0)Red 100 (#fff1f0)Red 200 (#ffe9e6)Red 300 (#ffccc7)Red 400 (#ff958c)Red 500 (#ef4444)Red 600 (#ae0018)Red 700 (#71000a)Red 800 (#520004)Red 900 (#490003)Red 950 (#410b0b)Green 50 (#e4fde8)Green 100 (#deffe3)Green 200 (#ceffd6)Green 300 (#8cffa6)Green 400 (#5ce782)Green 500 (#22c55e)Green 600 (#007f36)Green 700 (#004c1d)Green 800 (#003210)Green 900 (#002b0c)Green 950 (#002b0c)Amber 50 (#fff3e6)Amber 100 (#fff3e5)Amber 200 (#ffeedc)Amber 300 (#ffdfbb)Amber 400 (#ffc27a)Amber 500 (#f59e0b)Amber 600 (#9c6200)Amber 700 (#5d3800)Amber 800 (#3d2200)Amber 900 (#341c00)Amber 950 (#331b00)Cyan 50 (#e4faff)Cyan 100 (#e4f9ff)Cyan 200 (#d7f7ff)Cyan 300 (#a9eeff)Cyan 400 (#54d9f6)Cyan 500 (#06b6d4)Cyan 600 (#007589)Cyan 700 (#004653)Cyan 800 (#002e38)Cyan 900 (#002730)Cyan 950 (#002730)
Live Preview
Display Large
Display Medium
Display Small
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Large body text for lead paragraphs.
Default body text in the surface colour.
Small text for captions and secondary content.
Extra-small text for fine print and labels.
Muted text for supporting information.
Code
const theme = createTheme(tokens);
export default theme;
Buttons
Badges
PrimarySuccessDangerWarningInfo
Inputs
Toggle
Option OneOption Two
Radio Group
Box / Card
Elevated box with medium radius and padding.
Alerts
Informational message.
Success message.
Warning message.
Error message.
Avatars
JDABXY
Accordion
Content for the first accordion section.
Content for the second accordion section.
Content for the third accordion section.
Breadcrumb
Tabs
Overview panel content.
Details panel content.
Settings panel content.
Separator
Horizontal separator shown above and below.
Slider
Progress & Skeleton
Page Surface
Default Surface
Body text on the default page background.
Muted text for secondary information.
Muted Section
Muted Background
Body text on a muted surface.
Raised Card
Card content elevated above the muted surface.
Primary Section (Cascade)
Primary Surface
Body text inherits on-primary colour via cascade.
Muted text also resolves to on-primary.
Card Grid on Muted
Feature One
NewCard content on a raised surface over muted background.
Feature Two
BetaAnother card verifying consistent contrast and spacing.
Form Controls
Country
AustraliaUnited KingdomUnited States
Alert Variants
Informational — check your email for a confirmation link.
Success — your changes have been saved.
Warning — your trial expires in 3 days.
Error — payment could not be processed.
Nested Composition
Subscription Plan
Your current plan includes all features.
Pro