CURATED · OPEN · FREE

Consumedinkey

A minimalist, atmospheric website for a musical collaboration, using stark contrasts and photographic elements.

EditorialPhotographicMonochromeRestraintCalm

↓ Download design system (7 MB)Open in OpenDesign

Visit: https://www.consumedinkey.com

📦 Browse pack contents →

Identity DNA

minimalistavant-gardemusicalabstractimmersive

A stark, atmospheric gallery exhibition for a musical project.

Color

#ffffffInk

#000000BG

rgba(0,0,0,1.0)Line

High-contrast monochrome palette, using pure black and white to create a stark, focused atmosphere.

Typography

humanist-sans

display64px · 400
body16px · 400

Use HelveticaLT or similar humanist-sans. · Keep font weight consistently at 400. · Apply a subtle, positive letter-spacing to all text.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous padding and consistent gaps create an open, breathable layout.

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 0px

Sharp, hard edges. No border-radius. Content floats in space.

Layout

1920container

16pxgutter

768breakpoints

A full-bleed hero section, followed by a dark content section with a central visual and flanking text columns.

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

All elements have a global transition property, suggesting smooth state changes on interaction.

Elements with pointer cursor change state, likely via color or opacity shift. · Standard pointer click behavior.

Components

button Text-based actions with simple dividers (e.g., 'Listen | Buy').
card Not used. Visuals are presented as immersive, edge-to-edge imagery.
chip Not present.
input Not present.
hero Full-screen, atmospheric black-and-white photographic hero with overlaid text.

Voice & Don'ts

Tone Calm, restrained, and enigmatic.
Headlines Simple, declarative, using the album title and artist names.
CTAs Minimal and direct, using pipe separators for actions.

Don't use border-radius on any element — screenshot shows perfectly sharp corners everywhere.
Don't introduce a vibrant accent color — screenshot is strictly monochrome black and white.
Don't use decorative or serif fonts — screenshot uses a clean, geometric sans-serif (HelveticaLT).
Don't add drop shadows or box shadows — elements appear flat against the background.
Don't use complex background patterns or gradients — backgrounds are solid colors or full-bleed images.
Don't use multiple font weights — screenshot shows a consistent, uniform weight (400) throughout.
Avoid: Avoid exclamation marks or overly enthusiastic language.
Avoid: Avoid complex sentences or paragraphs.
Avoid: Avoid bright, saturated colors.
Avoid: Avoid decorative fonts or excessive font weights.

Inside the pack — real screenshots

Consumedinkey — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This is a minimalist, atmospheric website for the musical collaboration 'Consumed In Key'. It uses a stark, high-contrast monochrome palette of pure black (#000000) and white (#ffffff), with a single atmospheric black-and-white photographic element. The typography is a clean, geometric humanist-sans-serif (HelveticaLT) set at a consistent 400 weight with subtle letter-spacing. The layout is immersive and open, using generous padding and full-bleed imagery. Critical design constraints: 1) Maintain absolute color restraint with no accent colors. 2) Use sharp, hard edges with zero border-radius on all elements. 3) Keep typography minimal, uniform in weight, and subtly spaced. Avoid any decorative elements, complex components, or high-energy interactions. The goal is to create a calm, focused, and enigmatic visual experience that complements the musical content.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko