CURATED · OPEN · FREE

Jams Basicagency

A visual music collection interface featuring stacked album art and bold typography.

01

Identity DNA

A digital vinyl record crate with a nostalgic, tactile UI.

02

Color

High-contrast soft palette using a dominant light blue background with warm off-white text.

03

Typography

grotesque-sans

• display124px · 700
• title48px · 700
• body14px · 300

Text is heavily weighted towards uppercase transforms. · Titles use extremely tight negative letter-spacing for a bold, modern look. · Large typography acts as a structural graphic element rather than just content.

04

Spacing

Irregular spacing focused on large, dramatic padding to allow photographic content to breathe.

05

Surfaces

Solid borders in warm off-white and neutral gray used to define layers.

06

Layout

Asymmetric, layered composition where images are stacked and offset to create a physical crate-like depth.

07

Motion & Interaction

Smooth opacity and transform transitions over 0.5s for state changes. · Likely includes drag interactions suggested by the grab cursors.

Cursor changes to pointer for interactive elements and grab for draggable images. · Engages the interactive elements of the collection viewer.

08

Components

• button Text-based navigation with uppercase styling and pointer cursors.
• card Layered photographic elements acting as the primary 'cards'.
• chip Simple text tags like 'CRATE' and 'GRID' used for navigation.
• hero Full-bleed stacked image composition with heavy typographic metadata.

09

Voice & Don'ts

• Tone Curated, direct, and slightly underground.
• Headlines Bold, tightly tracked, uppercase grotesque.
• CTAs Minimal, relying on pointer cursors and text weight changes.

• Don't use a dark background — screenshot shows a dominant light blue field.
• Don't apply soft, rounded corners to containers — screenshot shows sharp edges.
• Don't use standard sentence case for headers — screenshot shows exclusive uppercase treatment.
• Don't use a wide letter-spacing for display type — screenshot shows tightly tracked titles.
• Don't center all content — screenshot shows an asymmetric, left-aligned, and layered layout.
• Don't use a single flat layer for content — screenshot shows a stacked, dimensional depth.
• Avoid: Avoid decorative typography; keep it strictly functional and bold.
• Avoid: Avoid complex UI patterns; let the images and massive text lead.
• Avoid: Avoid dark mode aesthetics; this design relies on a bright, airy palette.
• Avoid: Avoid soft or rounded UI elements; keep edges sharp or use simple pills.
• Avoid: Avoid cluttered layouts; maintain generous whitespace around large text.
• Avoid: Avoid standard button styles; prefer text links and cursor cues.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

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