<!-- Generated by ExtractVibe — https://extractvibe.com/brand/smokecartel.com -->
<!-- Extracted: 2026-04-07T00:36:26.263Z | Schema: v1 | Quality: n/a/100 -->
---
version: alpha
name: "Smoke Shop | Online Head Shop Near Me | Smoke Cartel"
description: "Smoke Shop | Online Head Shop Near Me | Smoke Cartel presents a professional web presence."
colors:
  primary: "#ffffff"
  tertiary: "#3b82f6"
  neutral: "#ffffff"
  surface: "#1f1f1f"
  on-surface: "#171717"
  on-surface-secondary: "#ffffff"
  link: "#171717"
typography:
  display-lg:
    fontFamily: "Funnel Display"
    fontSize: "48.4992px"
    fontWeight: "400"
    lineHeight: "48.4992px"
  headline-lg:
    fontFamily: "Funnel Display"
    fontSize: "48.4992px"
    fontWeight: "400"
    lineHeight: "48.4992px"
  body-md:
    fontFamily: "Funnel Sans"
    fontSize: "16px"
    fontWeight: "400"
rounded:
  sm: "6px"
  md: "15.1632px"
  lg: "60px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-outline:
    textColor: "#171717"
    rounded: "0px"
    padding: "12px 20px"
    fontSize: "22px"
    fontWeight: "600"
    borderColor: "#f0f0f0"
    borderWidth: "1px 0px 0px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#171717"
    rounded: "60px"
    padding: "18px 26px"
    fontSize: "15.2693px"
    fontWeight: "500"
    borderColor: "#171717"
    boxShadow: "rgba(168, 232, 226, 0) 0px 0px 0px 0px"
---

# Smoke Shop | Online Head Shop Near Me | Smoke Cartel — Design System

## Overview

Smoke Cartel establishes a professional web presence, diverging from the stereotypical imagery often associated with smoke shops. The design eschews overt counter-culture aesthetics, instead opting for a clean, sophisticated, and user-friendly interface. This approach positions Smoke Cartel as a legitimate and trustworthy e-commerce platform, prioritizing ease of navigation and product presentation over niche subculture signaling. The brand's design does not align with chaotic, overly vibrant, or amateurish aesthetics. Instead, it maintains a consistent, polished, and accessible visual language that appeals to a broad demographic seeking high-quality products within a structured online shopping experience.

The design ethos is centered on clarity and efficiency. It avoids visual clutter and relies on a streamlined layout to guide users through the product catalog. The absence of intense, saturated colors or elaborate graphical elements reinforces this commitment to professionalism. This strategic design choice ensures that the focus remains on the product offerings and the seamless transactional process, rather than on distracting visual theatrics. The overall impression is one of reliability and understated elegance, setting Smoke Cartel apart as a mature and reputable online retailer.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The exclusive use of `#ffffff` as both primary and surface color underpins Smoke Cartel's commitment to a clean, uncluttered, and professional aesthetic. This monochromatic foundation maximizes readability and highlights product imagery without visual competition. It signals transparency and a minimalist approach, ensuring the brand's character is perceived as serious and straightforward, rather than flamboyant or niche-specific.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#ffffff` | White |
| accent / tertiary | `#3b82f6` | Dodger Blue |
| surface | `#1f1f1f` | Near-Black |
| background | `#ffffff` | White |
| text | `#171717` | Near-Black |
| secondary text | `#ffffff` | White |
| link | `#171717` | Near-Black |
| muted | `#ffffff` | White |

## Typography

The selection of Funnel Sans and Funnel Display establishes a modern and authoritative typographic voice. Funnel Sans provides excellent legibility for body text and functional elements, maintaining a clean and approachable tone. Funnel Display, reserved for headlines and prominent text, introduces a distinctive character while upholding the overall professional aesthetic. This hierarchy ensures clear information architecture and reinforces the brand's professional and organized online presence.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Funnel Sans | body | self-hosted | 400, 500, 600 |
| Funnel Display | heading | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Funnel Display | 48.4992px | 400 | 48.4992px | — |
| Heading 2 | Funnel Display | 48.4992px | 400 | 48.4992px | — |
| Body | Funnel Sans | 16px | 400 | — | — |

### Conventions

- Heading case — title-case

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(168, 232, 226, 0.1) 0px 0px 0px 0px` |
| element | `rgba(66, 73, 96, 0.4) 0px 0px 15px 0px` |
| button | `rgba(168, 232, 226, 0) 0px 0px 0px 0px` |

### Gradients

- `linear-gradient(rgba(23, 23, 23, 0.2) 50%, rgba(23, 23, 23, 0.8))`

## Shapes

Border-radius scale:

- `sm` — 6px
- `md` — 15.1632px
- `lg` — 60px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Outline**

- Text — `#171717`
- Radius — `0px`
- Padding — `12px 20px`
- Font size — `22px`
- Font weight — `600`
- Border — `1px 0px 0px solid #f0f0f0`
- Sample copy — "FAQ"

**Secondary**

- Background — `#ffffff`
- Text — `#171717`
- Radius — `60px`
- Padding — `18px 26px`
- Font size — `15.2693px`
- Font weight — `500`
- Border — ` solid #171717`
- Shadow — `rgba(168, 232, 226, 0) 0px 0px 0px 0px`
- Sample copy — "SHOP NOW"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | png | [link](brands/smokecartel.com/logo-0.png) | 95% |
| favicon | — | png | [link](brands/smokecartel.com/logo-1.png) | 95% |
| primary | color | svg | [link](brands/smokecartel.com/logo-2.svg) | 85% |
| primary | color | webp | [link](brands/smokecartel.com/logo-3.webp) | 85% |
| primary | color | svg | [link](brands/smokecartel.com/logo-4.svg) | 85% |
| primary | color | svg | [link](brands/smokecartel.com/logo-5.svg) | 85% |
| primary | color | svg | [link](brands/smokecartel.com/logo-6.svg) | 85% |
| primary | color | svg | [link](brands/smokecartel.com/logo-7.svg) | 85% |
| primary | color | svg | [link](brands/smokecartel.com/logo-8.svg) | 85% |
| primary | color | svg | [link](brands/smokecartel.com/logo-9.svg) | 85% |
| primary | color | webp | [link](brands/smokecartel.com/logo-10.webp) | 85% |
| primary | color | png | [link](brands/smokecartel.com/logo-11.png) | 85% |

## Sources

- Live brand page — https://extractvibe.com/brand/smokecartel.com
- Raw JSON — https://extractvibe.com/api/brand/smokecartel.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/smokecartel.com/design.md
- Extracted — 2026-04-07T00:36:26.263Z
- Generator — ExtractVibe vv1