MM One ← Site
// foundations

Color

Six base colors, each with a full range from light to dark, and a set of named roles that say which shade does which job.

Each color has one job
  • Navy is the ground. Never pure black, never neutral gray. The site is dark everywhere.
  • Blue is the light: the lit 1, the ONE block, highlights, key lines. Link text uses the lighter blue so it stays readable.
  • Orange means "press this." Buttons and calls to action, nothing else.
  • Lime is rare: hover states, a "new" badge, one small detail per view.
  • Stone carries the words: paper for main text, warm gray for secondary.
  • Red is not a brand color. It appears only when something has gone wrong.
  • No gradients. The palette came from a toy truck, but its splatter texture stays on the truck.
How much of each

A rough guide for any page or frame. If lime covers more than a sliver, it has stopped being an accent.

Base colors

These are the atoms. Every color on the site comes from one of these rows. Each runs from 50, the lightest, to 950, the darkest, in steps that look even to the eye. The brand colors sit in the rows exactly as chosen and are marked BASE. Click a swatch to copy its hex value.

A square in the corner means a role uses that shade.The small number is its contrast against the page.
Roles

Roles are the names the site's code uses. A button asks for "the primary button fill," and the role decides that means orange 500. Change a role once and everything using it follows. Text roles show their measured contrast: 4.5 or more passes for body text, 3 or more for large text only.

States

A state is a thin wash laid over whatever is underneath, so hover and pressed look right on any surface.

Shadows

For things that float above the page: menus and dialogs. The shadow color is darker than the page itself, so it reads on navy. Cards that sit on the page get a lighter surface instead. See Corners and depth.

Rules
  • Site code uses roles, such as --fill-cta. It never reaches for a raw shade like --orange-500.
  • If a design needs a color that has no role, add a role. Do not invent a new hex value.
  • Orange's lighter and darker shades exist for hover and pressed, not for decoration.
  • Body text must score 4.5 or more against its background. The text roles already do, on the page and on cards.
  • To change a color, edit brand/tokens/build_tokens.py and run it. Every shade and role updates.