# Joyntcbd · Design system migration spec

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

> A strong example of a dark-mode e-commerce UI that balances a heavy, expressive graphic style with a clean, functional layout.

## 1. Identity DNA

JoyntCBD is a high-energy digital boutique for niche, graphic-heavy apparel, where the interface itself becomes part of the streetwear statement. It operates as a digital-first, gamified storefront, balancing futuristic energy with the functional clarity required for commerce. The system is built to handle bold, saturated graphics without letting the UI recede into the background.

**One-liner:** Dark-themed e-commerce platform for niche graphic streetwear with bold, saturated UI accents.
**Keywords:** futuristic · streetwear · gamified · digital-first
**Analogy:** A high-energy digital boutique for niche, graphic-heavy apparel

## 2. Color

The color system is a study in high-contrast drama, built on a deep navy base that provides immediate depth and focus. A vibrant blue accent cuts through the darkness to signal interactivity, while clean white content areas ensure readability and visual relief.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f4f4f5` | card background |
| `--bg-quiet` | `#f1f3fe` | quiet area |
| `--ink` | `#151523` | body text |
| `--ink-soft` | `#54546e` | secondary text |
| `--muted` | `#b9b9c1` | placeholder |
| `--accent` | `#4e64df` | single accent |
| `--line` | `rgba(233, 233, 236, 1)` | divider |

**Color principle:** High-contrast dark primary palette balanced with a clean white content background and a vibrant blue accent for active elements.

The palette enforces a strict hierarchy: dark for structure, white for content, and blue for decisive action.

## 3. Typography

Typography follows a two-voice model. Bold, geometric sans-serifs command headlines with expressive weight, while humanist sans-serifs deliver body copy with clean, functional legibility.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 24px | 1.2 | 700 | -0.5px | Product titles and headlines |
| body | 16px | 1.5 | 400 | 0px | General UI and descriptive text |
| caption | 12px | 1.3 | 600 | 0.5px | Labels, tags, and small metadata |

**Type rules:**
- Use geometric-sans (SharpGrotesk style) for bold, expressive display text.
- Use humanist-sans (Roobert style) for body copy and standard UI elements.
- Maintain high contrast for text over dark backgrounds using pure white (#ffffff).

## 4. Spacing

The entire layout breathes to a consistent 4px grid, establishing a tight, predictable rhythm that anchors the otherwise expressive content.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px
- **Rhythm:** Consistent 4px grid with standard 8/16/24px gutters.

## 5. Surfaces

Depth is communicated through a layered system of subtle shadows and clean, prominent borders. White cards lift from the dark background, defining clear content boundaries without heavy ornamentation.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 2px 4px 0px rgba(21, 21, 35, 0.2)
  - 0px 0px 10px 0px rgba(0, 0, 0, 0.4)
  - 0px -16px 16px 0px rgb(21, 21, 35)
- **Borders:** 1px solid rgba(233, 233, 236, 1)

## 6. Layout

The skeleton is a responsive e-commerce grid, anchored by a dark, sticky header that persists as a constant navigational frame. Full-width hero sections give way to multi-column product layouts, prioritizing visual density and scannable detail.

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

**Skeleton:** Standard e-commerce grid with a sticky header, full-width hero/product sections, and a multi-column product detail layout.

## 7. Motion & Interaction

Motion is utilitarian and fast, designed to acknowledge interaction without interrupting the shopping flow. Transitions are confined to quick opacity and transform shifts, typically lasting between 100ms and 150ms.

- **Durations:** micro 100ms · small 150ms · medium 400ms
- **Easing:** `cubic-bezier(0.8, 0, 0, 1.12)`
- **Patterns:**
  - Subtle opacity and transform transitions on hover (0.1s-0.15s ease-in-out).
  - Standard 'all' property transitions for broad interactive states.

- **Hover:** Slight scale or color shifts, typically with a fast 100ms-150ms transition.
- **Click:** Immediate visual feedback via state changes.
- **Transition:** Smooth transitions for borders and shadows.
- **Keyboard:** Standard focus management with high-contrast outlines.

## 8. Voice & Don'ts

The editorial voice is direct and transactional, matching the interface's high energy. Language is concise, action-oriented, and often capitalized, with CTAs rendered in high-contrast white on dark blue.

- **Tone:** Direct, transactional, and energetic.
- **Headline style:** Bold, concise, and often capitalized or mixed-case for emphasis.
- **CTA style:** Action-oriented and high-contrast (e.g., white text on dark blue).
- **Avoid:** overly poetic language / subdued tones / minimalist jargon

### Don'ts
- ❌ don't use a plain white header — screenshot shows a dark blue/navy primary navigation bar.
- ❌ don't use sharp, square corners on all elements — screenshot shows a mix of 12px rounded and pill-shaped components.
- ❌ don't rely on a single monochrome palette — screenshot shows a vibrant blue accent (#4e64df) against dark and white backgrounds.
- ❌ don't use serif or handwritten fonts — screenshot shows a strict hierarchy of geometric and humanist sans-serifs.
- ❌ don't use thin, 1px borders everywhere — screenshot uses prominent 2px borders and heavy shadows for elevation.
- ❌ don't keep the entire background white — screenshot uses a dark-themed header and various off-white (#f4f4f5) and blue-tinted (#f1f3fe) sections.

The system deliberately avoids poetic language, subdued tones, and minimalist jargon, rejecting anything that softens the platform's assertive, digital-first posture.

## System Prompt (paste into AI tool)

```
This site is a dark-themed e-commerce platform for niche, graphic-heavy streetwear. It features a high-contrast palette of deep navy (#151523), pure white (#ffffff), and a vibrant blue accent (#4e64df). Typography relies on a hierarchy of geometric-sans for display text and humanist-sans for body copy, prioritizing readability and bold statements. The layout is a standard responsive e-commerce grid with consistent 4px-based spacing. Key critical don'ts: never use a plain white header (it's dark), don't use sharp corners on all elements (pills and rounded rects are common), and don't ignore the vibrant blue accent color.
```