Okcdn Design System Deep Dive

1. Brand Overview

Okcdn is a curious one. At first glance, it doesn’t scream “consumer brand” — it feels more like infrastructure. The domain, okcdn.ru, hints at a content delivery network rather than a lifestyle product. And the design choices reflect that: stripped down, utilitarian, almost indifferent to visual flourish.

There’s no visible logo in the extracted data, just a favicon at https://okcdn.ru/favicon.ico. That tells us two things:

1. Brand expression here is minimal, possibly because the audience doesn’t need persuasion — they need performance and reliability.
2. The visual system is likely inherited from a parent platform or is simply the default baseline for internal tools.

The typography choice — Times, weight 700, size 32px for H1 — is an unexpected throwback. In 2025, Times is rare in UI design unless you’re going for authority, tradition, or you just haven’t customised your CSS beyond browser defaults. Given that no Google Fonts or Adobe Fonts are detected, and that the palette is empty, I lean toward the latter: this is a barebones, low-maintenance interface where function beats form.

Spacing is on an 8px base grid, with some oddball values like 21.44px appearing, which suggests scaling from rem units or browser defaults rather than a strict, tokenised design system. Border radius? None. Shadows? None. Components? Empty in the extract — which means what we see is either pure HTML defaults or a very thin layer of styling.

This isn’t a criticism. It’s a choice — intentional or not. For a CDN, uptime and speed trump pixel-perfect gradients. The lack of visual noise can actually help engineers and operators focus on the data or controls that matter.

So if you’re looking for inspiration for a slick, brand-driven UI, Okcdn is not your model. But if you want to understand the anatomy of a “design-minimal” interface — one that’s almost pure content and structure — this is a perfect specimen.

2. Color System

2.1 Primary Colors

There’s the elephant in the room: there is no extracted palette. The data shows an empty palette array and no semantic colors. That means either the site is relying on system defaults (black text, white background) or all colors are applied via images or inline styles not captured here.

