Flat, direct names — no BEM, no prefixes
Classes describe what they are, not where they live. No underscores for modifiers, no parent__child patterns. If it's a button, it's .cta-green — not .hero__cta--green
.cta-green
.flexbox-v
.body4
.spacer-32px
.navbar-link
.footer-link
Typography: semantic scale names
Headings use .h1 through .h6 — applied as utility classes, independent of HTML tag. Body text follows the same pattern: .body1 through .body4, plus .eyebrow and .footnote.
.h1 → .h6
Inter Tight · size decreasing · weight 500–600
.body1 → .body4
Inter · size decreasing · weight 400
Spacing: explicit pixel values
Spacers use exact pixel values in the class name — no abstract sizes like "small" or "medium". The value IS the name. Applied as empty divs for vertical rhythm.
.spacer-12px
.spacer-16px
.spacer-24px
.spacer-32px
Same pattern for gaps: .gap-8px .gap-16px .gap32px .gap-48px
Color utilities: hex in the class name
Text color overrides use the actual hex value as the class name. No "primary", "secondary" abstractions — the color IS the identifier.
.color222 → color: #222
.color444 → color: #444
.color-555 → color: #555
.color-ff8c5a → color: #ff8d5c
Layout: functional class names
Layout classes describe their function. Flex? It's .flexbox. Vertical flex? .flexbox-v. Centered? Add .center. Columns use an underscore-number prefix: ._3col, ._7col, ._8col.
Flex direction
.flexbox → row | .flexbox-v → column
Alignment modifiers
.center → both axes | .flexbox-space → space-between
Column widths
._3col → 292px | ._7col → 724px | ._8col → 832px
Grid shorthand
._2col-grid → 1fr 1fr, gap 32px
CTAs: color is the variant
Button classes follow .cta-{color} pattern. Each shares the same shape (pill, 100px radius, 12px 22px padding, 14px SemiBold) — only the background changes. Hover states cross-swap colors.
.cta-green → bg: #35a86e, hover → coral
.cta-orange → bg: #ff8d5c, hover → green
.cta-blue → bg: #29b5e8 (Snowflake pages)
.cta-outline → border only, coral
Section structure: wrapper → container → content
Every page section follows this DOM pattern. The .section-n wrapper controls background and padding. The .container constrains width. Content flows inside with spacer divs for vertical rhythm.
<section class="section-n section-bg-1st">
<div class="container">
<div class="eyebrow">Label</div>
<div class="spacer-12px"></div>
<h2 class="h2">Heading</h2>
<div class="spacer-24px"></div>
<p class="body2 color-555">Description</p>
<div class="spacer-32px"></div>
<a class="cta-green w-button">CTA</a>
</div>
</section>
Composition: combine classes, don't nest
Modifiers are added as extra classes, not child selectors. A centered vertical flex container with 16px gap is three classes on one element.
<div class="container flexbox-v-center">
<div class="container flexbox-space center">
<div class="container flexbox-center gap32px">
<div class="flexbox-v gap-16px">
<p class="body4 color222">
<h6 class="h6 color-ff8c5a no-margin">