Colors & palettes — Techno docs

Every color in Techno comes from ten settings. "Color palette" fills all ten at once. You can then change any single color to make an exception. Borders, hover fills and overlays are mixed from those ten colors automatically, so they follow whatever palette is active.

The four palettes

Theme settings › Colors › "Color palette", the first setting in Colors:

Palette	Page	Look	Hover glow
Techno	Near black	The signature palette: cyan text and lines, lime accent. The default.	Yes
Dreamy	Deep navy	A softer dark palette with blue lines and a violet accent.	Yes
Blueprint	Light gray-blue	Navy lines on white panels, rust accent. Pairs well with "Show grid overlay".	No
Monolith	Warm light gray	Paper and graphite, with a brick accent.	No

Dark palettes (Techno, Dreamy) add a faint glow to buttons on hover. Light palettes (Blueprint, Monolith) use the hover fill only.

The palettes aren't separate installs: switch between them with this one setting at any time.

Note

Shopify adds its own "Theme style" entry at the bottom of Theme settings. It lists the theme's presets, Techno, Flagship and Datasheet, not the palettes (see Presets). Choosing a theme style replaces the palette and clears the ten colors below it, so any color you changed follows the palette again. It also replaces the font, text size, page width and margin, the scanline overlay, grid overlay and boot sequence, system chatter, currency code, the back-to-top button and its position, and the product cards' quick view, quick add, swatch and second-image settings. It turns "Use a custom logo" off, sets "Logo width" back to 180 px and sets "Free dispatch over" back to 0, so afterwards set your colors again, turn your logo back on and re-enter your amount. Use "Color palette" to switch colors only.

The ten colors

Theme settings › Colors, below "Color palette". Each color has a job. Change the one whose job matches what you want to change.

Setting	Controls
"Page background"	The page behind everything
"Page text"	Default text, including outlined buttons, badges and drawer links
"Panel background"	The inside of panels: product cards, the product gallery, drawers, search results
"Button background"	The fill of primary buttons such as "Add to cart" and checkout, and the backdrop behind product images. Filled controls use the "Headings and button text" color.
"Headings and button text"	Headings, product titles, text on primary buttons, and text typed into form fields
"Body text"	Paragraphs, product and article excerpts, rich text, footer links
"Secondary text"	Metadata and labels: SKUs, dates, form labels, compare-at and unit prices, "Sold out"
"Lines and borders"	Panel borders and panel header labels, drawer edges, the hero cursor. Hover fills, dividers and input borders are mixed from this color.
"Accent"	Prices, "In stock", panel status text, the current page in menus and pagination, the active tab or tag, selected options, and keyboard focus rings
"Alerts"	Sale prices and badges, low stock, form errors, "No match" messages

Overriding a color

A color follows the palette until you set it. In Colors, a color that follows the palette shows "From palette" instead of a swatch, because its value depends on the palette you pick. The preview shows the palette's real colors.

Color palette      →   sets all ten colors
     ↓ overridden by
A single color     →   your exception, for that one color only

To override: pick a new value for that color. It stays when you switch palettes, even when it's one of the Techno palette's own colors, listed in the Theme settings reference.
To go back to the palette: clear the color with the clear button at the end of its field. The field shows "From palette" again, and the color follows the current palette. A color whose hex value you delete shows "Transparent" and also follows the palette.

Keep contrast in mind

Techno's four palettes are checked against WCAG contrast requirements: 4.5:1 for body text and 3:1 for control borders and icons. The borders on inputs and buttons are mixed from "Lines and borders" and "Accent" at strengths chosen to pass in every palette.

When you change a color, the theme can't check your new combination for you. After changing a text color, background color, "Lines and borders" or "Accent":

Check the new text color against "Page background" and "Panel background" with a contrast checker. Aim for at least 4.5:1.
Check that input and button borders are still easy to see on panels.
Check the sale badge and error text, which use "Alerts".

Recipes

Light storefront with a drafting-table feel

Theme settings › Colors › "Color palette": "Blueprint"
Theme settings › Motion and effects › "Show grid overlay": on

Brand accent on the Techno palette

Theme settings › Colors › "Color palette": "Techno"
Theme settings › Colors › "Accent": your brand color, checked for 4.5:1 against the page and panel backgrounds

Start over

Theme settings › Colors: clear every color you changed. All ten colors show "From palette" and follow "Color palette" again.