The only explicit color in the extract is from the border combination: rgb(128, 128, 128) — a mid-grey (hex #808080). This is used for a 1px inset border on <hr> elements. That’s it.

So the “primary color” here, if you can call it that, is grey. Neutral. Functional. No brand hue to speak of.

2.2 Complete Palette

That’s the entire extracted palette. Everything else is likely default #000 for text and #fff for background, but since those aren’t explicitly in the data, we won’t fabricate them.

2.3 Color Relationships

With only one defined color, there’s no “relationship” to analyse. The grey divider will have sufficient contrast against a white background (21:1 ratio against white, since it’s mid-grey), but might not meet WCAG AAA for text (not relevant here since it’s a border).

Dark mode? Not defined. If a dark mode is implemented, this grey might shift to a lighter tone to keep enough contrast with darker surfaces.

2.4 Usage Guide

• Use cases: #808080 is strictly for dividers. Don’t use it for text unless you want a disabled or de-emphasised look.
• Avoid: Using this grey for interactive elements — too low energy, too neutral.
• Combinations: Works with both light and dark backgrounds, but tone down opacity in dark mode to avoid overpowering.

3. Typography

3.1 Font Families

The only defined style is:

• Times (no fallbacks listed)
• Weight: 700
• Size: 32px (2.00rem)

No Google Fonts. No Adobe Fonts. No variable fonts. This is likely the system’s built-in Times (Times New Roman on most Windows machines, Times on macOS).

This is a serif font, which in UI contexts can evoke formality, stability, or — more often — a lack of CSS customisation. Given the absence of brand-specific typefaces, this is probably the browser default serif.

3.2 Type Scale

That’s literally the only extracted style. No body text size, no captions, no headings 2–6.

3.3 Hierarchy

With only H1 defined, hierarchy is minimal. This could mean:

• Other elements inherit browser defaults (e.g., <p> at 16px).
• There’s no consistent typographic scale beyond this single heading.

This limits the ability to create clear visual hierarchy through typography. Instead, hierarchy is probably communicated through layout, spacing, and HTML semantics.

4. Spacing & Layout

4.1 Spacing Scale

The base grid is 8px. This is a common choice for digital products — divisible into 4px increments if needed, and easy to scale up.

Extracted values:

The 21.44px value is unusual — it’s not a neat multiple of 8. This often happens when 1.34rem is applied at a default root size of 16px. It suggests some spacing is driven by font size relationships rather than strict grid tokens.

4.2 Layout

No breakpoints are defined in the extracted data, so we can’t confirm responsive thresholds. This could mean the site is fixed-width or uses fluid layout without explicit media queries.

5. Visual Elements

• Border Radius: None. No rounded corners appear in the extract. That means square UI elements — a harsher, more utilitarian look.
• Shadows: None. This is a flat design with no depth cues from shadows.
• Borders: The only defined border is 1px inset #808080 on <hr>. That’s a classic HTML default style for horizontal rules.

This is as minimal as it gets. No drop shadows, no soft corners, no layered surfaces.

6. Components

Here’s where it gets interesting: there are no extracted components. That means no defined button styles, no custom link styles, no input field styling.

6.1 Buttons

None defined. Likely default <button> HTML styles.

6.2 Links

No specific link styling captured. Probably default blue underline from the browser.

6.3 Forms

No custom input, checkbox, radio, or select styles. Defaults all the way.

6.4 Cards

No card components extracted. Any grouping is likely handled by semantic HTML and spacing rather than styled containers.

7. Design Tokens

Here’s the CSS custom properties file based only on extracted values:

:root {
  /* Colors */
  --color-neutral-grey: #808080;

  /* Typography */
  --font-heading-1-family: "Times";
  --font-heading-1-size: 2.00rem; /* 32px */
  --font-heading-1-weight: 700;

  /* Spacing */
  --space-8: 0.50rem; /* 8px */
  --space-21-44: 1.34rem; /* 21.44px */

  /* Borders */
  --border-hr-width: 1px;
  --border-hr-style: inset;
  --border-hr-color: var(--color-neutral-grey);
}

8. AI Coding Assistant Prompt

# Okcdn Design System Specification

This design system is inspired by Okcdn's official interface. All values are extracted from their production site. Use this specification to match their minimal, utilitarian visual language exactly.

## System Prompt
You are an Okcdn design expert. Build UIs matching their stripped-down, default-driven visual language exactly.

## Brand Context
Okcdn prioritises function over form. The visual system is minimal, relying heavily on browser defaults and minimal overrides. No brand colours or custom typefaces — just a serif heading, simple dividers, and an 8px spacing grid.

## Color Palette
- Neutral Grey: #808080 — Divider borders (`<hr>` elements)

## Typography
- Headings: "Times"
- No body font override — defaults to browser serif for headings, sans-serif for body if not set.

| Level | Size     | Weight | Line Height | Use For     |
|-------|----------|--------|-------------|-------------|
| H1    | 2.00rem  | 700    | (default)   | Page titles |

## Spacing & Grid
- Base: 8px grid
- Tokens:
  - 8px (0.50rem) — base unit
  - 21.44px (1.34rem) — typography-related spacing

## Border Radius
- none: 0 — all elements

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

## Component Specifications

### Divider (`<hr>`)
```css
hr {
  border: 1px inset #808080;
}
```

### Primary Button
Use browser default `<button>` styling — no overrides.

### Links
Use browser default `<a>` styling — blue, underlined.

### Input Fields
Use browser default `<input>` styling.

### Cards
No card component. Use plain containers with spacing.

## Layout & Responsive Rules
- No defined breakpoints — content flows naturally.
- Spacing between sections: multiples of 8px.

## Interaction Rules
- No transitions or animations.
- Focus indicators use browser defaults.

## DO
- Use only the defined #808080 for dividers.
- Maintain 8px spacing increments where possible.
- Keep all corners square.
- Allow browser defaults for interactive elements.
- Keep design minimal and functional.

## DON'T
- Introduce new colours.
- Add rounded corners.
- Add shadows.
- Override default link colours.
- Introduce custom fonts.

## Code Examples

### Divider
```css
hr {
  border: 1px inset #808080;
}
```

### H1
```css
h1 {
  font-family: "Times";
  font-size: 2rem;
  font-weight: 700;
}
```

### Spacing Utility
```css
.mt-8 { margin-top: 0.5rem; } /* 8px */
.mt-21 { margin-top: 1.34rem; } /* 21.44px */
```

9. Summary

TL;DR — Okcdn’s design is almost entirely default HTML/CSS with a couple of overrides: Times for H1, a mid-grey inset divider, and an 8px spacing grid. It’s a functional, no-frills system.

Brand Keywords:

• infrastructure-minimal
• default-driven
• utilitarian-flat
• serif-headline
• grid-consistent