Unrulymedia (Nexxen) Design System Deep-Dive

Reverse-engineered from https://nexxen.com/

1. Brand Overview

Unrulymedia, now under the Nexxen umbrella, positions itself as part of a global advertising and CTV technology ecosystem. Their digital presence feels sharp, forward-facing, and unapologetically tech‑centric. You get the sense that this brand wants to be taken seriously by data‑driven marketers—but still remain accessible and energetic enough to attract creative partners.

At first glance, the design language is clean, efficient, and somewhat corporate, but with a few quirks showing through—like that shock of neon green (#8cf585) against an otherwise deep plum‑navy backdrop (#15003b). That contrast says a lot. It’s restrained sophistication punctuated by calculated boldness.

Typography is handled with a single variable workhorse: Poppins, sourced from Google Fonts. No serif, no decorative accompaniments—just a modern geometric sans that scales easily across touchpoints. You can tell this design was built inside a modular system, probably with Elementor and Vuetify, aiming at consistency across marketing and product experiences.

Interaction design follows “tech minimalism.” Buttons are pill‑shaped; hover states lift slightly with soft shadows (rgba(0, 0, 0, 0.2) 0px 10px 20px); and color cues never shout. The primary palette builds strong contrast around #15003b (almost-black indigo) and #ffffff. The rest of the palette sticks to muted grays for secondary content, saving punches of color for active or focus states.

The result: corporate clarity meets subtle playfulness. You could drop this UI into an enterprise dashboard and it would look right—but it also breathes enough to feel inviting. No skeuomorphism, no gradients, no noise. Just typographic rhythm and color discipline. I like that level of restraint. It’s how a grown-up ad‑tech brand should behave online.

2. Color System

2.1 Primary Colors

Unrulymedia / Nexxen’s entire visual foundation rests on the deep purple‑navy #15003b. It appears in borders, buttons, and navigation. It’s dignified without being dull. This tone anchors the entire interface—a confident gesture in a sea of SaaS blues.

Psychologically, the choice pushes “intelligent authority.” Cooler hues imply stability and trust, while the slight magenta undertone in #15003b adds sophistication. It’s tech, but not sterile.

The near‑fluorescent #8cf585 plays the opposite role: a visual dopamine hit. Used sparingly in buttons and highlights, it transforms calls‑to‑action into attention magnets. A clever choice: it contrasts perfectly against the dark purple without relying on cliché “tech blues”.

White (#ffffff) carries primary text and surface roles, while multiple grays handle structure: #33373d, #555555, #696969. Each increments about 20% in luminance—a thoughtful grayscale spread.

The accent #cc3366 adds an energetic magenta parallel to the brand’s purple. Not used heavily, but available when the palette needs warmth. Subtle hover/focus blues (#333366) offer motion cues.

2.2 Complete Palette

CSS variable layer adds another set of functional tokens, mostly for form elements:

• --wpforms-button-background-color: #066aab
• --swiper-theme-color: #007aff
• --wpforms-label-error-color: #d63637

Clearly this ecosystem borrows slightly from WordPress’s visual logic. Not strictly branded, but consistent for embedded components.

2.3 Color Relationships

Contrast is solid. #15003b vs #ffffff yields a luminance contrast above 7:1—well inside WCAG AA+. The neon green on dark hits eye‑popping contrast levels (around 10:1). The grayscale tiers maintain a readable step difference, crucial for smaller text like captions (#696969 on white still clears 4.5:1).

One thing missing is a true warning/red or disabled tone. They rely on neutral opacity instead. This keeps noise down but might hurt clarity in states like “error” or “disabled”.

2.4 Usage Guide

• Primary action: #15003b background + white text
• Secondary action: #8cf585 background + #15003b text
• Surface background: #ffffff
• Borders and dividers: #15003b 1px or 2px solid
• Feedback surfaces: #eefce2, reserve for success/confirmation
• Accent components: #cc3366 optional

Use the neon sparingly; it’s best for drawing the eye where needed. Avoid pairing #cc3366 and #8cf585 together—they fight for attention.

3. Typography

3.1 Font Families

Everything is Poppins—a sans-serif by Indian Type Foundry distributed via Google Fonts. The data confirms variable font support (uses weight 300–700). Fallbacks like Raleway appear in legacy fragments, but the system is solidly single‑font.

Sources:

• Google Fonts
• No Adobe
• Variable capable

This approach simplifies design systems drastically: one font family, several weights, flexible hierarchy.

3.2 Type Scale

Extracted heading and text usage shows a flexible scale roughly descending by 8–10 px per level. Here’s the full rundown:

3.3 Hierarchy

This type scale gives flexibility without redundancy. They allow small shifts (e.g., multiple H1 variants differing by 3–4px) to optimize for responsive states. That’s classic Elementor patterning: designers tweak sizes per device.

Using light 300 weight on large headings creates air; smaller headings crank up to 600–700, restoring punch. That balance keeps pages feeling light yet structured.

Body at 16px/1.5 is readable on dark backgrounds. The consistent line-height across most elements (1.5) simplifies alignment grid logic. Some captions use 1.85 for breathing room—a nice microtypographic touch.

Overall, Poppins works here because it’s geometric but neutral; clean around 14px and expressive above 30px. This brand doesn’t need quirky letterforms, just precision and cleanliness.

4. Spacing & Layout

4.1 Spacing Scale

It’s an 8px base grid—explicitly declared. Still, they use fine adjustments (5px, 5.5px, 11.2px). So: roughly 8px foundation punctuated with experimental microsteps for component alignment.

Common spacings extracted:

There’s a clear design principle: use multiples of 8px for hierarchy but allow 10px/13px for visual fine-tuning.

4.2 Layout

Breakpoints are exhaustive. Literally every common pixel width from 320px to 2400px is represented, plus 99999px as a catch‑all. This confirms responsive tuning for both mobile and high‑res desktop.

For reference:

• Mobile: up to ~767px
• Tablet: 768–1024px
• Desktop: 1200px+
• Max container likely around 1280–1366px

Having so many breakpoints feels excessive but typical of auto‑generated Elementor CSS. Each section may define device‑specific tweaks. For dev teams, consolidating down to 4–5 core breakpoints would simplify maintenance.

5. Visual Elements

Border Radius System

Rounded shapes dominate. The main identity cue: buttons with 99px or 100px border radius—pill‑style. These immediately read as modern and friendly.

Pattern: only interactive elements (buttons, search, filters) get heavy rounding. Containers stay angular (2–3px). That contrast keeps hierarchy clear: sharp = structure, round = action.

Shadows

The site uses shallow elevation selectively:

• rgba(0,0,0,0.24) 0px 4px 24px
• rgba(0,0,0,0.2) 0px 4px 8px
• rgba(0,0,0,0.2) 0px 0px 18px
• rgb(153,153,153) 0px 2px 10px -3px

Light, neutral, soft. Used mainly for button hover/focus and modals. Not a material‑style depth hierarchy, but enough to break flatness.

Borders and Dividers

Repetition of the 8px left border (0px 0px 0px 8px solid #15003b) appears 100+ times. Likely used for sidebar highlights or section indicators. That 8px alignment with the base spacing is no coincidence.

Other border usages:

• Buttons: 1px solid #15003b
• Inputs: light gray (#d1d1d1 or #bbbbbb)
• Nav underline: 2px solid #15003b

Nice touch: dark purple borders unify section dividers and link focus underlines.

6. Components

6.1 Buttons

Three main variants extracted, each with all states defined.

Variant 1 – Primary (Dark)

Default:

• Background: #15003b
• Text color: #ffffff
• Padding: 16px 33px
• Radius: 100px
• Border: none
• Weight: 600 (semi-bold)
• Font size: 16px

Hover:

• Background: #ffffff
• Text: #2285f7
• Border: 1px solid #666666
• Shadow: rgba(0, 0, 0, 0.2) 0px 10px 20px

Active:

• Background: #2c6415
• Text: #ffffff
• Border: 1px solid rgba(162,192,169,0.5)
• Box shadow inset gray
• No transform

Focus:

• Background: #1eaedb
• Border: 1px solid #000000
• Outline: 1px solid #000000
• Box shadow: rgba(0,0,0,0.2) 0px 10px 20px
• Transform: scale(1.05)

Observations: this button evolves through logical progressive states—very interactive. That focus blue (#1eaedb) is vibrant and accessible.

Variant 2 – Secondary (Green)

Default:

• Background: #8cf585
• Text: #15003b
• Same padding/radius as primary
• Border: none

Hover:

• Background: #ffffff
• Text: #2285f7

Active/Focus identical to primary. So functional parity, just color inversion. The switch between purple and green keeps brand identity without doubling CSS logic.

Variant 3 – Outline

Default:

• Background: #ffffff
• Text: #15003b
• Border: 1px solid #15003b
• Padding: 12px 10px
• Radius: 2px
• Weight: 600
• Font size: 13.008px

Hover:

• Background: #1eaedb
• Text: white
• Shadow: inset gray
• Border: 1px solid #666666

Active:

• Background: #dadada
• Text: #666666

Focus:

• Outline: 2px solid #000000
• Border: 1px solid #000000
• Background: #1eaedb

This variant’s smaller text size (≈13px) implies it’s built for tertiary or inline use (forms, filter tags).

6.2 Links

Two styles:

Same hover pattern: blue hue signals interactivity. Underlines are intentionally removed—common modern web pattern—but risky for accessibility. I’d add underline on focus for clarity.

6.3 Forms

Inputs aren’t richly documented but we see:

• Border: 1px solid #d1d1d1 (varies by component)
• Border-radius: 2px standard
• Text color: rgba(0,0,0,0.7)
• Label color: rgba(0,0,0,0.85)
• Error: #d63637
• Button color: #066aab

Classic webform defaults tuned with brand neutrals. No fancy outlines or shadows.

6.4 Cards

While not explicitly detailed, given shadows and border-radius clues:

• Likely radius: 2–3px
• Padding: ~24px (1.5rem)
• Optional shadow: rgba(0,0,0,0.24) 0px 4px 24px

No depth layering beyond light shadow application. Cards lean toward flat, structured geometry.

7. Design Tokens (Extracted)

:root {
  /* Colors */
  --color-primary: #15003b;
  --color-surface: #ffffff;
  --color-gray-dark: #33373d;
  --color-gray-mid: #555555;
  --color-gray-light: #696969;
  --color-accent-green: #8cf585;
  --color-accent-green-light: #eefce2;
  --color-accent-pink: #cc3366;
  --color-hover-blue: #333366;

  /* Form functional */
  --form-button-bg: #066aab;
  --form-label-color: rgba(0,0,0,0.85);
  --form-label-error: #d63637;
  --form-border: rgba(0,0,0,0.25);
  --form-text: rgba(0,0,0,0.7);

  /* Typography */
  --font-family-base: 'Poppins', sans-serif;
  --font-size-h1: 39px;
  --font-size-body: 16px;
  --font-size-caption: 14px;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-default: 1.5;

  /* Spacing (8px base) */
  --space-1: 1px;
  --space-5: 5px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-60: 60px;
  --space-80: 80px;
  --space-95: 95px;

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 20px;
  --radius-lg: 50px;
  --radius-pill: 99px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-elevate-sm: rgba(0,0,0,0.2) 0px 4px 8px;
  --shadow-elevate-md: rgba(0,0,0,0.24) 0px 4px 24px;
  --shadow-elevate-lg: rgba(0,0,0,0.2) 0px 0px 18px;
}

8. AI Coding Assistant Prompt

# Nexxen (Unrulymedia) Design System Specification

This design system is derived from Nexxen’s live production site (https://nexxen.com/). It captures exact brand colors, typography, and component states for accurate UI replication.

## System Prompt
You are a Nexxen design expert. Build UIs matching their visual language exactly.

## Brand Context
Nexxen’s design language is data-driven, confident, and minimal. It balances deep corporate tones with flashes of energy through color and rounded shapes. The goal: maintain tech credibility without losing human warmth.

## Color Palette
- Primary Purple: #15003b — main brand color, backgrounds, buttons, borders
- White: #ffffff — primary surface, text on dark
- Gray Dark: #33373d — body text on light
- Gray Mid: #555555 — icons, secondary actions
- Gray Light: #696969 — captions, metadata
- Accent Green: #8cf585 — call-to-action buttons, highlights
- Accent Green Light: #eefce2 — success backgrounds, confirmation
- Accent Pink: #cc3366 — secondary accent
- Hover Blue: #333366 — focus/hover emphasis
- Form Blue: #066aab — form submit backgrounds
- Error Red: #d63637 — form error text

## Typography
**Font Family:** "Poppins", sans-serif  
**Source:** Google Fonts (variable)  

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 39px | 300 | 1.5 | Hero headings |
| H2 | 31px | 600 | 1.5 | Page main headings |
| H3 | 25px | 400 | 1.4 | Section titles |
| H4 | 20px | 400 | 1.5 | Subtitles |
| Body | 16px | 400 | 1.5 | Paragraph text |
| Link | 16px | 600 | 1.5 | Inline links |
| Caption | 14px | 400 | 1.57 | Metadata, fine print |
| Button | 16px | 600 | 1.5 | Primary buttons |

## Spacing & Grid
Base unit: 8px  
Scale: 1px, 5px, 10px, 12px, 13px, 16px, 20px, 24px, 30px, 40px, 50px, 60px, 80px, 95px  
Use 8px-multiples for layout consistency.  
Standard padding for card: 24px.  
Button padding: 16px vertical / 33px horizontal.

## Border Radius
- xs: 2px — input fields, utility buttons
- sm: 3px — small interactive controls
- md: 20px — tags, small chips
- lg: 50px — search bars
- pill: 99px — call-to-action buttons
- full: 100px — perfectly rounded actions

## Shadows & Depth
- Small: rgba(0,0,0,0.2) 0px 4px 8px
- Medium: rgba(0,0,0,0.24) 0px 4px 24px
- Focus Lift: rgba(0,0,0,0.2) 0px 10px 20px
Use sparingly—mostly for hover and focus emphasis.

## Components

### Primary Button
```css
.btn-primary {
  background: #15003b;
  color: #ffffff;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 33px;
  border: none;
  border-radius: 100px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  color: #2285f7;
  border: 1px solid #666666;
  box-shadow: rgba(0,0,0,0.2) 0px 10px 20px;
}
.btn-primary:focus {
  background: #1eaedb;
  color: #ffffff;
  border: 1px solid #000;
  outline: 1px solid #000;
  box-shadow: rgba(0,0,0,0.2) 0px 10px 20px;
  transform: scale(1.05);
}
.btn-primary:active {
  background: #2c6415;
  box-shadow: rgb(102,102,102) 1px 1px 3px inset;
}
```

### Secondary Button
```css
.btn-secondary {
  background: #8cf585;
  color: #15003b;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 33px;
  border-radius: 99px;
  border: none;
}
.btn-secondary:hover {
  background: #ffffff;
  color: #2285f7;
}
.btn-secondary:focus {
  background: #1eaedb;
  color: #ffffff;
}
```

### Outline Button
```css
.btn-outline {
  background: #ffffff;
  color: #15003b;
  border: 1px solid #15003b;
  padding: 12px 10px;
  border-radius: 2px;
  font-weight: 600;
  font-size: 13px;
  transition: all 150ms ease;
}
.btn-outline:hover {
  background: #1eaedb;
  color: #ffffff;
  border: 1px solid #666;
}
```

### Navigation Links
```css
a {
  color: #15003b;
  text-decoration: none;
}
a:hover {
  color: #3860be;
}
a.inverse {
  color: #ffffff;
}
a.inverse:hover {
  color: #3860be;
}
```

### Input Fields
```css
input {
  border: 1px solid #d1d1d1;
  border-radius: 2px;
  color: rgba(0,0,0,0.7);
  padding: 12px 10px;
}
input:focus {
  border-color: #066aab;
  outline: none;
}
label {
  color: rgba(0,0,0,0.85);
}
.error {
  color: #d63637;
}
```

### Card
```css
.card {
  background: #ffffff;
  padding: 24px;
  border-radius: 2px;
  box-shadow: rgba(0,0,0,0.24) 0px 4px 24px;
}
```

## Layout & Responsive Rules
- Mobile: ≤767px
- Tablet: 768–1024px
- Desktop: ≥1200px
- Section gap: multiples of 24px
- Containers centered within ~1280px max width

## Interaction Rules
- Transitions: 150ms ease for hover/focus changes
- Focus: always visible outline (1px solid #000)
- Hover: mild scale up (1.05) on CTA buttons
- Active: inset shadow to indicate press

## DO List
1. Use only specified palette colors.
2. Maintain 8px grid alignment.
3. Use pill buttons for major CTAs.
4. Keep text weights consistent (400 for body, 600–700 for emphasis).
5. Raster shadows only for interactive elements.
6. Constrain headings to 39px max on desktop.
7. Keep form borders at 2px radius.
8. Use `#1eaedb` for focus outlines only.

## DON'T List
1. Don’t invent new grays or tints.
2. Don’t mix flat and heavy shadows.
3. Don’t use typefaces other than Poppins.
4. Don’t overuse accent green; it’s for CTAs only.
5. Don’t apply underlines unless necessary for accessibility.
6. Don’t round cards; reserve large radius for buttons.
7. Don’t override the 8px grid rhythm.

## Code Examples

**Primary Button (Tailwind style)**
```html
<button class="bg-[#15003b] text-white px-[33px] py-4 rounded-full font-semibold hover:bg-white hover:text-[#2285f7] border border-transparent hover:border-[#666] transition-all duration-150">
  Get Started
</button>
```

**Card Container**
```html
<div class="bg-white rounded-[2px] shadow-[0_4px_24px_rgba(0,0,0,0.24)] p-6">
  <h3 class="text-[#15003b] font-semibold text-[20px]">Analytics Report</h3>
  <p class="text-[#33373d] text-[16px] leading-[1.5] mt-2">Comprehensive view of cross-platform reach.</p>
</div>
```

**Form Input**
```html
<input class="border border-[#d1d1d1] rounded-[2px] text-[16px] text-[rgba(0,0,0,0.7)] py-3 px-4 focus:border-[#066aab] outline-none">
```

9. Summary

The Unrulymedia (Nexxen) design system is clean, contrast-driven, and deliberately restrained. It thrives on a single bold color anchor (#15003b), one geometric typeface (Poppins), and a disciplined 8px grid. Rounded pill buttons bring friendliness into an otherwise corporate palette. In short: clarity over decoration, systems over spontaneity.

Brand Keywords: tech-confident · minimal-humanist · data-driven · contrast-clean · purple-powered