Color

Five brand colors carry the identity. Grafite is the main background and Gelo the text on it. Bruma marks the symbol and labels, Sálvia the buttons and Petróleo the K accent.

• Grafite#272727--mb-brand-grafiteThe main background of the dark brand surface.
• Gelo#f9f9f9--mb-brand-geloText on dark and the light background.
• Bruma#bbd4d5--mb-brand-brumaThe symbol and labels on dark.
• Sálvia#7eafb1--mb-brand-salviaPrimary buttons on dark, with grafite text (6.2:1).
• Petróleo#418a8d--mb-brand-petroleoThe K accent and the symbol on light. Graphics and 24px+ text only.

Rules

• The default surface is dark: bg (Grafite) with fg (Gelo) text. Use the light theme for alternate sections and printed documents, never as the site’s main look.
• Body text is fg; secondary text, captions and helper text are muted. Links are link. Eyebrow labels are eyebrow.
• One primary action per section: primary fill with on-primary text (Sálvia with Grafite on dark; teal-700 with white on light).
• accent (Petróleo) is for the K mark and small brand marks only. It never colors text: it is 3.7:1 on dark.
• symbol colors the orbital symbol and orbit drawings, never text.
• Status colors success, warning, danger and info always come with a status word (“Enviado”, “Atenção”, “Erro”, “Info”); color is never the only signal.
• Every text color passes WCAG AA (4.5:1) on bg, surface and surface-2 in both themes. Do not introduce colors outside these tokens; the teal-* and neutral-* scales are for building new semantic tokens, not for direct use.

Semantic tokens

Interfaces use semantic tokens, which change with the theme. The Tokens page lists all 19 with both values and their contrast ratios.

Role	Tokens
Grounds	bg, surface, surface-2, bubble-user
Text	fg, muted, link, eyebrow, on-primary
Actions	primary, focus
Lines	border (decorative), border-strong (controls, 3:1)
Brand graphics	symbol, accent
Status	success, warning, danger, info