selectedleafs-brandlisted

Style kit for selectedleafs.com — the dark, nature-premium Kratom brand (Räuchermischung), with Tea and Special-Herbs lines. Provides exact color palette, typography, spacing tokens, logo guidance, component recipes, real product mockup images, icon sprite sheets, and design language for creating React demo artifacts, mockups, and visual prototypes that approximate the real store look. Use whenever creating demos, visual prototypes, landing page mockups, product grids/cards, reporting with brand styling, or any artifact that should look and feel like selectedleafs or needs real selectedleafs product imagery, brand logos, or store icons. Also use when the design-exploration skill needs brand values for a demo. Triggers on: demo, mockup, prototype, brand colors, selectedleafs style, visual preview, approximate style, logo, product images, product cards, icons, sprite, Kratom, Tee, packaging.
wemwi/skill-library · ★ 1 · Web & Frontend · score 55

Install: claude install-skill wemwi/skill-library

# Brand Kit: selectedleafs Style reference for creating artifacts that approximate the selectedleafs.com look and feel. **Use case:** React demos, HTML mockups, visual prototypes — NOT for Shopify theme code (use liftr-* skills for that). > **Canonical values → `references/tokens.json`.** That file is the machine-readable mirror of the live theme (`core.base.css` v6.0), with exact CSS strings (incl. fluid `clamp()` sizes), `$source` provenance, and `$meta.corrections`. **It is the source of truth.** The tables in this document are a hand-readable *quick reference* — deliberately rounded/condensed for fast demo work. If a value here ever disagrees with `tokens.json`, **tokens.json wins.** Read it whenever you need exact, current, or complete values (full scales, status colors, breakpoints, effects). --- ## 1. Design Language **One-liner:** Dark nature-premium with glass effects — forest greens, gold accents, organic warmth. **Characteristics:** - Dark backgrounds with subtle gradient depth - Glassmorphism cards (translucent, blurred backdrop) - Gold for premium/highlight moments - Leaf green for actions and CTAs - Restrained, confident — no flashy animations - Noise texture overlay on body for organic feel --- ## 2. Color Palette ### Brand Colors | Token | Hex | Role | |-------|-----|------| | `--brand--primary` | `#1a3c33` | Dark forest green — deepest background | | `--brand--primary-accent` | `#b8923a` | Gold — premium highlights, badges | | `--brand--secondary`