# Jams Basicagency · Design system migration spec

> Source: https://jams.basicagency.com  ·  Curated by OpenDesign  ·  en

> An excellent example of using large typography and layered photography to create a premium, curatorial aesthetic that feels both modern and nostalgic.

## 1. Identity DNA

The system operates like a digital vinyl record crate, translating the tactile ritual of browsing physical media into a curated visual interface. Each layer of the design mimics the stacked, offset depth of records in a bin, where discovery is as much about what's partially hidden as what's fully visible.

**One-liner:** A visual music collection interface featuring stacked album art and bold typography.
**Keywords:** Vinyl · Music · Collection · Crate Digging · Visual
**Analogy:** A digital vinyl record crate with a nostalgic, tactile UI.

## 2. Color

The palette is built on a single dominant light blue field, against which warm off-white text and neutral gray borders provide sharp, clear contrast. This high-key scheme rejects dark-mode conventions, establishing an airy, bright environment for photographic content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#8FCEEE` | main background |
| `--ink` | `#FFF8F1` | body text |
| `--muted` | `#E5E7EB` | placeholder |
| `--line` | `rgba(255, 248, 241, 0.15)` | divider |

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

The principle is strict: color creates a bright, open stage for content, never an atmospheric backdrop.

## 3. Typography

Typography functions as a primary structural element, with massive, tightly-tracked titles acting as bold graphic forms rather than mere labels. The exclusive use of uppercase transforms and an extremely tight letter-spacing for display type reinforces a direct, curated, and slightly underground voice.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 124px | 0.88 | 700 | -4.96px | Main titles and navigation labels |
| title | 48px | 1.0 | 700 | -1.92px | Secondary headers and metadata |
| body | 14px | 1.14 | 300 | 0px | Small interface text and supporting details |

**Type rules:**
- 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.

## 4. Spacing

The rhythm is irregular and dramatic, employing large, generous padding to isolate photographic compositions and give them room to dominate the visual field.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Irregular spacing focused on large, dramatic padding to allow photographic content to breathe.

## 5. Surfaces

Depth is articulated not through shadows, but through solid, sharp-edged borders in warm off-white and neutral gray that define the edges of stacked, layered elements. The absence of soft or rounded corners on containers maintains a sharp, physical, and crate-like construction.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Solid borders in warm off-white and neutral gray used to define layers.

## 6. Layout

The skeleton is an asymmetric composition where photographic elements are stacked and offset to create a layered, dimensional depth. This deliberate asymmetry and left-aligned structure break from standard grid conventions, guiding the eye through a more exploratory path.

- **Container max:** 1280px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy prioritizes subtlety and purpose, using smooth opacity and transform transitions over a half-second duration to guide focus and confirm interactions. The design likely incorporates drag mechanics, suggested by grab cursors, to enhance the tactile, physical metaphor of the crate.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth opacity and transform transitions over 0.5s for state changes.
  - Likely includes drag interactions suggested by the grab cursors.

- **Hover:** Cursor changes to pointer for interactive elements and grab for draggable images.
- **Click:** Engages the interactive elements of the collection viewer.
- **Transition:** All elements are configured for smooth transitions, primarily using opacity and transform properties.
- **Keyboard:** Standard tab navigation assumed for text links.

## 8. Voice & Don'ts

The editorial voice is curated, direct, and slightly underground, expressed through bold, tightly tracked, uppercase grotesque headlines. Interaction cues are minimal, relying on cursor changes and shifts in text weight rather than conventional button components.

- **Tone:** Curated, direct, and slightly underground.
- **Headline style:** Bold, tightly tracked, uppercase grotesque.
- **CTA style:** Minimal, relying on pointer cursors and text weight changes.
- **Avoid:** Avoid decorative typography; keep it strictly functional and bold. / Avoid complex UI patterns; let the images and massive text lead. / Avoid dark mode aesthetics; this design relies on a bright, airy palette. / Avoid soft or rounded UI elements; keep edges sharp or use simple pills. / Avoid cluttered layouts; maintain generous whitespace around large text. / Avoid standard button styles; prefer text links and cursor cues.

### Don'ts
- ❌ 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.

The system deliberately forgoes decorative typography, complex UI patterns, and cluttered layouts, trusting the interplay of massive text and stacked imagery to carry the experience.

## System Prompt (paste into AI tool)

```
A bold, curatorial interface for a music or photography collection, reminiscent of physical crate digging. The design relies heavily on a light blue background and warm off-white text, using a clean grotesque sans-serif for massive, tightly-tracked titles. Photography is presented in stacked, offset layers to create depth and encourage exploration. Critical donts: avoid dark mode, avoid rounded corners on main containers, avoid standard sentence-case headers, and avoid standard button components. The layout is intentionally asymmetric and uses large typography as a structural element, requiring generous padding and strict uppercase text transforms to maintain its premium, curated feel.
```
