Colors

What it controls

Munich has no color pickers inside sections. Every section has a Color scheme setting, and the scheme decides the whole surface: background, secondary background, text, secondary text, border, hairline, primary button, button label and accent. Change a scheme here and every section that uses it follows.

The nine roles:

• Background: the section surface.
• Secondary background: tinted boxes, product tiles, the buy box benefits, input fields.
• Text and Secondary text: headings and body, then captions and meta lines.
• Border and Hairline: outlines of cards and fields, then the fine dividers between rows.
• Primary button and Primary button label: the solid button. Outline buttons use the text color.
• Accent: labels, links, icons, star ratings, the marquee band.

Focus outline color is the outline drawn around the element a keyboard user has reached. Keep it visible against every scheme you use.

The five schemes as shipped

Scheme 1 is the warm paper background of the page, scheme 2 is white for cards that sit on that paper, scheme 3 is a deeper tint for boxed content, scheme 4 is the dark brand surface for chapter sections and the footer, and scheme 5 is a near black for contrast sections. You can rename none of them, but you can change every color.

How it connects

Every section, every block that has a surface of its own (bundle cards, guarantee card, contact options cards) and the theme settings for badges read from the schemes. The cart drawer and the header follow the scheme set on their sections.

Setting it up

1. Open scheme 1 and set Background, Primary button and Accent to your brand. Leave text near black unless your background is dark.
2. Open scheme 4 and set the dark surface. Make sure Text and Accent are light enough to read on it.
3. Look at the home page and the product page. Then adjust schemes 2, 3 and 5, which are variations of the first two.