RCA Records

Overview

RCA Records' design system embodies **Neon-Brutalist Minimalism**—a collision of austere black-and-white geometry with electric neon accents that evoke the rebellious energy of music culture. The brand serves music enthusiasts and collectors seeking premium merchandise with uncompromising visual clarity. The aesthetic is deliberately stark: pure white surfaces (#ffffff), pure black text (#000000), and razor-sharp edges (0px border-radius on primary elements) are interrupted by a vivid lime-green accent (#4cff64) that commands attention on CTAs, badges, and key interactions. This creates visual tension—the UI feels both corporate and punk, refined yet raw.

The voice is direct, confident, and unapologetic. Copy is terse and punchy: "ANGEL — PRE-ORDER NOW" rather than "Discover the latest release." Typography relies on Anton (a bold, geometric sans-serif) for headlines to reinforce the industrial aesthetic, paired with Geist (a clean, modern typeface) for accents and Helvetica for body text. The brand personality rejects softness; every interaction feels intentional and high-stakes, as if each purchase is a statement. Example sentence: "New arrivals. Limited stock. Act now."

Colors

The color system operates on a **high-contrast, accent-driven model** where the background is pure white (#ffffff) and the primary text is pure black (#000000), creating maximum legibility and visual punch. The primary accent is a vivid neon lime-green (#4cff64), used exclusively on call-to-action buttons, active states, and product badges to signal interactivity and urgency. This color appears at 100% opacity on white backgrounds and maintains a 4.5:1 contrast ratio for accessibility.

Secondary colors introduce warmth and sophistication: a deep burgundy red (#a42325) is used for secondary CTAs and brand accents, while a warm beige (#e8d5c7) provides a tertiary highlight for product imagery and editorial sections. The surface stack is deliberately minimal—white (#ffffff) for primary surfa

Typography

The type system balances **geometric boldness with functional clarity**. Anton (fontFamily: Anton, fontWeight: 400) serves as the display and headline family, delivering impact through its condensed, angular letterforms—used at 72px for hero headlines (display), 48px for section headers (headline-lg), and 32px for subsections (headline-md). This typeface's inherent weight eliminates the need for font-weight variation; 400 is sufficient. Body copy uses Helvetica/Arial at 14px (body-md) with 1.4 line-height (24px) for comfortable reading, while accent text (buttons, labels) switches to Geist at 700 weight for emphasis. Letter-spacing is tight across all sizes (−0.03em to 0em) to reinforce the compact, high-energy aesthetic. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on white text overl

Layout

The layout operates on a **fixed 1200px container (--normal-page-width: 120rem)** with a 12-column grid system, using a 24px gutter (--gutter) for consistent spacing. Sections are separated by 40px (lg spacing) vertically, creating rhythm without excessive whitespace. The design favors full-width hero sections with 0px padding, allowing background imagery and neon accents to bleed edge-to-edge, then constrains product grids and content to the 1200px max-width for focus. Horizontal spacing uses semantic tokens: 12px (sm) for tight component spacing, 24px (md) for standard padding inside cards and buttons, and 40px (lg) for section separation. The spacing scale is uniform (--spacing-scale-default: 1.0) across breakpoints, maintaining visual consistency. Margins follow a 8px unit system (--un

Elevation & Depth

Depth is conveyed through **sharp contrast and minimal shadow**, rejecting soft glassmorphism in favor of graphic clarity. Level 1 (Base): flat white surfaces (#ffffff) with 1px solid borders at #dedede (--style-border-width-inputs: 1px). Level 2 (Raised Cards/Modals): 0 3px 8px rgba(0, 0, 0, 0.15) shadow (--elevation-md) with a 1px border, creating subtle lift. Level 3 (Floating/Sticky Elements): 0 8px 24px rgba(0, 0, 0, 0.12) shadow (--elevation-lg) for popovers and sticky headers. No blur or backdrop-filter is used; the system relies on shadow offset and opacity to signal layering. Interact

Shapes

The shape philosophy is **Architectural Sharpness with Selective Softness**—sharp edges dominate, with curves reserved for specific affordance signals. Primary buttons and inputs use 0px border-radius (--style-border-radius-buttons-primary: 0px, --style-border-radius-inputs: 0px), creating a utilitarian, no-nonsense appearance. Secondary buttons and badges use 20px radius (--style-border-radius-lg: 1rem) to signal secondary importance and soften the visual hierarchy. Pill-shaped elements (close buttons, secondary CTAs) use 50% border-radius (--style-border-radius-50: 50%) for maximum affordanc

Components

Action Elements Buttons are the primary interaction surface and use the neon-green accent (#4cff64) to command attention. **button-primary** uses backgroundColor: {colors.primary}, textColor: {colors.on-primary}, padding: 16px 24px, height: 48px, with 0px border-radius and no border. On hover, transition to {colors.primary-fixed-dim} (#3ed660) over 125ms (--animation-speed: 0.125s ease-in-out). Active state applies a 2px inset shadow (box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2)) to signal press. **button-secondary** uses transparent background with 1px solid border at {colors.outline}, 50% border-radius for visual distinction, and padding: 8px 12px. Hover state applies backgroundColor: {colors.surface-container-high} (#e6e6e6). All buttons use {typography.label-md} (Geist, 14px, 700

Do's and Don'ts

**Do**

• Do use the neon-green accent (#4cff64) exclusively on primary CTAs, active states, and high-priority badges to maintain visual hierarchy and urgency.
• Do maintain 0px border-radius on primary buttons, inputs, and cards to reinforce the sharp, industrial aesthetic—reserve 20px+ radius for secondary elements only.
• Do apply 1px solid borders at #dedede to all card and input surfaces; never use borders thinner than 1px or thicker than 2px (focus state only).
• Do use Anton (fontFamily: Anton, fontWeight: 400) for all headlines and display text; never apply font-weight variations to Anton as it is already bold.
• Do transition all interactive states (hover, focus, active) over exactly 125ms (--animation-speed) using ease-in-out timing for consistent, snappy feedback.

**Don't**

• Don't use the primary green (#4cff64) on backgrounds, body text, or secondary elements—reserve it exclusively for CTAs and active indicators to preserve its signal strength.
• Don't apply border-radius to product images, hero sections, or primary card containers; softness dilutes the architectural sharpness of the brand.
• Don't use shadows deeper than 0 8px 24px rgba(0, 0, 0, 0.12) or blur effects; the system relies on sharp contrast and minimal elevation to signal depth.
• Don't mix typefaces within a single component (e.g., Anton for a button label and Helvetica for the same button); maintain typographic consistency per component role.
• Don't apply opacity or transparency to the primary green accent; always use solid #4cff64 at 100% opacity to maximize contrast and visual impact on white backgrounds.