Color
Semantic color tokens built on the Sage scale.
| Name | Token | Light | Dark |
|---|---|---|---|
| Backgrounds | |||
| Background | var(--bg) | --sand-1 #fbfdfc | --sand-1 #101211 |
| Background Subtle | var(--bg-subtle) | --sand-2 #f7f9f8 | --sand-2 #171918 |
| Background Muted | var(--bg-muted) | --sand-3 #eef1f0 | --sand-3 #202221 |
| Background Hover | var(--bg-hover) | --sand-4 #e6e9e8 | --sand-4 #272a29 |
| Background Active | var(--bg-active) | --sand-5 #dfe2e0 | --sand-5 #2e3130 |
| Text | |||
| Text | var(--text) | --sand-12 #1a211e | --sand-12 #eceeed |
| Text Secondary | var(--text-secondary) | --sand-11 #5f6563 | --sand-11 #adb5b2 |
| Text Tertiary | var(--text-tertiary) | --sand-9 #868e8b | --sand-9 #63706b |
| Borders | |||
| Border | var(--border) | --sand-6 #d7dad9 | --sand-6 #373b39 |
| Border Hover | var(--border-hover) | --sand-7 #cbcfcd | --sand-7 #444947 |
| Border Focus | var(--border-focus) | --sand-8 #b8bcba | --sand-8 #5b625f |
| Status | |||
| Success | var(--success) | --green-11 #218358 | --green-11 #3dd68c |
| Error | var(--error) | --red-11 #ce2c31 | --red-11 #ff9592 |
| Info | var(--info) | --blue-11 #3a5bc7 | --blue-11 #9eb1ff |
| Warning | var(--warning) | --sand-10 #7c8481 | --sand-10 #717d79 |
| Utility | |||
| Overlay | var(--overlay) | rgb(255 255 255 / 0.7) | rgb(0 0 0 / 0.6) |
| Shadow | var(--shadow) | --sand-4 #e6e9e8 | --sand-4 #272a29 |