Conviva Brand Design System Deep Dive

1. Brand Overview

Conviva’s design language is unapologetically enterprise-tech, but with a clear push towards modern simplicity. This isn’t a playful startup palette. It’s serious, data-driven, and designed for a product that probably lives in complex dashboards and analytics-heavy environments. Their primary color is a deep charcoal (#222629) paired with sharp greens (#9cdc00) and restrained neutrals — the visual equivalent of a well-tailored suit with a bold tie.

The site’s typography choices reinforce that seriousness. Poppins throughout, no mixing families, no unexpected serifs. Poppins is geometric but friendly enough to prevent the interface from feeling cold. Bold weights dominate headings — a lot of 600 and 700 — which makes every title feel like a statement. Line heights are tight in large headings (often 1.0 or 1.1) to keep blocks compact and avoid wasted vertical space.

Spacing follows an 8px scale, but Conviva doesn’t shy from odd values if it serves the layout — you’ll see 15.5px and 14.4px in the spacing and type sizes. This tells me they care about pixel-perfect optical alignment over dogmatic grid purity.

Buttons and interactive elements are high-contrast and unapologetically bold. The primary button is a vibrant green (#9cdc00) with dark text — unusual because most brands go white text on bright backgrounds. It works here because the green is light enough to support dark text and keeps the interface legible in bright contexts. Hover states go dramatic — scaling up to double size (transform: scale(2)) is a wild choice. It’s not subtle, but it’s memorable.

Overall, Conviva’s design system feels engineered: tight typography, grid discipline, restrained color use with one loud accent, and UI states that make interactions unmissable. This is built for a product where clarity and speed matter more than ornamentation.

2. Color System

2.1 Primary Colors

The semantic primary color is rgb(34, 38, 41) (#222629) — a deep charcoal. In design psychology, charcoal communicates authority, stability, and sophistication. It’s also forgiving for text legibility. Conviva uses it as a text color, borders, and UI outlines. Compared to competitors in analytics SaaS, which often lean on blues (#007cba for example), Conviva’s decision to center on charcoal makes their interface feel less “marketing” and more “operations.”

The accent green (#9cdc00) is the real attention-grabber. It’s used for primary CTAs and key interactive states. Green here signals success, go, and growth — perfectly aligned for a performance analytics product.

2.2 Complete Palette

2.3 Color Relationships

The charcoal primary (#222629) pairs well with the light green (#9cdc00) — high contrast, minimal color vibration. Green on white works too, but the hover behavior often switches to white background with green border, which keeps WCAG contrast safe. The deep gray neutrals fill in for background/surface without drawing attention.

Dark mode? Not explicitly implemented, but the palette is flexible enough — invert light gray to dark, keep charcoal as text, and green remains the accent.

2.4 Usage Guide

• Works: Charcoal text on white/light gray backgrounds. Green CTA on white or light gray. Purple only for special functional highlights.
• Avoid: Green text on charcoal — contrast gets dicey. Charcoal on purple — unnecessary and harder to read.
• Functional: Admin blues are strictly for back-end contexts, not public UI.

3. Typography

3.1 Font Families

Only one family: Poppins. No fallbacks listed in the data, but Poppins is Google Fonts. All contexts use "ss02" font feature, so stylistic set 02 is active — likely tweaks to certain letterforms. No mixing families — headings, links, buttons, captions all use Poppins.

3.2 Type Scale

3.3 Hierarchy

Large headings (72px+ weights 600–700) make section titles unmissable. Tight line heights keep them compact. Body sizes cluster around 16px–18px, with captions dipping to 12px. The sheer variety of caption sizes is unusual — they clearly fine-tune text for specific micro UI contexts.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px — confirmed by common values like 8px, 24px, 40px, etc. But they also use fractional weirdos like 15.5px (probably optical alignment for icons or text baselines).

4.2 Layout

Breakpoints range from 400px up to 1280px. They’re dense — more than a typical three-tier system. This suggests fine-tuned responsive adjustments rather than generic mobile/tablet/desktop.

5. Visual Elements

Border Radius

They mix sharp and rounded corners with intention.

Shadows

Mostly flat design — rgba(0,0,0,0) 0px 0px 0px 0px dominates. Occasional soft shadows for depth: rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.04) 0px 10px 10px -5px used sparingly.

Borders

Thin, solid borders in neutrals. Accent green borders in buttons. Many no-border defaults.

6. Components

6.1 Buttons

Primary Button:

• Default: bg #9cdc00, text #222629, padding 8px 16px, radius 4px, border none.
• Hover: text #1883fd, bg white, border 1px solid #9cdc00, box-shadow rgba(49,204,255,0.15) 0px 0px 12px 0px, transform scale(2).
• Active: text white, bg #2c6415, border rgba(162,192,169,0.5).
• Focus: bg #1eaedb, text white, outline 1px solid black, transform translateY(-50%).

Secondary Button:

• Default: transparent bg, text #222629, border 1px solid #222629.
• Hover: Same as primary hover.
• Active/Focus: Same as primary.

Circular Control:

• Default: bg #f1f1f1, radius 100px, padding 2px.
• Hover/Focus: bg #1eaedb, text white.

CTA Block Button:

• Default: bg white, radius 24px.
• Hover: transform translateX(7px), color #5a9b00.

6.2 Links

Three styles:

1. Dark gray (#424548) underlined → hover to blue (#1883fd) no underline.
2. Green (#9cdc00) no underline → hover to blue.
3. Charcoal (#222629) underlined → hover to blue.

6.3 Forms

Data shows no text input styles — likely default or minimal.

6.4 Cards

Radius 8px, light gray backgrounds, minimal shadows.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary: #222629;
  --color-neutral-1: #707372;
  --color-neutral-2: #424548;
  --color-light-gray: #f8f8f8;
  --color-accent-green: #9cdc00;
  --color-admin-blue: #007cba;
  --color-admin-blue-d10: #006ba1;
  --color-admin-blue-d20: #005a87;
  --color-accent-purple: #7a00df;
  --color-hollow-button: #343a3f;
  --color-hollow-button-hover: #5a9b00;
  --color-hr: #c6c7c7;
  --color-quote-attr: #d4d5d5;

  /* Typography */
  --font-family: "Poppins", sans-serif;
  --font-feature: "ss02";

  /* Spacing */
  --space-2: 2px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14-4: 14.4px;
  --space-15-5: 15.5px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-40: 40px;
  --space-46: 46px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-17: 17px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-50: 50px;
  --radius-100: 100px;
  --radius-500: 500px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-none: rgba(0,0,0,0) 0px 0px 0px 0px;
  --shadow-soft: rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.04) 0px 10px 10px -5px;
}

8. AI Coding Assistant Prompt

# Conviva Design System Specification

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

## Brand Context
Conviva's interface is enterprise-focused and data-driven. Colors are restrained with one bold accent green. Typography is geometric and consistent (Poppins only). Spacing follows an 8px grid with occasional optical tweaks.

## Color Palette
- Primary Charcoal: #222629 — Text, borders, outlines
- Neutral Gray 1: #707372 — UI backgrounds
- Neutral Gray 2: #424548 — Skip links, subtle text
- Light Gray: #f8f8f8 — Panels, cards
- Accent Green: #9cdc00 — Primary buttons, key actions
- Admin Blue: #007cba — Backend interface
- Admin Blue Darker-10: #006ba1 — Admin hover
- Admin Blue Darker-20: #005a87 — Admin focus
- Accent Purple: #7a00df — Functional highlight blocks
- Hollow Button Color: #343a3f — Hollow button default
- Hollow Button Hover: #5a9b00 — Hollow hover border
- HR Line: #c6c7c7 — Dividers
- Quote Attr: #d4d5d5 — Attribution text

## Typography
Font: "Poppins", sans-serif; font-feature-settings: "ss02".

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 XL | 120px | 700 | 1.00 | Hero titles |
| H1 LG | 72px | 600 | 1.10 | Section headings |
| H1 MD | 64px | 400/700 | 1.40 | Page titles |
| H1 SM | 56px | 600/700 | 1.20 | Subheadings |
| ...   | ...   | ...    | ...  | ...

## Spacing & Grid
Base: 8px. Scale includes: 2px, 5px, 8px, 10px, 12px, 14.4px, 15.5px, 16px, 18px, 20px, 24px, 28px, 40px, 46px, 48px, 64px, 80px, 96px.

## Border Radius
- none: 0px — tables, sharp edges
- sm: 2px — inputs
- md: 4px — buttons, images
- lg: 8px — cards
- xl: 24px — large buttons
- pill: 50px/100px — circular controls
- full: 50% — perfect circles

## Shadows & Depth
Mostly flat. Use --shadow-soft sparingly for depth.

## Components

### Primary Button
Default:
```css
background: #9cdc00;
color: #222629;
padding: 8px 16px;
border-radius: 4px;
border: none;
```
Hover:
```css
color: #1883fd;
background: #fff;
border: 1px solid #9cdc00;
box-shadow: rgba(49,204,255,0.15) 0 0 12px 0;
transform: scale(2);
```
Focus:
```css
background: #1eaedb;
color: #fff;
outline: 1px solid #000;
```

### Secondary Button
Transparent bg, border 1px solid #222629, same hover/focus as primary.

### Link Styles
1. Dark gray underlined → hover blue no underline
2. Green no underline → hover blue
3. Charcoal underlined → hover blue

## Layout & Responsive Rules
Breakpoints: 400px, 425px, 426px, 530px, 550px, 600px, 610px, 639px, 640px, 767px, 768px, 769px, 890px, 896px, 897px, 979px, 980px, 1023px, 1024px, 1161px, 1280px.

## Interaction Rules
Transitions: fast, 150–200ms ease. Focus indicators: always visible, 1–2px outlines.

## DO
- Use only palette colors
- Stick to Poppins
- Scale spacing in 8px multiples unless optical adjustment needed
- Keep large headings tight on line height
- Use accent green for primary actions only

## DON'T
- Invent new colors
- Mix sharp and rounded corners randomly
- Overuse shadows
- Change hover scale timing — keep dramatic scaling consistent
- Use admin blues in public UI

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #9cdc00;
  color: #222629;
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  font-weight: 500;
  font-size: 14.4px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  color: #1883fd;
  background: #fff;
  border: 1px solid #9cdc00;
  box-shadow: rgba(49,204,255,0.15) 0 0 12px 0;
  transform: scale(2);
}
```

### Card
```css
.card {
  background: #f8f8f8;
  border-radius: 8px;
  padding: 24px;
}
```

### Link
```css
.link-dark {
  color: #424548;
  text-decoration: underline;
}
.link-dark:hover {
  color: #1883fd;
  text-decoration: none;
}
```

9. Summary

TL;DR — Conviva’s design system is tight, disciplined, and built for clarity in data-heavy environments. One bold green accent on a charcoal foundation, Poppins everywhere, and an 8px grid with occasional optical tweaks. Interactions are obvious, sometimes dramatic.

Brand Keywords: data-driven-minimalist, bold-accent, enterprise-clarity, typographic-discipline