Johnny SuedeSuede AI founder. Author. Musician. Jason Colapietro.

Color systems

How to pick three colors that will still work in five years.

Choose roles before colors

A practical palette starts with jobs: background, readable text and emphasis. Pick the background first, then a text color that remains clear on it, and finally an accent for the primary action or a small recurring detail. Write those roles beside the color values. The same hex code can be attractive in an image and hard to read in small text, so judge each color in the role where it will actually appear.

Compare a few deliberate alternatives

Use the same cover or page layout to compare two or three palettes. Change the colors while keeping the content and type fixed, so you can tell what the palette contributes. Look for a combination that suits the music and the available photography. Loud music does not require a saturated palette, and quiet music does not require muted colors. Make the choice from the work rather than from a genre stereotype.

Check readability in context

Test body text, captions, buttons and links against their real backgrounds with a contrast checker. Also inspect the page on a phone in ordinary light. Do not rely on color alone to identify an active item, a warning or a link; use a label, underline or another visible cue. An accent that works for a large shape may need a darker companion for text. Record that companion as a named role instead of improvising a new color on every page.

Plan light and dark versions

Create one sample on a dark surface and one on a light surface. Adjust the mark and text deliberately rather than inverting the entire design. Check transparent image edges, outlines and shadows, which can disappear or look untidy on the alternate background. Save both approved versions with clear filenames. The Suede brand reference linked below shows why the background and the chosen mark variant need to travel together.

Turn the palette into a handoff

Give collaborators a small sheet showing the colors, their roles and a few correct placements. Include one example of an accent used sparingly and one layout with no accent at all. For a release series, decide which roles stay constant and which may vary from song to song. Recheck new photography against the palette before publishing: a system should make the work coherent while leaving room for the next release to have its own identity.

The Suede palette

Backgrounds run from black (#090A0D) to deep navy (#0B0D14). The accent is a restrained deep navy blue (#1B4F8A), sampled from the logo, with a muted slate blue (#3A6090) for the wordmark label. The rule that holds it together: accents stay muted and professional.

One shared stylesheet

This site and jasoncolapietro.com start from the same page stylesheet: one background (#0B0D14), one text color (#E8E9EE) and a per-site accent, violet (#5A4A8A) here and the Suede accent blue (#1B4F8A) there. Each site then adds a few touches of its own, such as its social card color, so the shared stylesheet is the part to keep consistent.

Dark and light, in practice

The Suede S-mark is drawn for dark backgrounds, and it has a reversed version for white. Putting the standard mark on white without it is on the brand system's list of misuses. Plan the light-background version of a mark and its accent before the first release.

Reference