Cdnvideo Design System Deep Dive

1. Brand Overview

Cdnvideo is clearly positioning itself as a high-reliability, enterprise-grade CDN and streaming provider. This isn't a playful startup palette — it's built around deep blacks, rich purples, and a sharp yellow accent. The vibe is tech-forward but with a distinct Russian design sensibility: direct, functional, and slightly bold in interaction states.

The site leans heavily on contrast — dark primary surfaces (#13171b) with bright accent CTAs (#ffc800). There's no attempt to soften edges into gradients or glassmorphic effects; instead, the aesthetic is solid blocks of color, clear typography, and strong hover behaviors. Even the hover states on buttons scale up to transform: scale(1.3, 1.3), which is unusually aggressive — it screams “look at me” when the user’s cursor passes over.

Typography is uniform: a custom CDNvideo font family everywhere, with weights ranging from 400 to 800. No secondary font family for body copy — everything is branded, which reinforces identity but can lead to monotony if not balanced with spacing and color.

This is a brand designed for clarity on dense technical content. The high-contrast palette ensures legibility on dark mode defaults. The yellow (#ffc800) is the primary energy source — used for CTAs, borders, and active states. The purple (#5a35c0) is the secondary accent, mostly for links and hover text — it adds a techy, premium feel without sliding into generic “blue-link” territory.

The design philosophy here: strong brand color anchors, no visual fluff, clear interactive feedback. This works for a CDN brand because you want users to feel that everything is precise and responsive. Even the shadows are restrained (rgba(0,0,0,0.04) or 0.08), used sparingly to lift elements without breaking the flat-block feel. The breakpoints list is long — this is a responsive system tuned to many device widths, which suggests a high traffic site across varied platforms.

2. Color System

2.1 Primary Colors

The main brand color is #ffc800 (RGB 255,200,0). It's bold, high-visibility, and reads as “alert” and “action” without being red. Psychologically, yellow is associated with speed, optimism, and urgency — perfect for a CDN company selling performance. It’s paired with deep blackish tones (#13171b, #222222) to maximize contrast. Competitors often go for blue (trust, corporate), but yellow here differentiates them in the tech infrastructure space.

Secondary accent is #5a35c0 — a saturated purple. It’s uncommon in CDN branding, and here it’s used for hover states on links and focus color on buttons. Purple suggests premium and innovation — reinforcing the brand’s tech edge.

2.2 Complete Palette

2.3 Color Relationships

The combination of #13171b and #ffc800 gives a huge contrast ratio — well above WCAG AAA for text. Purple #5a35c0 on dark backgrounds is legible but less contrasty; it’s fine for links but not for body text. White #ffffff on dark base is ultra-legible. Accessibility is solid for primary actions; secondary link colors could be borderline if used on dark grays.

Dark mode is the default here — the palette is built around dark backgrounds with bright accents. There’s no light theme counterpart in the extracted data.

2.4 Usage Guide

• Best combos: #ffc800 text on #13171b background; #ffffff on #5a35c0 for secondary buttons; #5a35c0 on white for link emphasis.
• Avoid: Using #5a35c0 on #3c3b3a — low contrast. Don’t put yellow text on white — fails contrast.
• Use hover yellows (#ffd336, #ffcf1f) only for state changes — not static UI.

3. Typography

3.1 Font Families

Everything uses the custom CDNvideo font family. No fallbacks listed — which means if the font fails to load, the UI could break visually. No Google Fonts or Adobe Fonts — this is presumably self-hosted.

3.2 Type Scale

3.3 Hierarchy

They rely on size + weight for hierarchy. Big headings (40px/32px) are heavy weight 800 — immediate visual anchor. Medium headings often drop to 700 or 600 weight. Body text is 16px/400 weight — readable on dark backgrounds. The tight line heights on large text (e.g., 0.94) make headings compact, keeping hero sections tight vertically.

4. Spacing & Layout

4.1 Spacing Scale

Base scale is 8px — multiples throughout.

4.2 Layout

Frameworks: Bootstrap + Vuetify — so grid system is standard container/row/col. Breakpoints: long list from 320px up to 1510px — they’re tuning layouts for many viewport widths, including odd ones (e.g., 357px, 531px). This isn’t just mobile/tablet/desktop — it’s micro-optimized.

5. Visual Elements

Border Radius

Rounded corners are moderate — 8px is common for buttons, 12px for larger blocks. Full circle only for avatars.

Shadows

Mostly subtle:

• rgba(0,0,0,0.04) 0px 3px 32px — common lift
• rgba(0,0,0,0.08) — slightly stronger
• Rare heavier shadows (0.2 opacity)

No massive drop shadows — depth is kept minimal.

Borders

Yellow borders for primary buttons (1px solid #ffc800). White borders for secondary actions. Light gray borders for dividers.

6. Components

6.1 Buttons

Primary Button (btn btn-default type__1)

• Default: bg #ffc800, text #13171b, padding 10px 16px, radius 8px, border 1px solid #ffc800
• Hover: bg #13171b, text #5a35c0, border 1px solid #e0e0e0, scale 1.3, shadow rgba(0,0,0,0.04) 0px 3px 32px
• Active: bg #ffc800, text #ffc800, opacity 0.9
• Focus: bg #ffcf1f, text #5a35c0, border 1px solid #ccc, shadow rgba(0,0,0,0.075) inset + green glow, opacity 0.9

Secondary Button (btn btn-default type__4 animate-load)

• Default: bg #13171b, text #ffffff, padding 10px 24px, radius 8px, border none
• Hover/Active/Focus states same as primary.

Legacy Button

• Default: bg #efefef, text #000, padding 1px 6px, radius 0px, border 2px outset #000
• Hover: bg #ffc800, text #fff

6.2 Links

Colors vary by context:

• Purple #5a35c0 links — no underline, hover stays purple
• Black #13171b or dark gray #222 — hover to purple
• White links on dark — hover to purple
• Underlined black links — hover removes underline and turns purple

6.3 Forms

Text input default: transparent bg, text #444, no border, padding 0 200px 0 25px. Focus: border 1px solid #ccc, bg var(--card_bg_hover_black).

6.4 Cards

No explicit card component data, but shadows rgba(0,0,0,0.04) and 12px radius suggest the style.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-base: #13171b;
  --color-dark-gray: #222222;
  --color-warm-gray: #3c3b3a;
  --color-white: #ffffff;
  --color-yellow: #ffc800;
  --color-cool-gray: #969ba5;
  --color-purple: #5a35c0;
  --color-light-gray: #f2f2f2;
  --color-hover-yellow-1: #ffd336;
  --color-hover-yellow-2: #ffcf1f;

  /* Typography */
  --font-family-main: 'CDNvideo';
  --font-size-h1: 40px;
  --font-size-h2: 32px;
  --font-size-h3: 26px;
  --font-size-large-link: 25.6px;
  --font-size-body: 16px;
  --font-size-small: 14px;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-normal: 400;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-19: 19px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;
  --space-101: 101px;

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

  /* Shadows */
  --shadow-light: rgba(0,0,0,0.04) 0px 3px 32px;
  --shadow-medium: rgba(0,0,0,0.08) 0px 3px 32px;
}

8. AI Coding Assistant Prompt

# Cdnvideo Design System Specification

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

## Brand Context
Cdnvideo uses a dark, high-contrast design with bold yellow accents for CTAs and interactive states, paired with deep purples for secondary accents. Typography is entirely custom (‘CDNvideo’), with strong weights and tight line heights. Layout follows an 8px spacing grid and Bootstrap/Vuetify responsiveness.

## Color Palette
- Dark Base: #13171b — Header, main backgrounds
- Dark Gray: #222222 — Mobile header backgrounds
- Warm Gray: #3c3b3a — Neutral panels
- White: #ffffff — Text on dark, secondary buttons
- Brand Yellow: #ffc800 — Primary CTAs, borders, active states
- Cool Gray: #969ba5 — Secondary text
- Brand Purple: #5a35c0 — Links, hover states, focus accents
- Light Gray: #f2f2f2 — Panel backgrounds
- Hover Yellow 1: #ffd336 — Button hover/focus
- Hover Yellow 2: #ffcf1f — Button hover/focus

## Typography
Font family: 'CDNvideo'
No fallbacks specified.

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 40px | 800 | 1.23 | Page titles |
| H2 | 32px | 800 | 1.22 | Section headings |
| H3 | 26px | 800 | 1.23 | Subheadings |
| Large Link | 25.6px | 700 | 0.94 | Promo links |
| Body | 16px | 400 | 1.50 | Paragraphs |
| Button | 16px | 700 | 1.00 | CTAs |
| Small | 14px | 400 | 1.71 | Captions |

## Spacing & Grid
Base: 8px grid
Scale: 1px, 2px, 3px, 4px, 8px, 10px, 12px, 16px, 19px, 20px, 24px, 32px, 40px, 64px, 101px
Use multiples for padding, margins, and gaps.

## Border Radius
- none: 0 — table cells
- sm: 2px — inputs, badges
- md: 8px — buttons, small cards
- lg: 12px — large cards, hero panels
- full: 100% — avatars, pill buttons

## Shadows & Depth
- Light: rgba(0,0,0,0.04) 0px 3px 32px
- Medium: rgba(0,0,0,0.08) 0px 3px 32px
Use sparingly for lift; flat design is preferred.

## Component Specifications

### Primary Button
Default:
- background: #ffc800
- color: #13171b
- padding: 10px 16px
- border-radius: 8px
- border: 1px solid #ffc800
Hover:
- background: #13171b
- color: #5a35c0
- border: 1px solid #e0e0e0
- transform: scale(1.3)
- shadow: rgba(0,0,0,0.04) 0px 3px 32px
Active:
- background: #ffc800
- color: #ffc800
- opacity: 0.9
Focus:
- background: #ffcf1f
- color: #5a35c0
- border: 1px solid #ccc
- shadow: rgba(0,0,0,0.075) inset, rgb(122,186,123) 0px 0px 6px

### Secondary Button
Same as primary but default background #13171b, color #ffffff, padding 10px 24px, no border.

### Navigation Links
Default: color varies (black, white, purple), no underline.
Hover: color #5a35c0, underline removed.

### Input Fields
Default: transparent background, color #444, no border, padding 0 200px 0 25px.
Focus: border 1px solid #ccc, background var(--card_bg_hover_black).

### Card
Background: white or light gray
Border-radius: 12px
Shadow: rgba(0,0,0,0.04) 0px 3px 32px

## Layout & Responsive Rules
Max content width: Bootstrap container defaults
Page padding: multiples of 8px
Grid gap: multiples of 8px
Breakpoints: multiple (320px to 1510px)

## Interaction Rules
- Scale buttons on hover (transform: scale(1.3))
- Transition timing: 150ms ease for state changes
- Focus indicators use border + shadow color accents

## DO List
- Use ONLY colors from the palette
- Maintain 8px spacing grid
- Use 'CDNvideo' font for all text
- Keep hover scale at 1.3 for buttons
- Use subtle shadows

## DON'T List
- Don't introduce new colors
- Don't mix square and rounded corners
- Don't use heavy shadows
- Don't change button hover scale
- Don't use underline on non-contextual links

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #ffc800;
  color: #13171b;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #ffc800;
  font-weight: 700;
  font-size: 16px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #13171b;
  color: #5a35c0;
  border: 1px solid #e0e0e0;
  transform: scale(1.3);
  box-shadow: rgba(0,0,0,0.04) 0px 3px 32px;
}
```

Secondary Button:
```css
.btn-secondary {
  background: #13171b;
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
}
```

Input:
```css
.input {
  background: transparent;
  color: #444;
  border: none;
  padding: 0 200px 0 25px;
}
.input:focus {
  border: 1px solid #ccc;
  background: var(--card_bg_hover_black);
  outline: none;
}
```

9. Summary

TL;DR — Cdnvideo’s design system is a dark-mode-first, high-contrast setup with bold yellow CTAs, purple link accents, and a custom branded font everywhere. The 8px grid keeps layouts tight, and hover interactions are aggressive for buttons.

Brand Keywords:

• high-contrast-tech
• yellow-driven
• purple-accented
• dark-mode-default
• bold-interactive