Brand colors

Warm gold, balanced with slate and charcoal. Use these colors consistently to keep DubUrl interfaces recognizable, readable, and focused.

Core colors

Gold draws attention to primary actions. Blue-gray supports the brand, slate signals interaction, and charcoal anchors text.

Primary

DubUrl Gold

Primary actions and active indicators

Secondary

Blue-gray

Secondary accents and decorative borders

Interactive

Slate

Links, navigation, and dark surfaces

Ink

Charcoal

Headings, body text, and text on gold

Brand tones

Use gold for primary buttons and selected indicators, amber for warnings, blue-gray for decorative accents, and slate for navigation and links. These are existing brand tones, not new shades.

Gold#FEC156

Amber#FBB418

Blue-gray#8399A6

Slate#3A515F

Neutral tones

White and light grays provide surfaces and subtle dividers. Muted gray supports metadata; dark gray and charcoal anchor code blocks and text. Use off-white #F7F7F7 for code on dark gray.

White#FFFFFF

Surface#F5F5F5

Soft border#EBECEE

Border#E5E5E5

Muted#6E747C

Code#393939

Ink#1F1E23

Implementation

The theme maps the palette to Just the Docs roles in _sass/color_schemes/duburl.scss instead of repeating literal values in components.

// Brand
$btn-primary-color: #FEC156;
// Decorative blue-gray: #8399A6
$sidebar-color: #3A515F;
$body-text-color: #1F1E23;

// Example
.primary-action {
  color: $body-text-color;
  background: $btn-primary-color;
}