The pictures in a grid bring more colour than any card could: tiles in saffron and moss, a blue sea, a red coat. The cards’ job is to hold them, not to compete. A good colour system for a grid is small: a quiet base for the cards, one accent for what matters, and enough contrast that every word reads.
Below, the same six tiles in two skins. Only the colours differ.
One set of items, two skins
White cards on a warm grey background: dark titles, grey text and one terracotta accent for the line above the title and the arrow.
The same tiles and the same layout in a dark skin: dark cards on a near-black background, white titles, light grey text, a lighter accent.
Start with a quiet base
Three colours make the base of a card: its background, the title and the text. Pick them as a set.
- Light: a white or near-white card, a near-black title, a mid grey for the text. Put the cards on a background a step darker than white, so they stand out without a border.
- Dark: a dark card, a white title, a light grey for the text, on a background a step darker than the card.
Avoid pure black on pure white for long text, and pure white on pure black: both are harsher than they need to be. A near-black (#1c1b1a) and an off-white read just as well and look calmer.
One accent, used for one job
An accent is the colour that says “look here”. It works because it is rare. Give it one job and keep it there: the line above the title in the tiles above, and the arrow that says the card opens. Not the title as well, not the text, not the background.
Your brand’s colour is the obvious accent. Check it on both grounds: a colour that reads on white can be too dark on a dark card. The dark skin above uses a lighter shade of the same terracotta for that reason.
Words beside every colour
Colour alone should never carry meaning. A red tile that means “sold out”, a green dot that means “new”: visitors who do not see the difference, or who look at the grid on a screen in the sun, miss it. Put the word beside the colour: “Sold out”, “New”. The colour then helps, and the word says it.
The same goes for filters and states: a pressed filter button should change more than its colour, and a focused card needs a ring that shows on every background (Make changing layouts feel natural).
Enough contrast
Text needs contrast against its background: at least 4.5 : 1 for small text and 3 : 1 for large text (WCAG). Grey text is where grids fail most often. A light grey for the date or the category looks elegant on a mock-up and disappears on a real screen.
Check your greys with a contrast checker, especially:
- the small line above or below the title (category, date, price);
- text on a coloured or photographic ground;
- the accent, when it colours text.
Where you set it
A card’s colours belong to its skin. Open the skin from the grid editor’s Items page (Edit skin) and choose Card › Look › Colours & fonts. It lists every colour the skin’s layers use, under Colours, and every font, under Fonts, each with the layers that use it.
Click a colour to change it everywhere at once: Change #ffffff (the colour you clicked) shows the new colour under To, a checkbox for each layer and part that uses it, and Change n, which writes the new colour into all checked layers in one step (and can be undone). A use that does not show, such as a border colour without a border, is left unchecked and says why. That is how a colour system stays a system: change the accent once, not layer by layer.
Below the lists, Colour and font themes has colour themes that set a skin’s colours in one click:
| Colour theme | What it sets |
|---|---|
| Dark cover, white text | A dark cover with white text on its layers. |
| Light cover, dark text | A light cover with dark text on its layers. |
| Clean white card | A white content area: dark title, grey text and meta. |
| Dark card | A dark content area: white title, light text, grey meta. |
| Accent colour… | One colour you pick for the skin’s buttons and icons. |
A theme is a starting point. Clean white card writes its meta in a light grey (#999999), which on white is about 2.8 : 1, under the 4.5 : 1 that small text needs: after the theme, darken that grey with Change n.
The colours also have their own places, where you find them when you edit one part of the card:
- Card › Look › Boxes & shadow: the Background of the Item box (the whole card) and of the Content box (the area below the media).
- Card › Look › Cover: the cover’s Colour over the media.
- A layer’s Look › Style: its own text colour.
The grid’s Background, behind the cards, is in the grid editor: Layout › Spacing and background. Use it with Space around the grid, so the cards do not touch the edge of the colour (Space is a design decision).
Good to know
- A skin is shared: every grid that uses it changes with it. When a skin is used by more than one grid, the skin editor asks before a change of many layers and offers Duplicate first, so you can give one grid its own colours.
- The Accent in the card’s quick bar above the stage (shown while the skin has a button or an icon) applies the theme Accent colour… with the colour you pick; text layers keep their colours.
- For a light and a dark version of the same grid, as above, duplicate the skin and change the copy’s colours: the layers, the layout and the items stay the same.
Read on
- In the manual: The skin editor, Fonts, colours and icons, Accessibility and reduced motion
- The guides: Space is a design decision, Make changing layouts feel natural