This is the source of truth for color values in the palette. If a color in the design file differs slightly, consider using the value from here. If it differs significantly, it may be worth checking with the designer.

Each variable stores a full color value, for example: rgb(253, 47, 75). To apply transparency, use color-mix() directly in selector properties — this keeps the token list short and makes opacity intent explicit in the code.

• Pages are composed of stacked full-width sections, not column grids. Each section is independently sized and self-contained — they can be reordered without side effects. Complex layouts live inside sections, not across them. Navigation is an exception: it may be fixed or sticky, and is not part of the section flow.
• Components carry a default bottom margin (var(--m__default-margin-bottom)) and no top margin. This keeps vertical stacking predictable and makes it easy to top-align elements placed side by side.
• Spacing between sections or before headings is handled with explicit spacer elements (.m__space), not margins on content elements. The idea behind this is that content elements can't know what spacing is appropriate in every context — that's why the spacer should be placed by whoever assembles the layout.

This section is a work in progress.

This section is a work in progress.

This section is a work in progress.

• Every clickable element must change on hover. No non-clickable element should. The hover area and the click area must be identical — and where possible, both should be larger than the visual size of the element to make targeting comfortable.
• Acceptable hover changes: recoloring text or underline (including opacity), brightening an image, elevating a block. Avoid inverting color or contrast, zooming an image inside a block, or hiding existing content.
• Hover always responds instantly — zero transition, no exceptions. Unhover animates back, 0.3–0.5s. All elements within a block animate in sync, in both directions.
• If an element is meant to animate on scroll, then: entering the viewport transitions it to its active state (≈0.3s); leaving returns it to its initial state (≈0.1s); this can repeat indefinitely. Scroll position only triggers the state switch — it never drives the animation phase directly.