# Hocradio Eu · Design system migration spec

> Source: http://hocradio.eu  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of a brutalist, utility-first design that strips away all non-essential visual elements to focus entirely on its core content: the music.

## 1. Identity DNA

The system operates like a brutalist broadcast console, stripped of ornamentation to serve a single function: the delivery of audio archives. Every element is a structural component, not a decorative one, forming a functionalist interface where the grid itself is the primary visual language.

**One-liner:** A minimalist dark-mode radio archive designed for high-density information display and continuous audio playback.
**Keywords:** Radio · Electronic · Minimal · Experimental · Curated
**Analogy:** A stark, functionalist broadcast console or a brutalist playlist archive.

## 2. Color

The palette is an exercise in absolute restraint, built on a pure black field that pushes content to the fore. White and minimal gray accents are used only to define information hierarchy and interactive boundaries.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#4C4C4C` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.15)` | divider |

**Color principle:** Absolute monochrome. Content is king, so visual noise is reduced to a strict black background with white text and minimal gray accents.

The principle is one of subtraction: any color that does not directly serve content clarity or navigation is absent by design.

## 3. Typography

The typographic system relies on the geometric sans-serif Roobert, used strictly at medium (500) and regular (400) weights to maintain a uniform, unembellished texture across all text. This deliberate limitation rejects dramatic contrast, favoring a consistent and functional voice.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 24px | 1.2 | 500 | -0.5px | Navigation and Info headers |
| body | 20px | 1.2 | 500 | 0px | DJ names and main descriptive text |
| caption | 16px | 1.4 | 500 | 0px | Genre tags and metadata |

**Type rules:**
- Typography is set strictly in weight 500 and 400.
- Headings and titles do not use heavy weights, maintaining a uniform texture.

## 4. Spacing

Spacing is governed by a consistent 1.5 to 2.0 line-height ratio, creating essential rhythm and legibility within dense information blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** 1.5 to 2.0 line-height ratios provide ample breathing room in a dense text environment.

## 5. Surfaces

Surfaces are defined by absence and intersection. There are no shadows or gradients; depth is communicated solely through a strict 1px white border system that carves the layout from the black void.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Shadows:**
  - none
- **Borders:** 1px solid white lines define the primary grid and interactive borders.

## 6. Layout

The layout skeleton is a rigid 4x2 grid of equal-width cells, a strict matrix that structures all archive content. On desktop, this grid is complemented by a fixed right column for metadata, reinforcing the system's architectural logic.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 0px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A strict 4x2 (or 4xN) grid of equal-width cells for the radio archive, with a fixed right column for info on desktop.

## 7. Motion & Interaction

Motion is functional and restrained, limited to smooth opacity transitions and subtle color shifts for UI feedback. The philosophy is one of low-latency responsiveness, where animation clarifies state change rather than decorating the interface.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0.0, 0.2, 1)`
- **Patterns:**
  - Smooth opacity transitions for UI state changes.
  - Subtle color shifts for interactive elements.
  - Fluid audio waveform visualization in the player bar.

- **Hover:** Subtle opacity reduction or color shift on text and borders to indicate interactivity.
- **Click:** Immediate state change or navigation, supported by smooth transitions.
- **Transition:** CSS transitions on opacity and border-color for a polished, low-latency feel.
- **Keyboard:** Standard Tab navigation through the grid and player controls.

## 8. Voice & Don'ts

The editorial voice is direct, informative, and slightly avant-garde, using all-caps for section labels and understated text links for actions. It avoids casual language and promotional enthusiasm, letting the curated content speak for itself.

- **Tone:** Direct, informative, and slightly avant-garde.
- **Headline style:** All-caps for section labels (e.g., 'INFO', 'CONTACT'), mixed case for content titles.
- **CTA style:** Understated, text-heavy links (e.g., 'Soundcloud ->') without prominent button shapes.
- **Avoid:** Avoid decorative flourishes or unnecessary illustrations. / Avoid heavy font weights or dramatic size contrasts. / Avoid complex color gradients or multi-hue palettes. / Avoid rounded corners or soft shapes. / Avoid cluttered layouts with deep shadows. / Avoid casual or overly enthusiastic language.

### Don'ts
- ❌ don't use color accents — screenshot shows strictly monochrome black, white, and gray.
- ❌ don't use rounded corners — screenshot shows a strict grid with 0px border-radius.
- ❌ don't use drop shadows — screenshot shows flat, 1px white borders as the only depth cue.
- ❌ don't use bold font weights — screenshot shows medium and regular weights for all text.
- ❌ don't use busy backgrounds — screenshot shows a pure black background.
- ❌ don't use decorative icons — screenshot shows only essential functional symbols like '+' and arrows.

The system deliberately omits decorative flourishes, rounded corners, drop shadows, and bold typography, refusing any element that compromises its core function as a pure audio archive.

## System Prompt (paste into AI tool)

```
HOC Radio is a minimalist, dark-mode audio archive characterized by a strict grid system and a monochromatic palette. The design uses a pure black background (#000000) with high-contrast white text (#FFFFFF) and subtle gray accents (#4C4C4C). Typography is strictly limited to a geometric-sans category (Roobert) at medium (500) and regular (400) weights. Critical design constraints include: no color accents, zero border-radius (sharp 90-degree corners), no drop shadows, and no bold font weights. The layout is an information-dense grid defined by 1px white borders, prioritizing utility and editorial focus over visual flair.
```