Color
A short palette where each color has a job. Here you will see the name of each color, when to use it and on which backgrounds it reads well.
Brand
The two colors that identify Starshot: Ink on the web and Starshot Blue in the logo and brand pieces.
Blues for buttons and links
For everything that can be clicked: links and buttons.
Backgrounds and borders
color-white and color-surface-subtle for backgrounds; color-border-default for decorative lines and dividers; color-border-strong for field and control borders.
Text
Six text colors. The four for light backgrounds meet the recommended contrast on color-white and color-surface-subtle.
Accents
Two colors for occasional use, to highlight.
Status colors
They show success, warning, error or info. They are not used as text color: they go as a background or as an indicator, with text-primary text on top.
Which pairs are easy to read
Contrast measures how much one color stands out from another, from 1 (nothing) to 21 (maximum). We follow WCAG, the international accessibility standard: normal text needs 4.5 or more (level AA, the recommended one: it reads without effort); large text — 24 px or more, or 18.66 px bold —, icons and graphics need 3 or more. From 7 it is excellent (level AAA).
All text colors for a light background read well on color-white and color-surface-subtle. Status colors and color-accent-star are not used as text. Starshot Blue is not used on buttons or links; on color-surface-subtle, only in large text or graphics.
Gradients
Four brand gradients and when to use each.
The 2021 rainbows, the ones from old pieces and the grays from mockups. Use a flat color or a photo instead.