A stark, functionalist broadcast console or a brutalist playlist archive.
02
Color
#FFFFFFInk
#000000BG
#4C4C4CMuted
rgba(255, 255, 255, 0.15)Line
Absolute monochrome. Content is king, so visual noise is reduced to a strict black background with white text and minimal gray accents.
03
Typography
geometric-sans
display24px · 500
body20px · 500
caption16px · 500
Typography is set strictly in weight 500 and 400. · Headings and titles do not use heavy weights, maintaining a uniform texture.
04
Spacing
4px
8px
12px
16px
24px
32px
48px
64px
96px
1.5 to 2.0 line-height ratios provide ample breathing room in a dense text environment.
05
Surfaces
sm · 0px
md · 0px
lg · 0px
pill · 0px
1px solid white lines define the primary grid and interactive borders.
none
06
Layout
1440container
12columns
768 / 1024breakpoints
A strict 4x2 (or 4xN) grid of equal-width cells for the radio archive, with a fixed right column for info on desktop.
07
Motion & Interaction
150msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0.0, 0.2, 1)easing
Smooth opacity transitions for UI state changes. · Subtle color shifts for interactive elements. · Fluid audio waveform visualization in the player bar.
Subtle opacity reduction or color shift on text and borders to indicate interactivity. · Immediate state change or navigation, supported by smooth transitions.
08
Components
buttonText-based with a 1px solid white border, uppercase transform, and no background fill.
cardA grid cell defined purely by 1px white border intersections, featuring a top-aligned header and bottom-aligned metadata.
chipInline text tags separated by commas, using standard body font without bounding boxes.
inputMinimalist, borderless fields or simple text links for search and navigation.
heroA dense, information-first grid that immediately presents the latest audio archives.
09
Voice & Don'ts
ToneDirect, informative, and slightly avant-garde.
HeadlinesAll-caps for section labels (e.g., 'INFO', 'CONTACT'), mixed case for content titles.
CTAsUnderstated, text-heavy links (e.g., 'Soundcloud ->') without prominent button shapes.
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.
Avoid: Avoid decorative flourishes or unnecessary illustrations.
Avoid: Avoid heavy font weights or dramatic size contrasts.
Avoid: Avoid complex color gradients or multi-hue palettes.
Avoid: Avoid rounded corners or soft shapes.
Avoid: Avoid cluttered layouts with deep shadows.
Avoid: Avoid casual or overly enthusiastic language.
Captured from the live site · real computed styles
11
System prompt
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.
Bring this taste to your agent
Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.
