CNET Design System Deep Dive

1. Brand Overview

CNET’s design language feels like it belongs to a tech publication that’s been around long enough to know what works. It’s confident, high-contrast, and unapologetically digital. The site is built for readers who consume a mix of news, reviews, and guides — and it communicates authority through tight typography, deliberate color accents, and minimal visual clutter.

The vibe: dark, grounded backgrounds with bright, almost neon accents. You’re looking at something that wants to feel modern but trustworthy. The black (#020203) and deep midnight tones (#121218) form a base that screams "tech." On top of that, CNET injects high-visibility colors — lime green (#b4fd8c), electric purple (#7a2af5), and fire red (#e71d1d). This isn’t subtle branding; it’s about catching your eye while scrolling through dense content.

Typography is split between two personalities: Monument Grotesk for readable, modern sans-serif comfort, and Stardust for loud, uppercase headings that feel almost editorial-magazine. That mix lets them balance clarity with brand voice — Monument Grotesk keeps the body copy civilized, Stardust shouts headlines.

Components follow a clear, modular approach. Buttons have distinct states, with hover behaviors that often include small translations or scale effects — little touches that make the interface feel responsive without being over-designed.

If you’re designing for CNET’s audience, think tech-savvy but not design-nerd. Readers don’t want UI experiments; they want fast, readable layouts with just enough flair to signal brand personality. CNET nails this: a dark base, bright accents, crisp typography, and an 8px spacing grid keeping everything in line.

2. Color System

2.1 Primary Colors

CNET’s primary semantic color is pure white (#ffffff), used for text and elements atop dark backgrounds. Odd choice to call this “primary” — but it makes sense in a dark UI where white is the main text color. The secondary semantic color is lime green (#b4fd8c), used for CTAs and login buttons — it’s eye-catching against the midnight backdrop.

The brand’s psychological play: white = clarity, lime green = action. Red (#e71d1d) shows up for branding and emphasis, purple (#7a2af5) for links and callouts. Compared to competitors like The Verge (which leans neon pink/orange) or Wired (more grayscale), CNET’s palette is cleaner but still has those sharp pops.

2.2 Complete Palette

2.3 Color Relationships

White on black gives maximum contrast (WCAG AAA). Lime green on black is also highly legible. The purple (#7a2af5) on black is borderline for small text — fine for buttons, risky for body copy. Red (#e71d1d) pops but must be balanced; too much red on dark can feel aggressive.

Dark mode is essentially default here; the palette is built for it. Light surfaces (#ffffff, #ddddde) are exceptions, usually inside inputs or cards.

2.4 Usage Guide

• Black + White: Default text/background pairing.
• Black + Lime: Primary actions — login, important CTAs.
• Black + Purple: Secondary actions — links, banners.
• Midnight + White: Navigation contrast.
• Avoid Red + Lime together — too much color conflict.
• Use Lavender (#d5baff) for subtle accents on dark — softer than lime.

3. Typography

3.1 Font Families

Two main families:

• Monument Grotesk — custom sans-serif, modern and clean.
• Stardust — uppercase display, bold personality.

Fallbacks not specified, but likely system sans for Monument Grotesk.

No Google Fonts or Adobe — these are custom.

3.2 Type Scale

3.3 Hierarchy

Biggest headline: 52px Monument Grotesk — minimal line height for impact. Stardust uppercase variants inject brand personality, especially at 42px and 28px. Body sizes hover in the 14–16px range, with generous line heights for readability. Buttons are mostly 14–16px with medium weight — visibility without overpowering.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Values:

4.2 Layout

Breakpoints are numerous: from 288px up to 1921px. Clear intention to optimize for all device sizes. Tailwind CSS is in play — utility-first, responsive modifiers.

5. Visual Elements

• Border Radius: Mostly 8px for buttons/cards. Some sharp corners (0px), some pill shapes (50%).
• Shadows: Sparse. Main shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px 0px.
• Borders: Mix of solid and dashed, often 2px. Lavender (#d5baff) borders for accents.

6. Components

6.1 Buttons

Preferred Source Button

• Default: #020203 bg, white text, 8px radius, 1px solid #48484e border.
• Hover: scale 1.08, darkgrey bg, purple shadow.
• Active: dark green bg (#2c6415), light green shadow.
• Focus: blue bg (#1eaeDB), red glow.

Search Button

• Default: transparent bg, lavender border, text lavender.
• Hover: blue bg, white text, translateX 0.25rem.
• Active: pale green bg, dark text.
• Focus: blue bg, white text, black outline.

Login Button

• Default: lime bg, dark text, lime border.
• Hover: blue bg, white text.
• Active: dark bg, pale green text.
• Focus: blue bg, white text.

... (other variants follow same structure — see data for exact values).

6.2 Links

Default colors vary: black, white, purple, gray, lime. Hover generally shifts to gray (#565656), removes underline.

6.3 Forms

Email input: white bg, dark gray text, 8px radius left side. Focus: blue bg, white text, black border, red glow.

6.4 Cards

Not explicitly defined in data. Likely use 8px radius, subtle shadows (rgba(0,0,0,0.15)).

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #b4fd8c;
  --color-black: #020203;
  --color-midnight-dark: #121218;
  --color-purple: #7a2af5;
  --color-red: #e71d1d;
  --color-lavender: #d5baff;
  --color-neon-yellow: #fcf95a;
  --color-deep-purple: #301160;
  --color-soft-violet: #a28ec2;
  --color-soft-gray-blue: #cccce1;
  --color-charcoal-purple: #292633;
  --color-pale-lime: #b8f599;
  --color-deep-olive: #3e5338;
  --color-grass: #a1e27f;
  --color-light-gray: #eeeeee;
  --color-mid-gray: #e5e5e6;
  --color-gray-neutral: #ddddde;

  /* Typography */
  --font-monumentgrotesk: "Monument Grotesk";
  --font-stardust: "Stardust";

  /* Spacing (8px grid) */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.15) 0px 8px 16px 0px;
}

8. AI Coding Assistant Prompt

# CNET Design System Specification

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

## Brand Context
CNET’s design is dark, high-contrast, and tech-focused. Dark backgrounds with bright accents signal authority and modernity. Typography mixes clean sans-serif readability with bold, uppercase editorial headlines.

## Color Palette
- Primary White: #ffffff — Main text color on dark backgrounds
- Secondary Lime: #b4fd8c — CTAs, login buttons
- Black: #020203 — Site header, masthead background
- Midnight Dark: #121218 — Navigation menus, UI surfaces
- Purple: #7a2af5 — Links, banners
- Red: #e71d1d — Branding, emphasis
- Lavender: #d5baff — Accents, borders
- Neon Yellow: #fcf95a — Link headings
- Deep Purple: #301160 — Hover accents
- Soft Violet: #a28ec2 — Hover accents
- Soft Gray Blue: #cccce1 — Input states
- Charcoal Purple: #292633 — Nav hover
- Pale Lime: #b8f599 — Button hover
- Deep Olive: #3e5338 — Rare hover state
- Grass: #a1e27f — Button hover
- Light Gray: #eeeeee — Inputs
- Mid Gray: #e5e5e6 — Dividers
- Gray Neutral: #ddddde — UI surfaces

## Typography
Fonts:
- Monument Grotesk — Body, buttons, links
- Stardust — Uppercase headings

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 52px | 700 | 1.23 | Page titles |
| H1 Display | 42px | 600 | 1.00 | Editorial headlines |
| Body | 16px | 400 | 1.63 | Main copy |
| Button | 14px | 500 | 1.43 | Interactive elements |
| Caption | 12px | 400 | 1.33 | Meta info |

## Spacing & Grid
Base: 8px grid.
Scale: 1px, 2px, 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px.

## Border Radius
- none: 0px — sharp corners
- sm: 4px — small containers
- md: 8px — buttons, cards
- lg: 16px — larger panels
- full: 50% — circular buttons

## Shadows & Depth
- Medium: rgba(0,0,0,0.15) 0px 8px 16px 0px — cards
Minimal use; rely on borders for separation.

## Components

### Primary Button
Default: bg #020203, color #ffffff, padding 8px 12px, radius 8px, border 1px solid #48484e.
Hover: bg darkgrey, purple (#7a2af5) shadow, scale 1.08.
Active: bg #2c6415, color #ffffff, shadow #daffc7.
Focus: bg #1eaedb, color #ffffff, red glow.

### Secondary Button (Search)
Default: transparent bg, color #d5baff, border 2px solid #d5baff.
Hover: bg #1eaedb, white text, translateX 0.25rem.
Active: bg #daffc7, dark text.
Focus: bg #1eaedb, white text, black outline.

### Input Field (Email)
Default: white bg, color #5e5e62, radius 8px left, padding 1px 16px.
Focus: bg #1eaedb, white text, black border, red glow.

## Layout & Responsive Rules
Breakpoints: 288px, 400px, 425px, 530px, 600px, 640px, 768px, 1024px, 1280px, 1440px, 1920px.

## Interaction Rules
- Transition: 150ms ease on hover/active/focus.
- Focus indicators: solid outlines, brand colors.
- Hover: slight scale or translate.

## DO List
- Use only palette colors.
- Maintain 8px spacing grid.
- Use Monument Grotesk for body, Stardust for headings.
- Keep border radius consistent per component type.
- Use shadows sparingly.

## DON'T List
- Avoid mixing rounded and sharp corners.
- Don’t invent new colors.
- Don’t overuse red — keep for emphasis.
- Don’t drop uppercase for Stardust headings.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #020203;
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #48484e;
  font-family: "Monument Grotesk";
  font-size: 14px;
  font-weight: 400;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: darkgrey;
  box-shadow: #7a2af5 0px 3px 0px -1px;
  transform: scale(1.08);
}
```

### Input
```css
.input-email {
  background: #ffffff;
  color: #5e5e62;
  border-radius: 8px 0px 0px 8px;
  padding: 1px 16px;
}
.input-email:focus {
  background: #1eaedb;
  color: #ffffff;
  border: 1px solid #000000;
  box-shadow: rgba(231, 29, 29, 0.75) 0px 0px 5px;
}
```

9. Summary

TL;DR — CNET’s system is dark, sharp, and neon-accented. Monument Grotesk keeps it readable, Stardust adds personality. An 8px grid holds everything together.

Brand Keywords:

• tech-authoritative
• dark-contrast
• neon-accented
• editorial-bold
• grid-disciplined