---
name: Joyntcbd
description: "A strong example of a dark-mode e-commerce UI that balances a heavy, expressive graphic style with a clean, functional layout."
version: alpha

colors:
  background: "#ffffff"
  primary: "#151523"
  secondary: "#54546e"
  tertiary: "#4e64df"
  neutral: "#b9b9c1"
  bg-soft: "#f4f4f5"
  bg-quiet: "#f1f3fe"
  line: "rgba(233, 233, 236, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 600
    letterSpacing: "0.5px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

Dark-themed e-commerce platform for niche graphic streetwear with bold, saturated UI accents.

*A high-energy digital boutique for niche, graphic-heavy apparel*

## Colors

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

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#151523`)** — uses `ink` token
- **Secondary text (`#54546e`)** — uses `ink-soft` token
- **Accent (`#4e64df`)** — uses `accent` token
- **Muted (`#b9b9c1`)** — uses `muted` token
- **Borders (`rgba(233, 233, 236, 1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Consistent 4px grid with standard 8/16/24px gutters.

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Rounded rectangles (12px radius) for primary actions, pill-shaped (999px radius) for secondary tags and chips.
- **card:** Clean, white-background cards with subtle borders and moderate drop shadows for product displays.
- **chip:** Small, pill-shaped tags used for product styles and categories.
- **input:** Rounded search bars with high-contrast borders and prominent icon buttons.
- **hero:** Full-width, visually dense banner sections combining photography with bold text overlays.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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