Spokegrid resources / Free to use
Good starting points.
Less blank canvas.
Small, useful resources for the websites you make. Start with color: preview a palette, inspect its text contrast and take the CSS into your own project.
- Available now
- Four original palettes, contrast previews and CSS downloads.
- Access
- No account required. Colors are free to reuse and adapt.
Find a starting palette.
These original starter colors are free to use and adapt. Choose one, copy a value or download its CSS variables. They do not change your Spokegrid account theme.
Live palette preview
A place for
your next idea.
Your work, presented with clear type, considered contrast and room to breathe.
Surface / content card
Primary action preview- background
- foreground
- surface
- accent
- on accent
Text/background: 14.4:1. Button label/accent: 5.4:1. Both exceed 4.5:1 for normal text; check other combinations and your final layout separately.
/* Spokegrid starter palette: Evergreen. Free to reuse and adapt. */
:root {
--background: #F4F6F3;
--foreground: #192622;
--surface: #FFFFFF;
--accent: #12776F;
--on-accent: #FFFFFF;
}
Give the palette somewhere to live.
Useful answers before you start.
Can I use these colors commercially?
Yes. These original color values and the generated CSS are free to use and adapt, including in client projects. This does not grant rights to Spokegrid logos, paid templates or other creators’ assets.
Are icons, GIFs and stock images included?
Not yet. This is the first resource release. Icons, images, GIFs and community assets are planned; availability and license terms will be shown on each resource when published.
Does the contrast preview make my entire website accessible?
No. It measures two specific foreground/background pairs. You still need to check focus, content, controls, other color combinations, keyboard use and assistive technology support in your finished website.