Richaudience Brand Design System Deep-Dive

1. Brand Overview

Richaudience operates in the digital advertising and programmatic space — specifically around audience targeting and engagement. The brand’s visual system feels assertive, contemporary, and unapologetically digital. This is not a “soft” tech aesthetic; it’s a confident, high-contrast interface style that positions Richaudience as a precision-focused, performance-driven platform.

Visually, the core language leans heavily on saturated blues, deep charcoal neutrals, and crisp whites — a palette that screams “corporate tech” but with the brightness dialed up to catch the eye in a competitive feed. It’s the kind of design you expect from a company that needs to communicate trustworthiness (dark neutrals) and ambition (vivid blue).

Typography choices — almost entirely built around variations of the Maax family — feel consistent and deliberate. Maax-Medium for headings gives structure and weight, while lighter Maax weights keep body copy approachable. There’s a confident use of scale — headings jump from 15px micro-labels to 165px blockbuster H1s, showing they’re designing for high-impact hero sections as much as granular UI.

Buttons and links are designed to feel clickable without ornamental fluff. Simple bordered buttons, minimal shadows, uppercase in key spots. This is lean functionalism — they're not here to make skeuomorphic gradients. Hover states are deliberate; links either shift color dramatically or invert backgrounds. It’s interaction design that values clarity above subtlety.

Overall philosophy? A high-trust, high-performance brand with no tolerance for ambiguity in UI. They want the interface to be a dead-simple execution of their visual identity: sharp typography, locked-down palette, direct clickable affordances. This is the kind of system developers appreciate — if they stick to it.

2. Color System

2.1 Primary Colors

The primary brand color is #007bff (rgb(0, 123, 255)). Bright, energetic blue is a classic tech move — think Facebook's bright blue, Microsoft’s azure accents. It signals reliability (blue’s psychology) with urgency (this specific saturation is more “click me” than “calm down”). It’s clear from the usage data: this blue drives CTAs, link states, and animated elements (logo_canvas and .animsition-link), meaning it’s literally the motion and action color.

The choice works because:

• High contrast against white — perfect for accessibility.
• Immediately identifies interactive elements.
• Saturated enough to stand out in blue-heavy tech landscapes.

Odd omission: no softer blue or secondary states for that primary. They rely on neutrals for the rest.

2.2 Complete Palette

2.3 Color Relationships

Contrast:

• #007bff on white — WCAG AAA for large text, AA for normal text. Good.
• White on #212529 — strong, AAA compliant.
• White on #002b49 — strong, AAA compliant.

There’s no formal dark mode here. Deep Navy could be a candidate for secondary backgrounds in a darker theme, but it’s underused.

The relationship strategy:

• Primary blue for actions.
• Dark gray/black for structure.
• White as the counterbalance.
• Navy as controlled variation.

2.4 Usage Guide

Working combinations:

• Primary blue (#007bff) text or buttons on white background — best readability, high energy.
• White text on charcoal (#212529) — clear, editorial feel.
• Deep navy (#002b49) with white — premium, reserved usage.
• #0056b3 for hover — keeps action continuity without shifting palette tone too far.

Avoid:

• Blue-on-navy — kills contrast.
• Navy text on charcoal — muddy, inaccessible.
• Using primary blue for long body copy — too fatiguing.

3. Typography

3.1 Font Families

Fonts:

• Maax-Medium — used for heavier, structured headings and captions.
• Maax — lighter weight variations (200–400), used for links, body, and smaller headings.

No Google Fonts or Adobe subscription indicators — likely self-hosted custom fonts. No variable font usage here — weights are explicit.

3.2 Type Scale

3.3 Hierarchy

They go big. That 165px headline scale is massive — built for hero sections. The jump from 165px to mid-tier headlines (30px) is big, intentionally making hero copy stand alone. Microcopy at 13px uppercase gives structured labels and metadata.

Weight choices reinforce function:

• 500 weight for primary attention grabs.
• 400 for readable body.
• 200 for large decorative links.

The “uppercase small” variant (16px/heading, 13px captions) is the system’s visual shorthand for UI labels.

4. Spacing & Layout

4.1 Spacing Scale

An 8px base grid. Common values show discipline:

4.2 Layout

Breakpoints are abundant (hundreds of px markers — mobile to 2100px). This means they test across wide screen ranges, not just standard mobile/tablet/desktop.

Likely pattern:

• Mobile-first core
• Precise breakpoint work for marketing pages / ad placements up to ultra-wide displays.

5. Visual Elements

Border radius:

• 0 for most structural buttons (solid, squared).
• 24px on a rounded button variant.
• 50% for avatars/circular divs.

Shadows:

• Minimal — one decorative RGB shadow in pink (rgb(242, 40, 66) 4px 4px 0) — probably a standout design flourish.
• Functional shadow: rgba(0, 0, 0, 0.55) 0px 2px 4px -2px — subtle depth.

Borders:

• 2px solid white (common in buttons).
• 2px solid black (secondary buttons).
• Hairline white 20% alpha top borders in some dividers.

6. Components

6.1 Buttons

Variant 1 – Transparent Border Button (btnHome probably hero CTA):

• Default: Transparent background, white text, padding 6px, 0 radius, 2px solid white border.
• Hover: White background, semi-transparent white text, 0.9 opacity.
• Active: Light gray background, semi-transparent white text, subtle box-shadow in rgba(52, 58, 64, 0.5).
• Focus: White background, semi-transparent white text, faint white box-shadow outline, 0.9 opacity.

Variant 2 – Solid Black Rounded Button:

• Default: Black background, white text, padding 5px 0, 24px radius, 2px solid black border.
• Hover: Darker black #1d2124 background.
• Focus: Same darker black, no outline.

6.2 Links

Link style 1:

• Default blue (#007bff) text, no underline.
• Hover: Turns white, still no underline.

Link style 2:

• Default white text, underlined.
• Hover: Pink (#f22942) text, no underline.

6.3 Forms

No input field styles extracted — probably hidden behind authenticated views or loaded async.

6.4 Cards

By inference:
They use big padding increments (15px, 20px, 25px) and minimal radius, occasional 50% radius for imagery, rare shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-charcoal: #212529;
  --color-primary-blue: #007bff;
  --color-deep-navy: #002b49;
  --color-dark-blue-hover: #0056b3;
  --color-white: #ffffff;

  /* Typography */
  --font-heading: "Maax-Medium", sans-serif;
  --font-body: "Maax", sans-serif;
  
  --font-size-h1-xl: 10.31rem; /* 165px */
  --font-size-h1-lg: 7.00rem;  /* 112px */
  --font-size-h1-md: 4.69rem;  /* 75px */
  --font-size-link-lg: 3.02rem; /* 48.4px */
  --font-size-h1-sm: 1.88rem;  /* 30px */
  --font-size-body-lg: 1.13rem; /* 18px */
  --font-size-body: 1rem;       /* 16px */
  --font-size-caption: 0.81rem; /* 13px */

  --line-height-tight: 0.94;
  --line-height-normal: 1.50;
  --line-height-loose: 1.60;
  --line-height-extra-loose: 3.00;

  /* Spacing (px) */
  --space-3: 3px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-25: 25px;
  --space-50: 50px;
  --space-100: 100px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-md: 11px;
  --radius-lg: 24px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-pink-offset: rgb(242, 40, 66) 4px 4px 0px 0px;
  --shadow-subtle-depth: rgba(0, 0, 0, 0.55) 0px 2px 4px -2px;
}

8. AI Coding Assistant Prompt

# Richaudience Design System Specification

You are a Richaudience design expert. Build UIs matching their visual language exactly.

## Brand Context
Richaudience designs for high-trust, high-impact digital advertising. They use strong color contrasts, confident typography, and minimal ornamental styling. Interaction cues are clear and direct — hover and focus states are deliberate, not subtle.

## Color Palette
- Charcoal / Dark Gray: #212529 — menu bars, structural backgrounds, text
- Primary Blue: #007bff — CTAs, primary buttons, interactive links
- Deep Navy: #002b49 — dark backgrounds, hero accents
- Darker Blue Hover: #0056b3 — hover/focus state for blue actions
- White: #ffffff — background, text, borders
- Accent Pink: #f22942 — hover state for white links

## Typography
- Heading Font: "Maax-Medium", sans-serif
- Body Font: "Maax", sans-serif

| Level | Size (px/rem) | Weight | Line Height | Use |
|-------|---------------|--------|-------------|-----|
| H1-xl | 165px / 10.31rem | 500 | 0.94 | Hero headlines |
| H1-lg | 112px / 7rem | 500 | 1.03 | Section titles |
| H1-md | 75px / 4.69rem | 500 | 1.60 / uppercase | Emphasis headings |
| Link-lg | 48.4px / 3.02rem | 200 | 1.50 | Decorative large links |
| H1-sm | 30px / 1.88rem | 400 | 1.50 | Smaller headings |
| Body-lg | 18px / 1.13rem | 400 | 1.50 | Paragraphs |
| Body | 16px / 1rem | 400 | 1.50 | General UI text |
| Caption | 13px / 0.81rem | 400 | 1.50 / uppercase | Labels |

## Spacing & Grid
Base: 8px grid
Tokens: 3px, 5px, 6px, 8px, 15px, 16px, 20px, 25px, 50px, 100px
Use: multiples of base for paddings, gaps, margins

## Border Radius
- None: 0px — primary CTA button (bordered)
- md: 11px — misc div containers
- lg: 24px — black rounded button
- full: 50% — avatars, circular icons

## Shadows & Depth
- Accent: rgb(242, 40, 66) 4px 4px 0px 0px — decorative offset
- Depth: rgba(0,0,0,0.55) 0px 2px 4px -2px — subtle elevation

## Component Specifications
### Primary Button (`btnHome`)
Default:
- background: transparent
- color: #ffffff
- padding: 6px
- border-radius: 0px
- border: 2px solid #ffffff
Hover:
- background: #ffffff
- color: rgba(255,255,255,0.5)
- opacity: 0.9
Active:
- background: #e9ecef
- color: rgba(255,255,255,0.5)
- box-shadow: rgba(52,58,64,0.5) 0px 0px 0px 0.2rem
Focus:
- background: #ffffff
- color: rgba(255,255,255,0.5)
- box-shadow: rgba(255,255,255,0.4) 0px 0px 0px 0.2rem
Font: Maax 15px, 400

### Secondary Button (solid black)
Default:
- background: #000000
- color: #ffffff
- padding: 5px 0px
- border-radius: 24px
- border: 2px solid #000000
Hover:
- background: #1d2124
Focus:
- background: #1d2124
Font: Maax 15px, 400

### Navigation Links
Blue variant:
- default: color: #007bff, no underline
- hover: color: #ffffff
White variant:
- default: color: #ffffff, underline
- hover: color: #f22942, no underline

### Inputs
No data — maintain spacing scale, border radius consistent with buttons

### Cards
Background: #ffffff
Border-radius: 0 or 11px
Padding: 15px or multiples

## Layout & Responsive Rules
Breakpoints at: 320px, 375px, 576px, 768px, 992px, 1200px, 1400px, 1600px, 2100px
Mobile padding: 15px
Desktop section gap: 50px–100px

## Interaction Rules
- State transitions: 150ms ease
- Focus indicators: visible box-shadow outlines matching element color
- Hover transitions: immediate color change, no delay

## DO List
- Use ONLY colors from the palette.
- Keep all spacing multiples of 8px.
- Use Maax-Medium for H1-H3, Maax for body and smaller labels.
- Maintain uppercase where specified.
- Use 2px borders for buttons — matching color to text.
- Keep link hover styles consistent with palette.

## DON'T List
- Don’t add drop shadows outside defined set.
- Don’t mix rounded and squared corners in the same component.
- Don’t invent new blues.
- Don’t use gradients.
- Don’t remove uppercase from label styles.

## Code Examples
Primary Button:
```css
.btn-home {
  background: transparent;
  color: #fff;
  padding: 6px;
  border: 2px solid #fff;
  border-radius: 0;
  font-family: 'Maax', sans-serif;
  font-size: 15px;
  font-weight: 400;
  transition: background 150ms ease, color 150ms ease;
}
.btn-home:hover {
  background: #fff;
  color: rgba(255,255,255,0.5);
  opacity: 0.9;
}
```

Secondary Button:
```css
.btn-secondary {
  background: #000;
  color: #fff;
  padding: 5px 0;
  border-radius: 24px;
  border: 2px solid #000;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: #1d2124;
}
```

Card:
```css
.card {
  background: #fff;
  border-radius: 11px;
  padding: 15px;
  box-shadow: rgba(0,0,0,0.55) 0px 2px 4px -2px;
}
```

9. Summary

TL;DR — Richaudience’s design system is high-contrast, typographically disciplined, and interaction-focused. It’s all about clear CTAs, locked-down palette control, and big type for hero content. Get the colors wrong and the brand collapses.

Brand Keywords

• tech-confident
• high-contrast
• strict-palette
• typography-driven