Brand colors

A warm, grounded palette inspired by coffee and balanced with crisp slate neutrals. Use these colors consistently to keep Expressif interfaces recognizable, readable, and focused.

Core colors

The primary brown carries the brand. Accent adds warmth, link blue signals interaction, and ink anchors text and dark surfaces.

Primary

Expressif Brown

Primary actions and brand emphasis

Accent

Coffee Accent

Highlights and active indicators

Interactive

Link Blue

Links and keyboard focus

Ink

Deep Ink

Body text, navigation, and dark surfaces

Coffee scale

Use lighter values for subtle backgrounds and borders; reserve Coffee 300 for strong, warm emphasis.

Coffee 000#FAF6F1

Coffee 100#EAD8C5

Coffee 200#CDA472

Coffee 300#9A633D

Slate scale

Slate provides the neutral foundation for backgrounds, borders, secondary text, navigation, and code surfaces.

Slate 050#F8FAFC

Slate 100#F1F5F9

Slate 200#E2E8F0

Slate 300#CBD5E1

Slate 500#64748B

Slate 700#334155

Slate 900#0F172A

Implementation

Reference the shared Sass tokens instead of repeating literal values in components.

// Brand
$principal-light-color: #a66a3f;
$accent-color: #d4a373;
$link-color: #2563eb;
$principal-dark-color: #0f172a;

// Example
.primary-action {
  color: #ffffff;
  background: $principal-light-color;
}