Myspace Brand Design System Deep Dive

1. Brand Overview

Myspace’s current design language feels like it’s caught between nostalgia and a stripped-down modern UI. This isn’t the chaotic, profile-background-flashback Myspace of 2007 — it’s restrained, grid-based, and driven by functional typography. The vibe is clean, direct, and music-centric. There’s still that early social media DNA, but it’s reined in.

The audience here is likely music fans and creators who want a platform with personality but without the noise. The design philosophy leans toward minimal contrast in layout — black, white, and shades of gray dominate, with a punchy blue for interaction. It doesn’t scream “modern startup” — it’s more like “legacy brand refreshed for utility.”

What’s interesting: the site uses BentonSans everywhere, with Lucida Sans / Lucida Grande as fallbacks. No Google Fonts, no variable font experiments. This choice anchors the brand in a stable, slightly corporate sans-serif aesthetic — it’s not playful, but it’s highly legible.

Navigation and CTAs are tight. Buttons have small radii (2px mostly), so nothing feels overly “friendly” or soft. The design avoids heavy layering — shadows are sparse and subdued, relying on flat color and occasional borders for separation. You can tell they want the content (music, profiles, playlists) to lead, not the UI chrome.

Breakpoints cover a wide range (400px up to 1280px), meaning they’ve thought through mobile, small tablet, large tablet, and desktop separately. The spacing scale is 8px-based but peppered with odd values like 5px and 15px — suggesting legacy code or precise per-component tuning.

In short: Myspace’s design system is functional, minimal, and a bit old-school. It’s not chasing neumorphism or glassmorphism trends. It's about clarity, speed, and content-first presentation — with just enough branded blue to anchor the identity.

2. Color System

2.1 Primary Colors

