ALWAYS BE DRAWING

Opal is where your favorite brands plan, build and deliver great content.

Overview

Marketers everywhere are scraping together static tools not built for modern marketing. How do you cut through the noise in a crowded space and truly connect strategy to execution? Opal needed a brand that could show up as a true friend of the marketer.

System

This identity system translates that promise into color, type, motion, and product UI — sharp enough for the boardroom, warm enough for the craft table — so Opal can scale from pitch deck to dashboard without losing its voice.

01—Logo

Opal — two-tone-white lockup (white mark, ink wordmark) on Opal blue

Primary logo

Opal — two-tone lockup on light field
Two-tone logo
Reverse logo
Alternate logo
Alternate logo
Alternate logo
Alternate logo

02—Color

A spectrum of light

Primary — Opal Blue

Opal Blue
#2A70EA RGB · 42, 112, 234 HSL · 218°, 81%, 54% CTAs, links, primary UI
100% #2A70EA
80% #4E87EE
60% #7AA4F2
40% #A6C1F6
20% #D3E0FA
10% #E9F0FD

Cool grays

  • Gray 900 #0A0C10
  • Gray 800 #141820
  • Gray 700 #1E2330
  • Gray 500 #4A5468
  • Gray 300 #9AA3B4
  • Gray 100 #E8EBF0
  • Gray 50 #F4F6F9

Iridescence — full scales

Opal Pink
900 #593a44
800 #6a4a54
700 #7d5b6a
500 #F2A7C3
300 #f5c9d6
100 #f8e0ea
50 #faf0f4
Opal Mauve
900 #534a58
800 #645a6a
700 #766a7c
500 #D4A8D8
300 #e4c4e0
100 #f0daf0
50 #f7eef7
Opal Sage
900 #3a4a40
800 #4a5c52
700 #5a6c64
500 #A8D4B8
300 #c8e6d8
100 #ddefe6
50 #eef7f0
Opal Lilac
900 #4a4258
800 #5a5270
700 #6a6488
500 #B8A8E8
300 #d0c8f0
100 #e4dff8
50 #f2eefc

Semantic

Success #3DB87A Positive states
Warning #F5A623 Caution states
Error #E8445A Destructive / error
Info #2A70EA Same as brand blue

03—Typography

The future of marketing is visual. 96px · 500 · VC Garamond Condensed
Campaign intelligence. 64px · 500 · VC Garamond Condensed
Built for creators. 48px · 500 · VC Garamond Condensed
Launch faster, iterate smarter. 32px · 700 · Apercu
Opal gives marketing teams clarity without slowing them down. 24px · 400 · Apercu
Body copy. Every feature ships with opinionated defaults that keep work moving. 16px · 400 · Apercu
Caption / supporting text. 14px · 400 · Apercu
HEX #2A70EA · LABEL · METADATA 12px · 700 · Apercu

“Creativity is the budget-friendly multiplier when systems are sane.”

Pairing

VC Garamond Condensed carries launch moments and narrative weight. Apercu handles operations, density, and UI so the product stays legible from first login to end-of-quarter reporting.

Type on color

Precision without the noise.

Signal you can see across the org.

Editorial calm for fast-moving teams.

Warmth for moments that celebrate progress.

Next Project