---
name: Jams Basicagency
description: "An excellent example of using large typography and layered photography to create a premium, curatorial aesthetic that feels both modern and nostalgic."
version: alpha

colors:
  background: "#8FCEEE"
  primary: "#FFF8F1"
  neutral: "#E5E7EB"
  line: "rgba(255, 248, 241, 0.15)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 124px
    lineHeight: 0.88
    fontWeight: 700
    letterSpacing: "-4.96px"
  title:
    fontFamily: grotesque-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.92px"
  body:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.14
    fontWeight: 300
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#8FCEEE`)** — uses `bg` token
- **Primary text (`#FFF8F1`)** — uses `ink` token
- **Muted (`#E5E7EB`)** — uses `muted` token
- **Borders (`rgba(255, 248, 241, 0.15)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

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

## Elevation & Depth

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

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```