Black Coffee

Overview

Black Coffee is a luxury music brand website embodying 'Architectural Minimalism'—a design philosophy that strips away ornament to reveal pure, intentional structure. The brand serves a sophisticated audience of electronic music enthusiasts and industry professionals, delivering an experience of refined elegance through a monochromatic canvas punctuated by warm gold accents (#c6a465). The aesthetic evokes exclusivity, precision, and timeless sophistication: deep blacks (#000000) provide the foundation, while the gold accent functions as a visual signature on interactive elements, creating a sense of curated luxury. The emotional response is one of understated power—the interface feels like entering a high-end venue where every detail has been meticulously considered.

The brand voice is authoritative yet approachable, speaking in the language of electronic music culture with precision and confidence. Vocabulary patterns favor directness: 'DJ PRODUCER ARTIST' rather than flowery descriptions. The tone is never casual; it maintains professional distance while acknowledging the artistry of the work. Example sentence in brand voice: 'New release available now—limited edition vinyl pressing.'

Colors

The color system is built on a principle of 'luminous restraint': the majority of the interface is pure black (surface: #000000, surface-dim: #0a0a0a) to create a neutral, sophisticated canvas. The primary accent color is warm gold (#c6a465), used exclusively on call-to-action buttons, interactive links, borders on modal overlays, and focus states. This gold is never used for body text or large backgrounds—it is reserved for moments of intentional interaction. Secondary colors support specific functions: purple (#5f2be0) is used for secondary actions or status indicators, while bright blue (#116dff) highlights tertiary information or links. The on-surface text is off-white (#f6f6f6) for optimal contrast against the black background, with a secondary text color in mid-gray (#c6c6c6) for sup

Typography

The type system employs a two-family strategy: Oswald (geometric sans-serif, weights 600–700) handles all display and headline levels, conveying the brand's modern, architectural precision; Arial and Avenir manage body and label text for legibility and accessibility. Display text (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements and major section titles, commanding attention through scale and negative space rather than color. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) establish visual hierarchy in content sections, with tighter letter-spacing (-0.02em, -0.01em respectively) reinforcing the architectural aesthetic. Body text (16–18px, 400 weight, 24–28px line-height) is set in Arial for maximum legibility on screen, with generous line-height (

Layout

The page layout follows a fixed 12-column grid with a maximum container width of 1280px, centered on larger viewports. The rhythm is driven by a semantic spacing scale: section separation uses lg spacing (40px), card padding uses md spacing (24px), and internal element spacing uses sm spacing (12px). The hero section occupies full viewport height with centered content, establishing visual dominance. Below the fold, content sections are organized in alternating left-right layouts, each with 40px vertical separation. The gutter between columns is consistently 24px. White-space is treated as a design material: the black background is never fully populated—cards and content float within generous negative space, reinforcing the 'architectural minimalism' aesthetic. On mobile (< 768px), the grid

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic use of borders rather than heavy drop-shadows. Level 1 (Base): the background is pure black (#000000) with no shadow. Level 2 (Standard Card): cards use a 1px solid border in outline color (#757575) with a subtle shadow of 0 1px 4px rgba(0, 0, 0, 0.56), creating minimal separation from the background. Level 3 (Elevated/Modal): modal overlays and prominent cards use a 1px solid border in primary gold (#c6a465), a stronger shadow of 0 0 5px rgba(0, 0, 0, 0.70), and a backdrop-filter: blur(4px) on the overlay behind them. On hover

Shapes

The shape philosophy is 'Geometric Precision'—favoring sharp, defined corners over organic curves. Border-radius is used sparingly and intentionally: buttons and input fields use 0.5rem (8px) for a subtle, modern softness; cards and containers use 0.75rem (12px) to create visual distinction without compromising the architectural aesthetic; modals and overlays use 1rem (16px) for a slightly more prominent presence. The full-radius (9999px) is reserved exclusively for badges and pill-shaped elements. This graduated approach ensures that the most interactive elements (buttons, inputs) feel approa

Components

Action Elements Buttons are the primary interactive component and must always use the primary gold (#c6a465) for the main CTA. Primary buttons are 48px tall with 12px vertical and 24px horizontal padding, using a 1px solid border in the button color, 600 font-weight, and 0.05em letter-spacing. On hover, the background shifts to #8b7355 (primary-fixed-dim) and the border follows, with a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition. Secondary buttons use a transparent background with a 1px gold border and gold text; on hover, they fill with rgba(198, 164, 101, 0.08) to indicate interactivity. All buttons must have a minimum touch target of 44px height on mobile and use cursor: pointer.

Containers & Surfaces Cards are the primary content container, using surface-container (#1a1a1a)

Do's and Don'ts

**Do**

• Do use the gold accent (#c6a465) exclusively on interactive elements—buttons, links, focus states, and modal borders—to maintain visual hierarchy and guide user attention.
• Do maintain generous negative space around content; the black background is a design material, not a void to be filled.
• Do apply smooth transitions (200–300ms cubic-bezier easing) to all state changes (hover, focus, active) to reinforce the refined, intentional aesthetic.
• Do use Oswald for all headlines and display text to reinforce the architectural, geometric brand identity.
• Do ensure all text on black backgrounds meets WCAG AA contrast ratios (minimum 4.5:1 for body text, 3:1 for large text) by using off-white (#f6f6f6) or gold (#c6a465).

**Don't**

• Don't introduce new accent colors beyond gold, purple, and blue; the minimalist palette is the brand's signature.
• Don't use heavy shadows or blur effects on the main canvas; reserve backdrop-filter: blur(4px) for modal overlays only.
• Don't apply border-radius greater than 1rem except for badges; sharp corners reinforce the architectural aesthetic.
• Don't use gold for body text, backgrounds, or large surface areas; it is reserved for interactive moments only.
• Don't animate or transition the background color of the page; the black canvas is static and stable, providing visual rest.