Color schemes and typography
ÉLAN's five color schemes and their roles, the selection mark, and the three font roles with their type scale.
Theme version 1.0.0Updated
On this page
Color schemes
ÉLAN uses five color schemes. Each one defines a set of colors that work together. Every section has a Color scheme setting, so editing a scheme updates every section that uses it.
Open Theme settings → Colors and select a scheme to edit it.
| Color | Where it’s used |
|---|---|
| Background | The section’s background. |
| Background gradient | Optional. Replaces the solid background on sections that use this scheme. |
| Text | Headings and body text. |
| Secondary text | Captions, notes and other quieter text. |
| Lines and borders | Input borders and table rules. Keep it visible against the background. |
| Selection mark | Marks chosen options, the current page and added items. If it’s too faint against the background, the theme uses the text color instead. |
| Button | The button’s fill. |
| Button label | Text on buttons. |
Keep text readable
- Keep Text and Secondary text at a contrast of at least 4.5:1 against the Background. Shopify’s editor warns about low contrast.
- If you add a Background gradient, check text over both ends of it.
- Check dark schemes too: the Index, the footer and some home page bands use them.
Which scheme goes where
Each preset assigns schemes to sections. For example, the footer uses scheme 2 by default, the Index uses its own scheme in the Header settings, and the product page’s mobile add bar uses Mobile add bar color scheme. To change one section only, change that section’s Color scheme setting rather than editing the scheme.
The selection mark
The selection mark is ÉLAN’s hand-drawn mark for “chosen”: the selected option on a product page, an active filter, the current item in the Index, and a product just added to the cart. Choose its look in Theme settings → Colors → Mark style:
- Pencil ring: a loose hand-drawn ring.
- Drawn frame: a hand-drawn rectangle.
- Underline: a hand-drawn line beneath.
The mark is never the only sign of a selection. Screen readers and keyboard users always get the state too.
Typography
All fonts come from Shopify’s font library. Bold and italic styles load automatically when the family has them.
| Setting | What it sets |
|---|---|
| Display | Headings, product names on product pages and the footer signature. |
| Editorial text | Statements, ledes and article body text. |
| Interface | Body copy, navigation, buttons, prices and labels. Choose a clear sans serif. |
| Type scale | Compact, Editorial or Monumental. Changes heading sizes only. |
| Set display text in italic when available | Sets every display heading in italic. To italicize single words instead, use italics in a heading field. |
| Uppercase interface labels | Sets navigation, buttons and labels in spaced capitals. Turn it off for a softer, sentence-case interface. |
Tips for choosing fonts
- Pair one expressive Display font with a calm Interface font.
- Prices and quantities use the Interface font. Check numerals look clear at small sizes.
- A font with many styles (weights and italics) gives headings with italic words their intended look.
- To use your own font files, you’d need to edit code. The Theme Store requires themes to use Shopify’s font library, and custom fonts aren’t covered by theme support.
Related guides
Didn’t find what you need? Contact ÉLAN support. We reply within two business days.