boldmail← back to website

boldmail.io / Website brand guidelines

Signal with intent.

This is the public-facing visual language for boldmail.io: marketing pages, launch material and web assets. It is intentionally separate from the Console Design System.

01 / Foundation

The website is a confident signal.

Blue carries the field, amber carries the action, and pale lilac provides breathing room. The message should be direct, technical and human—never generic enterprise software.

Wordmark

Use one word: boldmail. “bold” is white; “mail” is amber on the blue field. The .io belongs in URLs and formal product references, not the homepage masthead.

Primary palette

ULTRADEPTHVOIDCLOUDAMBER

#1F3BE0 is the field. #FFB300 is reserved for attention, primary actions and the “mail” wordmark.

Typography

ARCHIVO
JETBRAINS MONO / LABELS / SYSTEM DATA

Archivo is wide, assertive and uppercase for headlines. JetBrains Mono is used sparingly for labels, code and operational facts.

Layout & surfaces

Use generous bands, a thin blue grid line and large uppercase display type. Blue is the default canvas; lilac is the explanatory surface; near-black is for code, proof and the closing moment.

What belongs here

  • Marketing claims, product explainers, public docs and campaign material.
  • Clear European hosting proof, product constraints and developer credibility.
  • High contrast: cloud on ultra/void, void on lilac/amber. Amber should never carry long-form text.

02 / Motion and details

Calm, quick, legible.

Movement should reinforce information arriving—not manufacture excitement. The interface should still fully communicate with motion disabled.

Entrance

Content may rise 14px into place over 600ms using a soft, decelerating curve. Stagger only related elements, in small increments.

Interaction

Buttons and hover states respond in 120–180ms. Keep movement to a single-pixel press or a surface shift; never make navigation feel delayed.

Accessibility

Respect prefers-reduced-motion. Preserve visible focus with an amber outline. Colour communicates hierarchy, never the only state signal.

Favicons

Production uses the blue mark with the amber dot. Development uses the yellow-mark variant so environments are unmistakable at a glance.

Boundary: Console UI colours, navigation patterns, rails and dense operational cards are documented in the admin-only Console Design System—not on this page.