RBX Music

Overview

RBX Music is a Berlin-based music industry company that develops, produces, and distributes music-focused products and services. The design system embodies a philosophy of 'Technical Minimalism'—a aesthetic that marries precision engineering with cultural authenticity, where every visual element serves a functional purpose without ornament. The brand personality is direct, professional, and deeply rooted in music culture; the UI evokes clarity and confidence through a monochromatic palette anchored by deep charcoal (#141414) and pure white, with restrained use of neutral grays (#505050, #666666) for hierarchy. The emotional response is one of focused intensity: users feel they are engaging with a serious, credible music industry player, not a consumer entertainment platform. Voice: matter-of-fact, technically literate, culturally aware. Example sentence: 'We develop products that connect artists, labels, and platforms through infrastructure, not hype.'

Colors

The color system is deliberately austere, reflecting the brand's technical and professional identity. Primary (#141414, near-black) is the dominant accent used on all call-to-action buttons, interactive states, and brand-critical UI elements; it commands attention without aggression due to its depth and subtlety. The surface stack progresses from pure white (#ffffff) at the base through carefully calibrated grays (#f5f5f5, #f0f0f0, #e9ecef) to create visual separation and depth without introducing color. Secondary (#666666) and tertiary (#505050) grays serve as supporting neutrals for disabled states, secondary text, and lower-priority UI. Outline colors (#d0d0d0, #c0c0c0) define borders and dividers with precision. Error red (#d32f2f) is reserved for validation and critical alerts. The in

Typography

The type system employs a dual-family strategy: GraebenbachMono (a technical monospace font) for headlines, labels, and brand-critical text, paired with Helvetica/Arial for body copy and longer-form content. This pairing communicates precision and accessibility simultaneously—the monospace headlines signal technical credibility and music-industry authenticity, while the humanist sans-serif body text ensures readability at small sizes. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements and major section breaks; headline-lg (40px, 600 weight) anchors page sections; headline-md (28px, 600 weight) structures subsections; title-lg (20px, 600 weight) labels cards and components. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and p

Layout

The layout system uses a 16-column grid with a maximum container width of 1280px, providing flexibility for both desktop and responsive layouts. The spacing scale is semantic and hierarchical: unit (8px) is the base increment; xs (4px) is used for micro-spacing within components; sm (12px) separates inline elements; md (24px) is the default gutter and padding for cards and sections; lg (40px) separates major content sections; xl (64px) is reserved for hero spacing and full-width section breaks. White-space is generous and intentional—the brand philosophy rejects cramped layouts in favor of breathing room that emphasizes content hierarchy. Container padding uses md (24px) on desktop, scaling down to sm (12px) on mobile. Section separation employs lg (40px) vertical spacing to create visual

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the visual noise of multiple shadow layers. The elevation scale defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle separation of inline elements; md (0 4px 12px rgba(0, 0, 0, 0.08)) for standard cards and lifted surfaces; lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and highest-priority overlays. Dropdown panels use a specialized shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to create crisp separation from the background without excessive blur. All shadows use pure black (rgba(0, 0, 0, x)) rather than tinted shadows,

Shapes

The shape philosophy is 'Technical Precision'—rounded corners are minimal and purposeful, never organic or playful. The rounded scale uses sm (0.25rem / 4px) for small UI elements like badges and inline buttons; DEFAULT (0.5rem / 8px) for input fields and small components; md (0.75rem / 12px) for dropdown panels and secondary cards; lg (1rem / 16px) for primary buttons and standard cards; xl (1.5rem / 24px) for large modals and hero elements; full (9999px) for pill-shaped badges and toggle buttons. Buttons use lg (16px) radius to signal their importance as primary interaction points; input fie

Components

Action Elements Buttons are the primary interaction mechanism and use GraebenbachMono (16px, 400 weight) for all text. Primary buttons (button-primary) have backgroundColor: {colors.primary} (#141414), textColor: {colors.on-primary} (#ffffff), padding: 15px 25px, height: 48px, and rounded: lg (16px). On hover (button-primary-hover), the background shifts to {colors.primary-container} (#2a2a2a) with a 200ms ease-out transition, signaling interactivity without introducing new colors. Secondary buttons (button-secondary) use a transparent background with a 1px solid border (#d0d0d0) and textColor: {colors.primary} (#141414); on hover, the background becomes {colors.surface-container-high} (#f0f9fa). All buttons use box-shadow: none to maintain the flat, technical aesthetic.

Container

Do's and Don'ts

**Do**

• Do use GraebenbachMono for all headlines, labels, and brand-critical UI to maintain technical credibility and cultural authenticity.
• Do apply the monochromatic surface stack (#ffffff → #f5f5f5 → #f0f0f0 → #e9ecef) to create visual hierarchy without introducing color noise.
• Do use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on dropdown panels and elevated surfaces to create crisp, engineered depth.
• Do transition all interactive states (hover, focus, active) over 200ms with ease-out timing to signal interactivity smoothly.
• Do reserve primary (#141414) for CTAs, focus states, and brand-critical interactive elements—never use it for body text or backgrounds.
• Do use lg (40px) spacing between major content sections to create breathing room and visual rhythm.

**Don't**

• Don't introduce new colors beyond the defined palette—the monochromatic aesthetic is core to the brand identity.
• Don't use rounded corners smaller than sm (4px) or larger than xl (24px) outside of full (9999px) pill shapes.
• Don't apply multiple shadow layers or use tinted shadows (e.g., rgba(100, 50, 200, 0.1))—stick to pure black shadows with precise opacity values.
• Don't use Helvetica/Arial for headlines or labels—reserve GraebenbachMono for all brand-facing typography.
• Don't apply text-shadow or text-stroke effects except on label-sm text over photographic backgrounds (0 2px 4px rgba(0, 0, 0, 0.15)).
• Don't exceed the 1280px container max-width on desktop, and don't use padding smaller than sm (12px) on mobile layouts.