Product colourLink to the section Product colour
The token --sk-tool-ui colours the accent block of the mark, borders, tints and the brand patterns of Skribly UI. It must reach 3:1 on every surface in the light and dark themes and 4.5:1 in high contrast, the rule for controls and graphics; test/tokens.test.ts checks it. Text in the name of a product uses the text colour, not the product colour.
| Surface | Colour | Contrast | Needs | Result |
|---|---|---|---|---|
--sk-bg | #fffdf8 | 6.22:1 | 3.00:1 | Passes |
--sk-surface | #ffffff | 6.32:1 | 3.00:1 | Passes |
--sk-sunken | #faf6ee | 5.87:1 | 3.00:1 | Passes |
--sk-side | #f6f1e7 | 5.62:1 | 3.00:1 | Passes |
--sk-bar | #efe8da | 5.19:1 | 3.00:1 | Passes |
--sk-input | #ffffff | 6.32:1 | 3.00:1 | Passes |
--sk-hover | #f1eadb | 5.28:1 | 3.00:1 | Passes |
| Surface | Colour | Contrast | Needs | Result |
|---|---|---|---|---|
--sk-bg | #111318 | 7.55:1 | 3.00:1 | Passes |
--sk-surface | #16191f | 7.15:1 | 3.00:1 | Passes |
--sk-sunken | #0f1115 | 7.68:1 | 3.00:1 | Passes |
--sk-side | #0d0f13 | 7.79:1 | 3.00:1 | Passes |
--sk-bar | #0a0c0f | 7.96:1 | 3.00:1 | Passes |
--sk-input | #16191f | 7.15:1 | 3.00:1 | Passes |
--sk-hover | #1a1d23 | 6.86:1 | 3.00:1 | Passes |
| Surface | Colour | Contrast | Needs | Result |
|---|---|---|---|---|
--sk-bg | #000000 | 11.94:1 | 4.50:1 | Passes |
--sk-surface | #000000 | 11.94:1 | 4.50:1 | Passes |
--sk-sunken | #000000 | 11.94:1 | 4.50:1 | Passes |
--sk-side | #000000 | 11.94:1 | 4.50:1 | Passes |
--sk-bar | #000000 | 11.94:1 | 4.50:1 | Passes |
--sk-input | #000000 | 11.94:1 | 4.50:1 | Passes |
--sk-hover | #1a1a1a | 9.89:1 | 4.50:1 | Passes |
Shared coloursLink to the section Shared colours
Every product interface uses the same accent, surfaces and status colours. Text reaches 4.5:1 on its surface in the light and dark themes and 7:1 in high contrast.
| Pair | Colour | Contrast | Needs | Result |
|---|---|---|---|---|
--sk-fg / --sk-bg | #14171d | 17.66:1 | 4.50:1 | Passes |
--sk-muted / --sk-bg | #5e6573 | 5.76:1 | 4.50:1 | Passes |
--sk-accent-text / --sk-bg | #92400e | 6.97:1 | 4.50:1 | Passes |
--sk-danger / --sk-bg | #b42318 | 6.47:1 | 4.50:1 | Passes |
--sk-warn / --sk-bg | #a84207 | 5.99:1 | 4.50:1 | Passes |
--sk-ok / --sk-bg | #067647 | 5.60:1 | 4.50:1 | Passes |
--sk-info / --sk-bg | #1d4ed8 | 6.59:1 | 4.50:1 | Passes |
--sk-fg / --sk-surface | #14171d | 17.95:1 | 4.50:1 | Passes |
--sk-muted / --sk-surface | #5e6573 | 5.86:1 | 4.50:1 | Passes |
--sk-accent-text / --sk-surface | #92400e | 7.09:1 | 4.50:1 | Passes |
--sk-danger / --sk-surface | #b42318 | 6.57:1 | 4.50:1 | Passes |
--sk-warn / --sk-surface | #a84207 | 6.09:1 | 4.50:1 | Passes |
--sk-ok / --sk-surface | #067647 | 5.69:1 | 4.50:1 | Passes |
--sk-info / --sk-surface | #1d4ed8 | 6.70:1 | 4.50:1 | Passes |
| Pair | Colour | Contrast | Needs | Result |
|---|---|---|---|---|
--sk-fg / --sk-bg | #ecedf0 | 15.87:1 | 4.50:1 | Passes |
--sk-muted / --sk-bg | #9aa1ad | 7.15:1 | 4.50:1 | Passes |
--sk-accent-text / --sk-bg | #f5b653 | 10.35:1 | 4.50:1 | Passes |
--sk-danger / --sk-bg | #f97066 | 6.67:1 | 4.50:1 | Passes |
--sk-warn / --sk-bg | #fdb022 | 10.10:1 | 4.50:1 | Passes |
--sk-ok / --sk-bg | #47cd89 | 9.17:1 | 4.50:1 | Passes |
--sk-info / --sk-bg | #7ca9ff | 7.94:1 | 4.50:1 | Passes |
--sk-fg / --sk-surface | #ecedf0 | 15.04:1 | 4.50:1 | Passes |
--sk-muted / --sk-surface | #9aa1ad | 6.77:1 | 4.50:1 | Passes |
--sk-accent-text / --sk-surface | #f5b653 | 9.81:1 | 4.50:1 | Passes |
--sk-danger / --sk-surface | #f97066 | 6.32:1 | 4.50:1 | Passes |
--sk-warn / --sk-surface | #fdb022 | 9.56:1 | 4.50:1 | Passes |
--sk-ok / --sk-surface | #47cd89 | 8.69:1 | 4.50:1 | Passes |
--sk-info / --sk-surface | #7ca9ff | 7.52:1 | 4.50:1 | Passes |
| Pair | Colour | Contrast | Needs | Result |
|---|---|---|---|---|
--sk-fg / --sk-bg | #ffffff | 21.00:1 | 7.00:1 | Passes |
--sk-muted / --sk-bg | #e6e6e6 | 16.83:1 | 7.00:1 | Passes |
--sk-accent-text / --sk-bg | #ffd60a | 14.88:1 | 7.00:1 | Passes |
--sk-danger / --sk-bg | #ff8a8a | 9.25:1 | 7.00:1 | Passes |
--sk-warn / --sk-bg | #ffc247 | 13.06:1 | 7.00:1 | Passes |
--sk-ok / --sk-bg | #6fe3a8 | 13.23:1 | 7.00:1 | Passes |
--sk-info / --sk-bg | #a4c4ff | 11.92:1 | 7.00:1 | Passes |
--sk-fg / --sk-surface | #ffffff | 21.00:1 | 7.00:1 | Passes |
--sk-muted / --sk-surface | #e6e6e6 | 16.83:1 | 7.00:1 | Passes |
--sk-accent-text / --sk-surface | #ffd60a | 14.88:1 | 7.00:1 | Passes |
--sk-danger / --sk-surface | #ff8a8a | 9.25:1 | 7.00:1 | Passes |
--sk-warn / --sk-surface | #ffc247 | 13.06:1 | 7.00:1 | Passes |
--sk-ok / --sk-surface | #6fe3a8 | 13.23:1 | 7.00:1 | Passes |
--sk-info / --sk-surface | #a4c4ff | 11.92:1 | 7.00:1 | Passes |
SurfacesLink to the section Surfaces
| Token | Light | Dark | High contrast |
|---|---|---|---|
--sk-bg | #fffdf8 | #111318 | #000000 |
--sk-surface | #ffffff | #16191f | #000000 |
--sk-sunken | #faf6ee | #0f1115 | #000000 |
--sk-side | #f6f1e7 | #0d0f13 | #000000 |
--sk-bar | #efe8da | #0a0c0f | #000000 |
--sk-input | #ffffff | #16191f | #000000 |
--sk-hover | #f1eadb | #1a1d23 | #1a1a1a |
--sk-accent | #b45309 | #f5b653 | #ffd60a |