# Bitofdenim · Design system migration spec

> Source: https://www.bitofdenim.com  ·  Curated by OpenDesign  ·  en

> A strong example of restraint and editorial design in an e-commerce context.

## 1. Identity DNA

The design for Bitofdenim operates like a high-end fashion editorial magazine: every element is chosen with deliberate restraint, leaving space for the work—the upcycled denim—to hold the frame. It is a system built on the principle of absence, where the negative space around typography and photography is as considered as the elements themselves.

**One-liner:** A minimalist, editorial-style e-commerce site for upcycled denim products.
**Keywords:** sustainable · denim · editorial · minimal
**Analogy:** A high-end fashion editorial magazine

## 2. Color

The palette is strictly achromatic, built on a high-contrast pairing of a light gray background and near-black typography. This binary approach ensures that the visual weight falls entirely on the product imagery and the typographic hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F2F2F1` | main background |
| `--ink` | `#1A0A0E` | body text |
| `--muted` | `#222222` | placeholder |
| `--line` | `rgba(26,10,14,1.0)` | divider |

**Color principle:** High-contrast, achromatic palette focused on typography and imagery

The core principle is chromatic restraint, using color only as a neutral stage for content.

## 3. Typography

The typographic voice is defined by two distinct roles: **Meno Display Condensed** for the hero brand name establishes a bold, editorial headline, while **Space Mono** for all UI and body text provides a clean, functional counterpoint. This pairing creates a clear hierarchy between the expressive brand moment and the systematic interface.

- **Display:** didone-serif
- **Body:** monospace
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 280px | 0.85 | 700 | -2px | Hero brand name |
| heading | 28px | 1.5 | 300 | 0px | Subheadings and navigation |
| body | 14px | 1.5 | 400 | 0px | Body text and links |

**Type rules:**
- Use Space Mono for all UI and body text
- Use Meno Display Condensed for the hero brand name
- Keep navigation text clean and uppercase or sentence case

## 4. Spacing

The system's rhythm is dictated by generous whitespace and padding, creating a spacious cadence that allows each component to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace and padding

## 5. Surfaces

Depth is communicated through stark, linear separation rather than elevation. A single, precise border rule (`1px solid #1A0A0E`) defines boundaries, while the absence of drop shadows maintains a flat, graphic plane.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 1px solid #1A0A0E

## 6. Layout

The layout skeleton is a full-width, asymmetric composition centered on a hero section. It employs generous negative space to frame the large typography and studio photograph, creating a focal point without clutter.

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

**Skeleton:** Full-width hero with asymmetric layout and generous negative space

## 7. Motion & Interaction

Motion philosophy is one of quiet utility, employed only to facilitate content transition rather than decoration. The primary patterns are simple opacity fades for image slideshows, with interactions providing immediate, subtle feedback.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Opacity fades
  - Image slideshows

- **Hover:** Subtle opacity change
- **Click:** Immediate response
- **Transition:** Opacity 0.5s on image transitions
- **Keyboard:** Standard tab navigation

## 8. Voice & Don'ts

The editorial voice is quiet, confident, and functional. Headlines use short, impactful phrases, while calls to action are straightforward and simple, avoiding persuasive language.

- **Tone:** Quiet, confident, and editorial
- **Headline style:** Short, impactful phrases like 'No Denim Left Behind'
- **CTA style:** Simple and functional, e.g., 'Shop All' or 'OK!'
- **Avoid:** Excessive adjectives / Loud or aggressive language / Cluttered interfaces

### Don'ts
- ❌ don't use gradients — screenshot shows flat, solid backgrounds instead
- ❌ don't use rounded corners on containers — screenshot shows sharp, rectangular edges
- ❌ don't use drop shadows — screenshot shows elements without elevation effects
- ❌ don't use bright accent colors — screenshot shows a strictly monochromatic palette
- ❌ don't use sans-serif for navigation — screenshot shows a monospaced font
- ❌ don't clutter the layout — screenshot shows generous negative space and minimal elements

The system deliberately avoids decorative elements like gradients, rounded corners, drop shadows, and bright accent colors to preserve its graphic clarity and editorial restraint.

## System Prompt (paste into AI tool)

```
This is a minimalist, editorial-style e-commerce site for upcycled denim products. The design relies on a high-contrast, achromatic palette with a light gray (#F2F2F1) background and near-black (#1A0A0E) typography. The hero features a massive didone-serif display font, while all other UI elements use a monospaced font. Key colors are #F2F2F1 and #1A0A0E. Critical donts: avoid using gradients, avoid using rounded corners on containers, and avoid cluttering the layout with unnecessary elements. The layout is spacious with generous negative space, emphasizing typography and photography.
```