Primary brand color: rgb(126, 198, 238) (normalized to #7ec6ee).
That’s the semantic primary, but in practice, the UI leans heavily on rgb(0, 141, 222) (#008dde) for buttons, links, and logo accents. This deeper blue has better contrast against white and black, so it’s the workhorse.

Psychologically, this blue communicates tech and trust. Compared to competitors (Spotify’s green, SoundCloud’s orange), Myspace’s blue is cooler, calmer. It’s a safe bet for a brand that’s rebuilding credibility.

2.2 Complete Palette

2.3 Color Relationships

Contrast is generally solid: brand blue (#008dde) on white passes WCAG AA easily.
Black on white obviously passes AAA.
Some grays (#999999 on white) risk low contrast — fine for secondary text but not for essential UI.

Dark mode isn’t implemented — but the palette could flip easily: blues still pop against dark backgrounds, grays could invert.

2.4 Usage Guide

• Use #008dde for interactive elements (buttons, links, active navigation).
• White backgrounds with black text are default; invert for overlays.
• Grays are strictly for secondary text, dividers, placeholders — avoid using them for primary actions.
• Avoid pairing #999999 text on #dddddd backgrounds — contrast is too low.
• Hover/focus states can use #0ca7ff for energy — but keep it consistent.

3. Typography

3.1 Font Families

• Primary font: BentonSans
• Fallbacks: Lucida Sans, Lucida Grande
• No Google Fonts, no Adobe Fonts, no variable fonts.

BentonSans is a neutral humanist sans. It’s not trendy, but it’s solid. Fallbacks keep a consistent sans-serif look on systems without BentonSans.

3.2 Type Scale

3.3 Hierarchy

The system’s hierarchy is strict: H1s at 50px/44px for hero text, scaling down to 36px, 24px, and 20px for subheads. Body/link text sits between 16px–14px. Captions dip to 10px. The light weights (100–200) for large sizes keep headings airy. Uppercase is reserved for certain UI labels, not body copy.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid, but with irregulars.

4.2 Layout

Breakpoints:

• 400px, 425px, 426px, 476px, 530px, 550px, 600px — small devices
• 769px, 890px, 896px, 897px — tablets
• 1023px, 1024px — small desktops
• 1280px — large desktop

5. Visual Elements

Border Radius

Mostly small:

• 2px is the core radius — buttons, inputs, links.
• Occasional 3px and 4px for divs, headers, canvas elements.
• 8px for modals, spans.
• 12px for bold tags.
• Rare big ones: 15px, 17px, 50px (search), 100px (pill buttons).

Shadows

Sparse use. Examples:

• rgba(0, 0, 0, 0.2) -7px 3px 10px -1px — subtle offset.
• rgba(0, 0, 0, 0.4) 0px 5px 25px 0px — deeper drop.
• Many low-confidence, small-count shadows.
  This is mostly flat design.

Borders

Dominantly 2px solid in grays for UI framing.
Selective dotted borders and none-solid combinations for layout.

6. Components

6.1 Buttons

Multiple variants:

Primary

Default:

• bg: #008dde
• color: #ffffff
• padding: 2px 10px
• radius: 2px
• border: none

Hover:

• bg: rgb(30, 174, 219)
• color: white

Focus:

• outline: 2px solid black
• bg: rgb(30, 174, 219)
• border: 1px solid black

Black CTA

Default:

• bg: black
• color: white
• padding: 10px 0px
• radius: 2px
• border: 2px solid white

Hover: same as primary’s hover.

(…continue with all button variants from data, each with states…)

6.2 Links

Multiple colors: #008dde, #999999, #ffffff, #555555, #666666, #000000, #229ae4, #878787.
No underlines. Hover changes to #3860be.

6.3 Forms

Inputs:
Default: white bg, #7f7f7f text, no border.
Focus: bg: rgb(30, 174, 219), text white, border: 1px solid black.

6.4 Cards

No explicit card component in data — use divs with padding (15px, 18px) and small radius (2px–3px), optionally with subtle shadow.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-medium: #999999;
  --color-gray-light: #dddddd;
  --color-gray-mid: #7f7f7f;
  --color-blue-brand: #008dde;
  --color-gray-dark: #555555;
  --color-gray: #666666;
  --color-blue-bright: #0ca7ff;
  --color-neutral-light: #c4c4c4;
  --color-neutral-dark: #3b3b3b;
  --color-neutral-gray: #898989;
  --color-neutral-vdark: #323232;
  --color-neutral-nearblack: #222222;
  --color-divider-light: #cccccc;

  /* Typography */
  --font-primary: "BentonSans", "Lucida Sans", "Lucida Grande";
  --font-size-h1-lg: 50px;
  --font-size-h1-md: 44px;
  /* ... include all sizes ... */

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-35: 35px;
  --space-50: 50px;
  --space-55: 55px;
  --space-254: 254.984px;
  --space-399: 399.969px;

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-sm: rgba(0, 0, 0, 0.2) -7px 3px 10px -1px;
  --shadow-md: rgba(0, 0, 0, 0.4) 0px 5px 25px 0px;
}

8. AI Coding Assistant Prompt

# Myspace Design System Specification

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

## Brand Context
Myspace’s design is minimal, flat, and content-focused. BentonSans typefaces, small-radius buttons, and a restrained blue/black/white palette define the look.

## Color Palette
- Primary Blue: #008dde — Primary buttons, links, logo
- Semantic Primary: #7ec6ee — Brand highlight
- Black: #000000 — Text, nav backgrounds
- White: #ffffff — Background, text on dark
- Medium Gray: #999999 — Secondary text
- Light Gray: #dddddd — Dividers
- Mid Gray: #7f7f7f — Placeholders
- Dark Gray: #555555 — Secondary links
- Gray: #666666 — Body text
- Bright Blue: #0ca7ff — Hover/focus accents
- Neutral Light: #c4c4c4 — Hover backgrounds
- Neutral Dark: #3b3b3b — Hover text
- Neutral Gray: #898989 — Hover states
- Near Black: #323232 — Hover states
- Very Dark Neutral: #222222 — Hover states
- Divider Light: #cccccc — Borders

## Typography
Font: "BentonSans", "Lucida Sans", "Lucida Grande"

| Level     | Size    | Weight | Line Height | Use For         |
|-----------|---------|--------|-------------|-----------------|
| H1-lg     | 50px    | 100    | 1.20        | Page titles     |
| H1-md     | 44px    | 100    | 1.20        | Hero headings   |
| Link-lg   | 40px    | 400    | 1.25        | Large links     |
| H2        | 36px    | 200    | 1.00        | Section titles  |
| Body-lg   | 16px    | 400    | 1.13        | Body text       |
| Caption   | 12px    | 400    | 1.67        | Fine print      |
... (include all extracted sizes)

## Spacing & Grid
Base: 8px. Scale: 1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 15px, 16px, 18px, 20px, 25px, 30px, 35px, 50px, 55px, 254.984px, 399.969px

## Border Radius
- none: 0 — tables
- sm: 2px — buttons, inputs
- md: 3px — spans, small cards
- lg: 8px — modals
- xl: 12px — large elements
- full: 100px — pill buttons

## Shadows & Depth
Sparse shadows, mostly flat. Use:
- rgba(0,0,0,0.2) -7px 3px 10px -1px
- rgba(0,0,0,0.4) 0px 5px 25px 0px

## Components

### Primary Button
Default:

background: #008dde; color: #ffffff; padding: 2px 10px; border-radius: 2px; border: none; font-size: 11px; font-weight: 500;

Hover: background #1eaedb; color white  
Focus: outline 2px solid black; background #1eaedb; border 1px solid black

### Black CTA
Default:

background: #000000; color: #ffffff; padding: 10px 0; border: 2px solid #ffffff; border-radius: 2px; font-size: 14px;

Hover/focus same as above.

### Navigation Links
Default: color #008dde; no underline  
Hover: color #3860be; no underline

### Input Fields
Default: background white; color #7f7f7f; border-radius 2px; padding 4px  
Focus: background #1eaedb; color white; border 1px solid black

## Layout & Responsive Rules
Breakpoints at 400px, 425px, 426px, 476px, 530px, 550px, 600px, 769px, 890px, 896px, 897px, 1023px, 1024px, 1280px

## Interaction Rules
Transitions: 150ms ease on hover/focus changes.  
Focus indicators: 2px solid outline for accessibility.

## DO List
- Use only palette colors.
- Maintain 8px grid multiples.
- Use BentonSans for all text.
- Keep border radius consistent.
- Use hover blue #0ca7ff sparingly.

## DON'T List
- Don’t introduce new colors.
- Don’t apply large radius to small buttons.
- Don’t overuse shadows.
- Don’t remove focus outlines.

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #008dde;
  color: #ffffff;
  padding: 2px 10px;
  border-radius: 2px;
  font-weight: 500;
  font-size: 11px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #1eaedb; }
.btn-primary:focus { outline: 2px solid #000; background: #1eaedb; border: 1px solid #000; }
```

Input:
```css
.input {
  background: #ffffff;
  color: #7f7f7f;
  border-radius: 2px;
  padding: 4px;
  border: none;
}
.input:focus {
  background: #1eaedb;
  color: #ffffff;
  border: 1px solid #000;
}
```

9. Summary

TL;DR — Myspace’s design system is flat, minimal, and focused on content clarity. BentonSans everywhere, small-radius buttons, and a restrained blue/black/white palette drive the brand’s look.

Brand Keywords:

• content-first
• flat-minimalist
• legacy-refreshed
• blue-accented