Colors

The Rubix palette, the semantic tokens built on top of it, and which of the two you should reach for.

Mako's colour system has two layers, and picking the right one is the whole discipline:

Semantic tokens — --primary, --muted-foreground, --destructive-background. They describe a role. Components only ever use these, and so should you.
Rubix primitives — --mako-color-blue-700, --mako-color-neutral-200. They describe a colour. They exist so semantic tokens have something to point at, and for the rare design that needs an exact brand value.

Every colour below comes from mako-ui/globals.css. Select any swatch to copy its token name.

There is no dark theme

Mako ships a single light theme — the stylesheet has no .dark block and no prefers-color-scheme query. Every token below has exactly one value.

Semantic tokens

These are the 47 colour tokens every component is built from. Each swatch shows the token, the Tailwind utility it generates, and the primitive it resolves to.

Surfaces

The page and the elevated surfaces drawn on top of it. Each pairs with a foreground token for readable text.

Brand

Rubix blue carries primary actions. The yellow tertiary is an accent — not a third button rank.

Neutrals

Low-emphasis surfaces and text. --muted is an alpha of black, so it tints whatever sits behind it instead of covering it.

Status

Four states, three tokens each: the solid colour, the readable text colour, and the tinted surface behind an alert or badge.

Controls

Borders, input outlines and the focus ring shared by every interactive component.

Charts

A five-step blue sequence for data visualisation, ordered light to dark.

Sidebar

A parallel set, so an app shell can sit on a different surface from the page without overriding the base tokens.

Code

Code block surface, text, and highlighted-line background.

The -foreground suffix is always "readable text on the matching surface", and the -background suffix on status tokens is always "the tinted surface behind an alert or badge". So a success alert is bg-success-background text-success-foreground, and the solid --success is for the icon or accent bar.

The Rubix palette

Six ramps of thirteen steps, plus black and white — 80 primitives in total. Steps run from 10 (barely tinted) to 950 (near black); 10, 25 and 50 are the tint steps used for status backgrounds, 600–700 carry the saturated brand colours.

blue

yellow

green

red

purple

neutral

Black and white

Using the ramps as Tailwind utilities

The six ramps above take over Tailwind's own colour names, so bg-blue-500 is #2f8dda and bg-neutral-200 a blue-tinted #dbe4ea — nothing to configure. They also add the two tint steps Tailwind has no equivalent for, bg-blue-10 and bg-blue-25, and text-black is Rubix's #1a1a1a rather than #000.

Primitives generate no utilities of their own — there is no bg-mako-color-blue-700. Use bg-blue-700.

Which layer to use

Reach for a semantic token in component code. It keeps a screen consistent, and it survives a retheme:

// Do — the role, not the colour
<div className="border-border bg-card text-card-foreground" />
<p className="text-muted-foreground">Secondary copy</p>
<Badge variant="success">Delivered</Badge>
 
// Don't — a raw palette class, pinned to a colour a retheme cannot reach
<div className="border-neutral-200 bg-white text-neutral-950" />
<p className="text-neutral-800">Secondary copy</p>

neutral-800 says this grey where text-muted-foreground says this text is secondary. If you find yourself reaching for the same step repeatedly for the same purpose, the real fix is a semantic token — see Overriding tokens.

Alpha and transparency

Two tokens are defined as an alpha of black rather than a flat colour, so they tint whatever sits behind them:

--muted: --alpha(var(--mako-color-black) / 4%);
--code-highlight: --alpha(var(--mako-color-black) / 4%);

--alpha() is valid Tailwind v4

It is a theme function Tailwind resolves at build time — not broken CSS. Do not "fix" it into color-mix() or rgba().

For one-off transparency, use Tailwind's slash syntax on a semantic token — bg-primary/8, border-border/64, text-foreground/72. That is how Mako's own components handle hover and disabled states, so it stays consistent under a retheme.

Recolouring Mako

Redefine semantic tokens, never components. Styling covers the full override recipe.

On This Page

Semantic tokens The Rubix palette Using the ramps as Tailwind utilities Which layer to use Alpha and transparency Recolouring Mako