---
name: Hocradio Eu
description: "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."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  neutral: "#4C4C4C"
  line: "rgba(255, 255, 255, 0.15)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 20px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 500
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A minimalist dark-mode radio archive designed for high-density information display and continuous audio playback.

*A stark, functionalist broadcast console or a brutalist playlist archive.*

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#4C4C4C`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.15)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* 1.5 to 2.0 line-height ratios provide ample breathing room in a dense text environment.

## Elevation & Depth

- none
- Borders: 1px solid white lines define the primary grid and interactive borders.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** Text-based with a 1px solid white border, uppercase transform, and no background fill.
- **card:** A grid cell defined purely by 1px white border intersections, featuring a top-aligned header and bottom-aligned metadata.
- **chip:** Inline text tags separated by commas, using standard body font without bounding boxes.
- **input:** Minimalist, borderless fields or simple text links for search and navigation.
- **hero:** A dense, information-first grid that immediately presents the latest audio archives.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```