Design
Typography
Theme settings > Typography.
Atelier pairs a display serif for headings with a clean sans for body text, navigation, and buttons.
| Setting | What it does |
|---|---|
| Heading font | The display face used for headings and prices |
| Heading size | Scales every heading at once, from 80% to 130% |
| Heading letter spacing | Negative values tighten large headings, which usually reads better |
| Heading line height | Lower values suit large display headings |
| Use uppercase headings | Sets every heading in capitals |
| Body font | Used for body text, and by default for navigation and buttons |
| Body text size | Scales body text from 90% to 120% |
| Body line height | Higher values are easier to read in long passages |
| Navigation and button font | Follow the body font or the heading font |
| Navigation and button letter spacing | Wide spacing is what makes small type read as editorial |
| Use uppercase navigation and buttons | On by default |
Headings scale smoothly between phone and desktop, so you do not set separate sizes for each.
Colors
Theme settings > Colors.
A color scheme is a complete set: background, body text, headings, secondary text, lines, accent, buttons, and status colors. Sections refer to a scheme by name, so editing a scheme updates every section using it.
Atelier ships with five schemes. Alternating two of them down a page is the simplest way to give it rhythm.
Every background color has a matching text color, which means a section can never end up with text that cannot be read on its own background. The defaults meet the WCAG AA contrast requirement of 4.5:1 for body text. If you change them, check that they still do.
Accent is used sparingly: the section numbers, and focus outlines.
Spacing
Theme settings > Layout > Vertical rhythm sets the space between sections across the whole store, from Compact to Editorial. Sections do not each carry their own spacing control, which is what keeps a long page consistent.
Page width and Page margin set the content column and the space either side of it.
Corner radius is 0 by default. Atelier is drawn with square corners and hairline rules rather than rounded cards, and it looks most like itself that way.
Motion
Theme settings > Animations.
- Content reveal. None, Fade in, or Fade and rise as content enters view.
- Image hover effect. None, Zoom, or Show second image. The second image option needs a second image on the product.
Hover effects apply only where there is a real pointer. On a phone, nothing depends on hovering.
All motion is switched off automatically for visitors whose device asks for reduced motion. That is a system setting they control, and the theme respects it without you doing anything.