HQ Services Portfolio About Contact
About Contact

RBL Media

Visual Identity & Design System · 2026

Color Palette

+

Our color system is bold, unapologetic, and instantly recognizable. Each color serves a strategic purpose in our visual hierarchy.

Hot Pink
HEX: #FF179E
RGB: 255, 23, 158
Primary brand color
Electric Cyan
HEX: #00BCCF
RGB: 0, 188, 207
Secondary accent
Electric Yellow
HEX: #EBFF00
RGB: 235, 255, 0
Tertiary accent
Black
HEX: #0A0A0A
RGB: 10, 10, 10
Text & borders
White
HEX: #FFFFFF
RGB: 255, 255, 255
Backgrounds & cards
Off-White
HEX: #F5F4F0
RGB: 245, 244, 240
Section backgrounds

Usage Rules

Hot Pink (#FF179E) is the primary brand color. Use for CTAs, primary buttons, navigation highlights, and brand moments.
Electric Cyan (#00BCCF) is for secondary actions, hover states, and accents that need visibility without competing with pink.
Electric Yellow (#EBFF00) is for tertiary elements, highlights, and moments that need attention without being actionable.

Typography

+

Typography is the voice of our visual language. We use two typefaces: Montserrat for impact, DM Sans for clarity.

Montserrat — Headings

Get visible. Be memorable.

Brand Strategy Meets Web Design

DM Sans — Body Text

Every brand has a story worth telling. Not a tagline — a moʻolelo. The real one. The one that explains why you started, what you believe, and why your clients should trust you with their next chapter.

Specifications

Element Font Weight Size Spacing
H1 Montserrat 900 48-64px -2px
H2 Montserrat 800 32-42px -1px
Body DM Sans 400 16-18px 0px
Buttons Montserrat 900 14-16px 1px

Rules

All headings are uppercase. This is non-negotiable.
Never use em dashes (—). Use periods, commas, or line breaks.
Avoid AI-speak: "delve," "unlock," "elevate," "empower," "leverage," "dive deep," "game-changer"

Buttons

+

Buttons are hard-edged, bold, and unmistakable. Every button has a 3px black border and a shadow that shifts on hover.

Specifications

Type Background Text Border Shadow
Primary #FF179E #0A0A0A 3px solid #0A0A0A 5px 5px 0px #0A0A0A
Secondary #00BCCF #0A0A0A 3px solid #0A0A0A 5px 5px 0px #0A0A0A
Tertiary #EBFF00 #0A0A0A 3px solid #0A0A0A 5px 5px 0px #0A0A0A

Rules

Hover effect: Shift 2px down/right, reduce shadow from 5px to 2px
Font: Montserrat 900, uppercase, 1px letter spacing

Border & Shadow System

+

This is our signature design element. Every content block, card, form field, and component uses hard borders and offset shadows.

Pink Shadow

Primary content

Cyan Shadow

Secondary

Yellow Shadow

Tertiary

Specifications

Element Border Shadow (Default) Shadow (Hover)
Content Cards 4px solid #0A0A0A 8px 8px 0px [color] 4px 4px 0px [color]
Buttons 3px solid #0A0A0A 5px 5px 0px #0A0A0A 2px 2px 0px #0A0A0A
Form Fields 3px solid #0A0A0A 5px 5px 0px #0A0A0A 3px 3px 0px #0A0A0A

Hover Mechanics

Transform: translate(4px, 4px) — element shifts down and right
Shadow reduction: Shadow shrinks from 8px to 4px (or 5px to 2px for buttons)
Transition: 0.1s ease for both transform and box-shadow

Form Fields

+

Form fields follow the same hard-border, shadow-shift aesthetic as all other components.

Specifications

Property Value
Border 3px solid #0A0A0A
Shadow (Default) 5px 5px 0px #0A0A0A
Shadow (Focus) 3px 3px 0px #0A0A0A
Padding 12px 16px

Brand Voice & Values

+

RBL Media's voice is rooted in three Hawaiian cultural values and one strategic principle:

Moʻolelo

Storytelling · Legacy · Knowledge
Every brand has a story worth telling. We excavate stories and build around them.

Kuleana

Responsibility · Community Impact
We take seriously the responsibility of telling someone else's story.

Kaona

Hidden Meaning · Layered Truth
The message within the message. Brands that speak to the right people.

Intentional

Purpose-Driven · Anti-Template
We don't build on autopilot. Every decision is placed with purpose.

Voice Guidelines

We are: Direct, warm, rebellious, conversational, human, confident
We are not: Corporate, generic, buzzword-heavy, templated, apologetic
Tagline: Get visible. Be memorable. Stay profitable.

UI Components

+

Portfolio Sliders

Portfolio sliders use horizontal scrolling with drag functionality and color-coded navigation arrows:

Kajabi track: Cyan arrows (#00BCCF), beige background (#F5F4F0)
WordPress track: Pink arrows (#FF189E), white background
Shopify track: Yellow arrows (#EBFF00), beige background (#F5F4F0)

Image Treatment

object-fit: cover (always)
object-position: top (images crop from the top, not center)
Height: 500px desktop, 350px mobile

Navigation Arrows

Size: 50px × 50px (40px on mobile)
Border: 4px solid #0A0A0A
Hover: Background changes from brand color to black (#0A0A0A)