Genius Brand Design System Deep-Dive

1. Brand Overview

Genius is a music intelligence platform. It’s part lyric database, part cultural archive, part annotation playground. At its core, the brand’s job is to surface meaning in music — not just the words, but the stories and context behind them.

The design reflects that mission: stripped back, confident, and functional. There’s no ornamental fluff. No unnecessary gradients or skeuomorphic tricks. The UI is there to deliver content — the words — and to make interaction effortless for a wide range of users, from casual fans to deep-dive analysts.

The visual language leans on clean typography, a restrained color palette, and subtle but meaningful microinteractions. The energy comes from bold color pops in the right places — a hot pink accent (#ff1464), a saturated link blue (#7d8fe8) — against largely neutral bases. This contrast keeps attention where Genius wants it: on the content and the annotations.

Typography is a single-family system: Programme, with Arial as fallback. That’s a strong choice. It creates consistency and a recognisable typographic voice, but it also means weight and size do all the heavy lifting for hierarchy.

Spacing is based on an 8px scale (with some oddball fractional values). This keeps layouts locked in, even when the content is chaotic. Borders are sharp — no card rounding here — except for full circles (100% radius) used for avatars and specific round elements. The flat look is intentional: Genius prefers lines and solid fills over drop shadows.

Buttons are stark. The primary button is literally black text on a transparent field with a black 2px border — flipping to black background on hover. It’s assertive, almost editorial. Links are understated by default — no underlines unless hovered (and only on some link types).

This is a design system built for clarity and speed. It’s not trying to be luxurious or “fun” in a bubbly way. It’s confident, minimal, and content-first. The brand vibe: cultural authority with a DIY edge.

2. Color System

2.1 Primary Colors

There’s no single “brand color” dominating the interface. Instead, Genius uses black (#000000) as the anchor for text and borders. The closest to a “primary accent” is link blue (#7d8fe8), used for interactive text, and hot pink (#ff1464) for high-emphasis accent moments.

This works because the brand is content-heavy. Too much brand color would fight with album art, contributor avatars, and embedded media. The color system is about supporting content, not competing with it.

Compared to competitors (e.g., Spotify’s saturated green or SoundCloud’s orange), Genius’s palette is quieter. It positions them less as a “music player” and more as a knowledge platform.

2.2 Complete Palette

2.3 Color Relationships

• High contrast: Black text (#000000) on white (#ffffff) is WCAG AAA-compliant.
• Interactive contrast: #7d8fe8 on white is legible but not extreme — it’s a softer link color.
• Accent usage: Hot pink (#ff1464) is high-contrast on white and stands out immediately. Use sparingly or it dominates.
• Neutral support: Light gray (#e9e9e9) works for separating content without heavy visual weight.
• Focus states: Deep blue (#005fcc) is used rarely — possibly for keyboard focus outlines or hover states.

No evidence of dark mode in the extracted data. This is a light-first design.

2.4 Usage Guide

• Black + White: The dominant pairing. Always safe. Works for headings, body text, and containers.
• Link Blue (#7d8fe8): Only for links and interactive text. Avoid using it for non-interactive elements — it will mislead users.
• Hot Pink (#ff1464): Use for special accent actions or highlight moments. Not a primary button color.
• Gray (#9a9a9a): Best for secondary text. Avoid using as background — contrast may be too low with white text.
• Light Gray (#e9e9e9): Divider lines, background panels. Avoid pairing with gray text — contrast will fail WCAG.
• Deep Blue (#005fcc): Keep for hover/focus outlines. Too dark for subtle accents.

3. Typography

3.1 Font Families

Primary: Programme
Fallbacks: Arial
Sources: No Google Fonts or Adobe Fonts — likely a self-hosted custom font.

Programme is a modern sans-serif with strong geometric forms. It’s utilitarian, which works for Genius’s “content-first” approach. Arial fallback ensures wide compatibility.

3.2 Type Scale

3.3 Hierarchy

Hierarchy here is subtle. Weight and case are as important as size. For example, the 80px H1 is uppercase and bold — a page title. But many headings are light-weight (100) at medium sizes. This creates a “flat” hierarchy that doesn’t shout, which suits an information-dense site.

Captions and buttons use uppercase 14px, giving UI elements a crisp, label-like feel. Links vary in size depending on context — from small 12px labels to 24px inline links.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. But there are some odd fractional values — likely from responsive scaling or font rendering adjustments.

4.2 Layout

No explicit breakpoints detected — likely handled via Vuetify’s built-in system. Layout appears to center content with wide margins and uses large vertical spacing (72px, 141.75px) for breathing room.

5. Visual Elements

• Border Radius: Only 100% is present — for circular elements like avatars.
• Shadows: Essentially flat. One shadow detected: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px (no offset). This suggests shadows are unused.
• Borders: Heavy reliance on 2px solid borders in black or white. Also thin bottom borders (0 0 2px solid #000) for dividers.

The absence of rounded corners and shadows gives the system a print-like, editorial feel.

6. Components

6.1 Buttons

Primary/Default Button

• Default: Transparent background, black text, 2px solid black border, 12px vertical x 21.008px horizontal padding, no border radius, no shadow.
• Hover: Black background, white text.
• Active/Focus: Outline none.
• Font: 14px, weight 400, uppercase.

This is a high-contrast, no-nonsense button. The hover inversion (black fill, white text) is immediate feedback.

6.2 Links

Four link styles:

1. Blue (#7d8fe8): No underline, weight 100.
2. Black (#000000): No underline, weight 100, underline on hover.
3. White (#ffffff): No underline, no change on hover.
4. Gray (#9a9a9a): No underline, weight 100.

Links are understated — only some underline on hover. This keeps the page clean but risks discoverability.

6.3 Forms

No input styles detected — likely handled by Vuetify defaults.

6.4 Cards

Not explicitly extracted — likely flat white rectangles with black borders or no border.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-light-gray: #e9e9e9;
  --color-mid-gray: #9a9a9a;
  --color-link-blue: #7d8fe8;
  --color-hot-pink: #ff1464;
  --color-deep-blue: #005fcc;
  --color-black: #000000;

  /* Typography */
  --font-primary: 'Programme', Arial;

  /* Font sizes */
  --font-size-h1-xl: 5rem; /* 80px */
  --font-size-h1-lg: 2.25rem; /* 36px */
  --font-size-h1-md: 1.5rem; /* 24px */
  --font-size-h1-sm: 1.31rem; /* 21.008px */
  --font-size-body-lg: 1.5rem; /* 24px */
  --font-size-body-md: 1rem; /* 16px */
  --font-size-caption: 0.88rem; /* 14px */
  --font-size-caption-sm: 0.75rem; /* 12px */

  /* Weights */
  --font-weight-thin: 100;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1.00;
  --line-height-normal: 1.13;
  --line-height-loose: 1.45;

  /* Spacing scale (px) */
  --space-1: 1px;
  --space-1_9: 1.9px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7_1875: 7.1875px;
  --space-8: 8px;
  --space-12: 12px;
  --space-13_6719: 13.6719px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-36: 36px;
  --space-72: 72px;
  --space-141_75: 141.75px;
  --space-375_75: 375.75px;
  --space-492_75: 492.75px;

  /* Border radius */
  --radius-full: 100%;

  /* Shadows */
  --shadow-none: none;
  --shadow-0: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px;
}

8. AI Coding Assistant Prompt

# Genius Design System Specification

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

## Brand Context
Genius is a music knowledge platform. The design is minimal, content-first, and editorial. It avoids ornamental UI, relying on bold typography, flat colors, and strong borders.

## Color Palette
- White: #ffffff — Page backgrounds, text on dark
- Light Gray: #e9e9e9 — Dividers, neutral backgrounds
- Mid Gray: #9a9a9a — Secondary text, metadata
- Link Blue: #7d8fe8 — Hyperlinks, interactive text
- Hot Pink: #ff1464 — Special accents, highlights
- Deep Blue: #005fcc — Hover/focus outlines
- Black: #000000 — Primary text, borders

## Typography
Font family: 'Programme', Arial

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 XL | 80px | 700 | 1.00 | Main titles |
| H1 LG | 36px | 100 | 1.13 | Large headings |
| H1 MD | 24px | 100 | 1.13 | Section headings |
| Body LG | 24px | 400 | 1.45 | Highlighted body |
| Body MD | 16px | 100/400 | 1.13/1.45 | Body text |
| Caption | 14px | 400 | 1.00 | Labels, captions |
| Small | 12px | 100/400 | 1.13/1.33/1.45 | Metadata, small UI |

## Spacing & Grid
Base: 8px scale with some fractional values.
Scale: 1px, 1.9px, 4px, 6px, 7.1875px, 8px, 12px, 13.6719px, 16px, 20px, 24px, 36px, 72px, 141.75px, 375.75px, 492.75px.

## Border Radius
- full: 100% — Avatars, circular elements

## Shadows & Depth
Flat design — avoid shadows. Use borders for separation.

## Component Specifications

### Primary Button
Default: background transparent, color #000000, padding 12px 21.008px, border 2px solid #000000, radius 0, font-size 14px uppercase, weight 400.  
Hover: background #000000, color #ffffff.  
Active/Focus: outline none.

### Links
1. Blue (#7d8fe8): no underline, weight 100.
2. Black (#000000): no underline, underline on hover.
3. White (#ffffff): no underline.
4. Gray (#9a9a9a): no underline.

## Layout & Responsive Rules
Max content width: ~492.75px for narrow blocks, larger for main content.  
Use large vertical spacing (72px, 141.75px) for section separation.

## Interaction Rules
- State changes: instant or 150ms ease.
- No focus rings except deep blue (#005fcc) when required.
- Hover on buttons inverts colors.

## DO List
- Use only colors from the palette
- Maintain 8px-based spacing
- Keep corners sharp (except full circles)
- Use Programme for all text
- Use uppercase for buttons and captions

## DON'T List
- Don't add shadows
- Don't round corners (except avatars)
- Don't underline links unless hover state specifies
- Don't use non-palette colors

## Code Examples

### Button
```css
.btn-primary {
  background: transparent;
  color: #000000;
  padding: 12px 21.008px;
  border: 2px solid #000000;
  border-radius: 0;
  font-family: 'Programme', Arial;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}
.btn-primary:hover {
  background: #000000;
  color: #ffffff;
}
```

### Link
```css
.link-blue {
  color: #7d8fe8;
  font-weight: 100;
  text-decoration: none;
}
```

### Card
```css
.card {
  background: #ffffff;
  border: 2px solid #000000;
  padding: 16px;
}
```

9. Summary

TL;DR: Genius’s design system is minimal, flat, and content-focused. Black and white dominate, with blue and pink accents used sparingly. Typography is unified under a single Programme family, with hierarchy driven by size, weight, and case. Spacing is disciplined, borders are sharp, and shadows are almost nonexistent.

Brand Keywords:

• content-first
• flat-editorial
• typographic-discipline
• confident-minimal
• cultural-authority