CURATED · OPEN · FREE

Joyntcbd

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

01

Identity DNA

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

02

Color

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

03

Typography

geometric-sans · humanist-sans

• display24px · 700
• body16px · 400
• caption12px · 600

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

04

Spacing

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

05

Surfaces

1px solid rgba(233, 233, 236, 1)

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)

06

Layout

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

07

Motion & Interaction

Subtle opacity and transform transitions on hover (0.1s-0.15s ease-in-out). · Standard 'all' property transitions for broad interactive states.

Slight scale or color shifts, typically with a fast 100ms-150ms transition. · Immediate visual feedback via state changes.

08

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.

09

Voice & Don'ts

• Tone Direct, transactional, and energetic.
• Headlines Bold, concise, and often capitalized or mixed-case for emphasis.
• CTAs Action-oriented and high-contrast (e.g., white text on dark blue).

• 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.
• Avoid: overly poetic language
• Avoid: subdued tones
• Avoid: minimalist jargon

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko