Colors

Overview

These are not the product's colours. Rogo has two palettes:

They look similar and they are not interchangeable. The marketing green is rgb(19, 91, 69); the product's --brand-primary is rgb(19, 91, 68). Using one where the other belongs produces a surface that is almost right, which is the hardest kind of wrong to catch in review, so the --marketing- prefix exists to make a cross-import visible in a diff.

Never use --marketing-* in apps/frontend or any other product surface, and never use product tokens on a brand surface. If a product surface is missing a colour, add it to the product palette rather than reaching across.

@import "@rogo-technologies/brand/styles";

Swatches copy their class on click, and the hex on ⌘-click, the same behaviour as the product palette, because it is the same component.

Every token is available as a raw custom property and as a Tailwind utility:

<section style={{ backgroundColor: "var(--marketing-cream)" }} />
<section className="bg-marketing-cream text-marketing-forest" />

Greens

Rogo's own colours. primary is the brand green; forest is the deep ground inverted sections sit on.

Neutrals

The ramp runs dark → white, with cream and warm-white as the warm page grounds that give the brand its paper feel. Body copy is dark; secondary copy is gray-dark.

Supporting

muted is translucent white for copy set over imagery. border is the brand's hairline.