Colors

Found under Theme settings → Colors. Lapels uses Shopify color schemes for every color on the storefront. There is no separate brand palette, and no section lets you set an individual color: a section picks a whole scheme, so change a scheme here and every section using it changes with it.

What a color scheme is

A color scheme is a named, reusable set of colors. You define them once in Theme settings → Colors, and then almost every section lets you pick which scheme it uses through its own Color scheme option, as does the Group layout block. That is how a page alternates grounds without you editing a single color inside a section. A warm ivory hero, an ecru product rail, one full-bleed espresso chapter break. The panels that open over the page are the exception. They take their scheme from the two settings at the bottom of this group instead.

The whole storefront starts on the first scheme in the list. The page background and its text come from it. It is also the floor every color falls back to, so nothing is ever unstyled. That holds even when you delete a scheme a section still points at.

You can add a scheme from the bottom of the group. A scheme you add yourself is immediately selectable everywhere the built-in six are, and it paints correctly with no other change.

Lapels ships three presets, chosen when you add the theme, and each carries its own palette. They are Lapels, Kaolin, and Damascene. Everything below describes the default Lapels preset. The other two ship the same six schemes with a different set of colors in them.

The six schemes Lapels ships with

• PaperWarm ivory. The page default.
  scheme-paper#F5F0E6
• EcruOne tone down. Alternate bands.
  scheme-ecru#EDE5D4
• MatMatting. Tonal beds and insets.
  scheme-mat#E7DEC9
• DuskLifted dark. A softer weight than Night.
  scheme-dusk#403528
• NightEspresso. Footers and chapter breaks.
  scheme-night#251D13
• EditorialIvory ground, moss headings and buttons.
  scheme-editorial#F5F0E6

Three of the six are light grounds a step apart, so a long page can alternate without ever looking striped. Two are dark, for the moments the design wants weight. The sixth keeps the ivory ground but moves headings and buttons to moss, which is the quietest way to mark a section as editorial rather than commercial.

You can recolor any of them, add schemes of your own, and delete the ones you do not use. They are ordinary schemes, not fixed theme colors.

The names above are this page’s shorthand. The theme editor lists a scheme by its id, the one printed under each card, such as scheme-paper and scheme-ecru. That is also what a section’s Color scheme setting shows. Shopify does not let a scheme be renamed or moved up and down the list, so those ids stay as they ship.

What each color in a scheme controls

Every scheme carries the same set of colors, grouped in the editor under three headers. The defaults below are the Paper scheme.

Background and text

Color	What it controls	Default
Background	The scheme’s page or section ground. It also fills the secondary button.	#F5F0E6
Background gradient	An optional gradient painted over the solid background. The solid stays set, so tinted surfaces still read from it.	None
Text	Default body text for the scheme, and the color of icons.	#2B2218
Heading	Headings, so a scheme can carry a heading color that differs from its body copy. Paper and Editorial share a ground and part company here.	#2B2218
Muted text	Secondary lines: captions, meta rows, helper text, and disclosures under a form field.	#564B3D
Links	Text links inside prose and rich text.	#3F4736
Borders and dividers	The source color for every rule in the theme. Lapels mixes it down to a hairline rather than drawing it at full strength, and the same color draws the secondary button border.	#2B2218

Buttons

Color	What it controls	Default
Primary button	The primary button fill, and its border.	#2B2218
Primary button label	The text sitting on top of that fill.	#F5F0E6
Button hover	The hover and active state of a button. It doubles as the scheme’s accent: in-heading emphasis, the rule beside a pull quote, and the wash behind selected text all read from it.	#3F4736

Accents and states

Color	What it controls	Default
Focus ring	The ring drawn around whatever has keyboard focus.	#3F4736
Sale	Sale prices, and both the rule and the label of the sale tag laid on a product image.	#6E2418
Sale label	The readable partner to Sale, for a surface that fills with the sale color rather than writing in it. The sale tag Lapels ships outlines instead of filling, so changing this on its own will not move anything you can see today.	#F7EFE2
Success	Positive states, such as a form field that validated and a message confirming a form was sent.	#37522F
Error	Error states, such as form validation messages.	#8C3A1E
Text over image	Text set directly on photography, where the scheme’s own ink would be unpredictable.	#F1E9DA
Sold out	The rule and the label of the sold out tag laid on a product image.	#564B3D

How those colors map to roles

Shopify assigns each scheme color to one or more functional roles so storefront elements stay consistent, including the ones Shopify draws itself. In Lapels the roles map as follows.

Role	Uses this scheme color
Text	Text
Background	Background, plus Background gradient
Links	Links
Icons	Text
Primary button	Primary button
On primary button	Primary button label
Primary button border	Primary button
Secondary button	Background
On secondary button	Text
Secondary button border	Borders and dividers

Because these are roles, one color can move several things at once. Primary button drives the button fill and its border. Background is both the section ground and the secondary button fill, which is what makes an outlined button read as cut from the page rather than pasted on it.

Several more colors are derived rather than set, so they follow your edits without a second control. Hairlines are mixed from Borders and dividers. The tonal bed a product photo sits on is mixed from Background toward Text. The scrollbar and the text-selection wash come from Borders and dividers and Button hover.

Lapels also measures each scheme’s background to decide whether it is a light or a dark ground. So browser-drawn parts land on the right side too, including a select menu’s list, a date picker, and autofill.

Contrast is your responsibility

Lapels targets WCAG 2.1 AA, and the six shipped schemes are measured against it. A scheme you edit or add is not.

Caution

Keep text at 4.5:1 against its own background, large text at 3:1, and non-text elements such as borders, icons, and the focus ring at 3:1. The pairs that break first are Text against Background, Primary button label against Primary button, and Muted text against Background. Muted text is the one most often set too light. Check every scheme you touch, not only the one on your home page.

Lapels does correct three colors for you. Sale, Success, and Error are deep by design, and they would disappear on a dark ground. So the theme measures each against the scheme’s own background. If one falls short of 4.5:1, the theme blends it toward that scheme’s text color until it clears. Of the six shipped schemes, only Dusk and Night need it. The four light ones pass untouched.

Success and Error are then measured a second time against the tonal bed a product image sits on, because that bed is a step off the ground and charges that step to everything written on it. Mat needs that second correction even though it is a light scheme.

Those are the only colors Lapels touches. Everything else in the list above is exactly the color you picked.

Popups and drawers

Below the schemes, under the Popups and drawers header, two settings decide which scheme the panels that open over the page take their colors from. They are pickers, not colors. Every actual color still lives in a scheme.

Setting	What it does	Default
Popup and dialog color scheme	Used by the search drawer, the suggestions panel that drops under the search field, and the country and language picker.	scheme-paper
Drawer color scheme	Used by the cart drawer, quick view, the newsletter popup, and the store pickup dialog.	scheme-paper

Quick view and the newsletter popup each carry an Inherit color scheme checkbox, on by default. Turn it off and that panel uses its own Color scheme setting instead of the drawer scheme, for that panel only. The image viewer and the theme’s other modal windows are set separately, in the Modals group.

Note

A drawer with a scheme darker than the page keeps its own scrollbars and its own browser-drawn controls, because Lapels declares the ground per scheme rather than once for the whole page. A night cart drawer over an ivory page looks right without any extra setting.

Related: Typography · Modals · Lapels support replies within 12 hours.