Every value on this page is bound to a variable in the Direct Brand collection and renders live, so a token change shows up here first. The collection keeps its original name; since 2026-09-07 its base and Dark modes carry the Fri3nds brand. Use only the classes shown here.
Five decorative colours, used only on team cards, why-choose-us cards, principle cards and the colour wave. Never for text, never as a page ground.
u-grid-12 is the page grid. It halves to six columns at 479 and below, where the row gap stops matching the column gap: 24px between rows against 12px between columns. There is no max-width container, so the grid runs the full viewport inside the page inset.
This section carries u-bg-dark, which applies the Dark variable mode. Background, text and surface tokens resolve to their dark values with no extra classes on the children.
u-text-body is the paragraph style. On the source site a paragraph was forced to uppercase mono, so body copy lived in divs. Here a paragraph is a paragraph, set in Lexend at 16px with a line height of 1.5 so wrapped copy reads properly.
Values are the pixels the source site renders at 1440. The stepped root font size that made these scale per breakpoint has been removed, so a space token is one number everywhere.