Skip to content
Longport Whale
Design System

Brand

The Whale brand color, logo usage, and voice

Whale’s identity is carried by one purple, used with restraint. Brand presence comes from a confident, quiet interface — not from painting surfaces purple.

Brand color

The Whale brand color is Whale Violet #7245F2, sampled from the brand mark. It is the anchor of the full primary ramp and is applied only as an interactive and identity cue.

Token Value Role
Whale Violet (primary) #7245F2 The single strongest interactive cue and brand identity
Primary hover #5B30E0 Hover state of a primary control
Primary foreground #FFFFFF Content on a solid primary surface
Subtle brand surface #F7F3FF Quiet brand-tinted background for selection

Using the brand color

  • Reserve the brand color for the single primary action in a view, active navigation, focus rings, and small identity cues.
  • Keep body text, headings, data, and code in the neutral foreground colors.
  • Never use the brand color to signal status. Success, warning, and error meaning live on the semantic status colors.
  • Never use purple vertical bars, left borders, or decorative strips to show selection or importance.
  • Selected navigation uses semantic alpha blending of the primary (primary/10, then primary/15 on hover), never a raw brand-color fill.
  • Use the provided light and dark logo lockups; pair each with the matching color mode.
  • Preserve clear space and minimum size; do not recolor, rotate, stretch, or add effects to the mark.
  • The compact mark is for favicons and tight identity slots; the full lockup is for primary placements.

Voice

  • Write for professional financial operators and integrators: direct, task-first, and precise.
  • Lead with what the reader does or needs to know; keep tone quiet and factual.
  • Preserve original casing for identifiers, amounts, dates, and code — never restyle technical values to look more branded.
Whale Docs