Using plain CSS

You do not have to use ACSS. Patterns are made from plain, readable Etch elements with predictable class names, so you can restyle them with ordinary CSS.

How patterns are styled

Every pattern uses class names in the BEM style, for example a pattern class followed by double-underscore parts. The pattern’s main class defines a handful of custom properties at the top, such as a background color, text color, accent and border color. The rest of the pattern uses those properties.

Change the look in two minutes

1. Select the pattern’s outer sectionClick it in the Layers panel.
2. Open its CSSThe Etch CSS panel shows the pattern’s class and the custom properties at the top of it.
3. Change the valuesEdit the background, text and accent properties. The whole pattern updates, including its hover and focus states.

Fallbacks

Because each value has a fallback, a pattern renders correctly with no ACSS installed. See Patterns and your ACSS tokens.