Try your brand
Your colors, on a real lesson.
Pick your color and typefaces. The lesson beside them takes them on at once, and Sidestep checks that everything stays readable.
Brand color
Corners
Motion
Theme
Which is quicker to decide?
Why does this matter?What Sidestep adjusted
Nothing. Your exact color is readable everywhere it is used.
Contrast checks
31 of 31 pairings pass. Text needs 4.5 to 1. Outlines and fills need 3 to 1.
| Pairing | Used for | Ratio | Result |
|---|---|---|---|
| Aatext.primary on bg.page | Body text | 13.62 to 1 | Pass |
| Aatext.primary on bg.surface | Body text | 14.38 to 1 | Pass |
| Aatext.primary on bg.raised | Body text | 14.87 to 1 | Pass |
| Aatext.primary on bg.sunken | Body text | 11.99 to 1 | Pass |
| Aatext.muted on bg.page | Secondary text | 5.76 to 1 | Pass |
| Aatext.muted on bg.surface | Secondary text | 6.09 to 1 | Pass |
| Aatext.muted on bg.raised | Secondary text | 6.30 to 1 | Pass |
| Aatext.brand on bg.page | Links | 5.69 to 1 | Pass |
| Aatext.brand on bg.surface | Links | 6.01 to 1 | Pass |
| Aatext.brand on bg.raised | Links | 6.22 to 1 | Pass |
| Aatext.error on bg.page | Error text | 6.42 to 1 | Pass |
| Aatext.error on bg.surface | Error text | 6.78 to 1 | Pass |
| Aatext.error on bg.raised | Error text | 7.01 to 1 | Pass |
| Aaaction.on-primary on action.primary | Button label | 6.22 to 1 | Pass |
| Aaaction.on-primary on action.primary-hover | Button label, hovered | 8.47 to 1 | Pass |
| Aatext.primary on bg.hover | Text on a hovered control | 13.62 to 1 | Pass |
| Aaaccent.on-fill on accent.fill | Text on gold | 8.34 to 1 | Pass |
| Aastatus.on-wrong on status.wrong-fill | Wrong-answer text | 11.61 to 1 | Pass |
| Aainverse.text on inverse.bg | Toast and tooltip text | 14.38 to 1 | Pass |
| Aaborder.strong on bg.page | Component outline | 13.62 to 1 | Pass |
| Aaborder.strong on bg.surface | Component outline | 14.38 to 1 | Pass |
| Aaborder.strong on bg.raised | Component outline | 14.87 to 1 | Pass |
| Aafocus.ring on bg.page | Focus ring | 5.69 to 1 | Pass |
| Aafocus.ring on bg.surface | Focus ring | 6.01 to 1 | Pass |
| Aaaction.primary on bg.page | Button against the page | 5.69 to 1 | Pass |
| Aaaction.primary on bg.surface | Button against a panel | 6.01 to 1 | Pass |
| Aaaction.primary on bg.raised | Selected control on a card | 6.22 to 1 | Pass |
| Aaaction.primary-hover on bg.page | Hovered button against the page | 7.76 to 1 | Pass |
| Aaaction.primary-hover on bg.surface | Hovered button against a panel | 8.19 to 1 | Pass |
| Aabrand.fill on bg.page | Large green fill | 5.69 to 1 | Pass |
| Aabrand.fill on bg.sunken | Progress fill in its track | 5.01 to 1 | Pass |
Your theme
This is the whole theme: only what differs from Sidestep's defaults. Paste it after Sidestep's stylesheet. No component changes.
:root, [data-theme="day"] {
--ss-color-text-brand: #2456D6;
--ss-color-action-primary: #2456D6;
--ss-color-action-primary-hover: #113FBE;
--ss-color-brand-fill: #2456D6;
--ss-color-focus-ring: #2456D6;
--ss-color-character-shell: #2456D6;
}