Vey0looks

Token Quick Reference

Spacing:     --space-{1..32}  (4px base: 1=4px, 2=8px, 4=16px, 6=24px, 8=32px)
Shadows:     --shadow-{0,sm,md,lg,xl,2xl}
Glows:       --glow-{amber,orange,cyan,green}  (brand-colored hover shadows)
Radii:       --radius-{sm,md,lg,xl,full}  (4px → 9999px)
Easing:      --ease-{out,in,in-out,bounce,spring}  (default: out)
Durations:   --dur-{instant,fast,base,slow,slower,slowest}  (100ms → 800ms)
Breakpoints: sm 640px, md 768px, lg 1024px, xl 1280px, 2xl 1536px
Z-index:     --z-{base,above,sticky,header,dropdown,overlay,modal,toast,tooltip,max}

When to Load References

• Building a webpage/app: Load spacing + components + responsive
• Adding animation: Load motion
• Styling a dashboard: Load components + ascii-advanced (sparklines)
• Accessibility audit: Load accessibility
• Any production output: Load elevation (shadows, z-index)

Live Websites

Brands

VE LAB is the parent brand. Sub-brands share the design system but have distinct accent palettes.

Brand Logos

All logos hosted on GitHub. Use raw URLs directly.

VE LAB SVG Logo Details

The VE LAB logo is a geometric, pixel-grid wordmark rendered as a single SVG path (1188x1188 viewBox). Black monochrome fill with evenodd rule.

Animated variant has a neon glow filter cycling through:

• Cyan: #00ffff
• Magenta: #ff00ff
• Gold: #ffd400
• Green: #00ff6a
• 6-second color cycle, opacity pulses 0.2 → 0.9 → 0.2 over 2.2s

Use the animated SVG for hero sections and loading states. Use the clean SVG for static web use. Use PNG for fallback.

Color Palettes

VE LAB (Parent Brand)

The core palette. Dark-first with amber accent. Use this as the default when no specific sub-brand is specified.

Primary Colors:

• Black: #000000 - Primary background
• Dark Gray: #111111 - Card/section backgrounds
• Gray 800: #1f2937 - Subtle elements, borders
• Gray 400: #9ca3af - Muted text, secondary labels
• White: #ffffff - Primary text on dark

Accent Colors:

• Primary Amber: #fbbf24 - Primary accent, headings, CTAs, brand mark
• Amber Dark: #f59e0b - Hover states, secondary accent
• Amber 300: #fcd34d - Highlights, subtle emphasis

Neon Glow Colors (from animated logo — use for special effects, hero sections):

• Cyan: #00ffff
• Magenta: #ff00ff
• Gold: #ffd400
• Neon Green: #00ff6a

Semantic Colors:

• Green 400: #4ade80 - Success, "do" indicators
• Green 500: #22c55e - Positive accents
• Red 400: #f87171 - Error, "don't" indicators
• Red 500: #ef4444 - Critical alerts

MINY (Music Investment Sub-brand)

Bold, high-contrast palette for pitch decks and music industry materials.

Primary Colors:

• Background: #1a1a1a - Dark primary
• Background Gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%)
• White: #ffffff - Primary text
• Text Muted: rgba(255, 255, 255, 0.85) - Body text

Accent Colors:

• Deep Orange: #FF5722 - Primary accent, cards, h2 headings, signal color
• This is MINY's signature color — use it boldly

Dank (dank.nyc — DJ/Nightlife Sub-brand)

High-energy, streetwear-influenced palette for DJ events, nightlife, and club culture. The Dank logo is a bold italic black wordmark with a cyan/teal shadow offset — this defines the visual identity.

Primary Colors:

• Black: #000000 - Primary background and logo fill
• White: #ffffff - Primary text, clean backgrounds
• Near Black: #0a0a0a - Deep backgrounds for immersive dark mode

Accent Colors:

• Cyan/Teal: #00E5FF - Primary accent, logo shadow, neon glow effects
• Cyan Dark: #00B8D4 - Hover states, secondary accent
• Cyan Light: #18FFFF - Highlights, glow effects
• Hot Pink: #FF006E - Secondary accent for energy, event highlights (optional)

Design Notes:

• Logo uses bold italic typography with a cyan shadow offset to the bottom-right
• Dark backgrounds with neon cyan accents create a nightclub/DJ aesthetic
• Works well with dark gradients and glow/blur effects
• Pair with sans-serif bold italic fonts for headlines

Groww (Growth/Business Sub-brand)

Warm, optimistic palette for growth-focused content, business development, and investment materials. The Groww logo uses a golden yellow circle with green lowercase wordmark.

Primary Colors:

• Groww Green: #4E8C3F - Primary brand color, logo text, headings
• Groww Green Dark: #3D7030 - Hover states, emphasis
• Groww Yellow: #F4CE44 - Logo circle background, highlights, warmth
• Groww Yellow Light: #F9DC6D - Subtle accents, badges
• White: #ffffff - Backgrounds

Secondary Colors:

• Text Dark: #1a1b1e - Primary text on light backgrounds
• Text Muted: #6b7280 - Secondary text
• Soft Green BG: #f0f7ee - Light green tint for card backgrounds
• Border: #e2e8e0 - Subtle green-tinted borders

Design Notes:

• Groww icon: golden yellow circle with green "groww" text inside
• Groww wordmark (2023): large green "groww" with subtle 3D shadow on the "ww"
• Warm, earthy tone — green for growth, yellow for optimism
• Use on light backgrounds for professional/business contexts
• Rounded, friendly aesthetic — lowercase text, soft shapes

Typography

VE LAB

• All text: Inter (weights: 400, 500, 600, 700, 900)
• Fallback: system-ui, -apple-system, sans-serif
• Headings: weight 900 (Black) in amber #fbbf24
• Subheadings: weight 700 (Bold) in white
• Body: weight 400 (Regular) in gray 400
• Google Fonts: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap

MINY

• Headings: Archivo Black (weight 900)
• Body: Space Grotesk (weights: 400, 500)
• Fallback: sans-serif
• h1: Archivo Black, var(--title-size), color white
• h2: Archivo Black, weight 700, color #FF5722
• Body: Space Grotesk, weight 400, rgba(255,255,255,0.85)

Dank

• Headings: Bold italic sans-serif (Bebas Neue, Oswald, or Impact as fallback)
• Body: Inter or Space Grotesk (weights: 400, 500)
• Fallback: system-ui, sans-serif
• h1: Bold italic, color white or cyan #00E5FF on dark
• Style: Always uppercase for headings, italic where possible
• Google Fonts: https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;700&display=swap

Groww

• Headings: Inter (weights: 600, 700)
• Body: Inter (weight: 400)
• Fallback: system-ui, -apple-system, sans-serif
• h1: weight 700, color Groww Green #4E8C3F
• Body: weight 400, color #1a1b1e
• Style: Lowercase-friendly, warm and approachable

Visual Philosophy: ASCII-First Design

Default to ASCII art instead of traditional images. All VE brands use ASCII/text-based visuals as the primary graphic language. This creates a distinctive, hacker-aesthetic identity that renders everywhere — terminals, emails, presentations, web, print.

Principles

1. ASCII replaces stock photos — Never use generic stock imagery. Create meaningful ASCII compositions that convey the concept
2. Thoughtful and relevant — Each ASCII piece should be carefully crafted to match the content, not decorative filler
3. Brand-colored ASCII — Render ASCII art in the brand's accent color (amber for VE LAB, orange for MINY, cyan for Dank, green for Groww)
4. Monospace is the canvas — Use monospace fonts (JetBrains Mono, Fira Code, or Courier) for ASCII blocks
5. Scale with intention — Small ASCII icons for inline accents, large ASCII murals for hero sections and dividers

ASCII Style Guide

For VE LAB (amber on black):

 ╔══════════════════════════════╗
 ║  ██╗   ██╗███████╗          ║
 ║  ██║   ██║██╔════╝          ║
 ║  ██║   ██║█████╗            ║
 ║  ╚██╗ ██╔╝██╔══╝            ║
 ║   ╚████╔╝ ███████╗          ║
 ║    ╚═══╝  ╚══════╝  L A B   ║
 ╚══════════════════════════════╝

For MINY (orange on dark):

  ♪ ♫  ━━━━━━━━━━━━━━━━━  ♫ ♪
  ┃   M I N Y  V I N Y L   ┃
  ┃   ▄▄ ▄▄ ▄▄ ▄▄ ▄▄ ▄▄   ┃
  ┃   ██ ██ ██ ██ ██ ██    ┃
  ♪ ♫  ━━━━━━━━━━━━━━━━━  ♫ ♪

For Dank (cyan on black):

  ░░░░░░░░░░░░░░░░░░░░░░░░░░░
  ░ ▓▓▓  ▓▓▓  ▓  ▓ ▓  ▓ ▓▓  ░
  ░ ▓  ▓ ▓  ▓ ▓▓ ▓ ▓ ▓  ▓▓  ░
  ░ ▓  ▓ ▓▓▓▓ ▓ ▓▓ ▓▓   ░░  ░
  ░ ▓▓▓  ▓  ▓ ▓  ▓ ▓ ▓  ▓▓  ░
  ░░░░░░░░░░░░░░░░░░░░░░░░░░░

For Groww (green on white):

  ┌─────────────────────┐
  │  ╱╲    groww         │
  │ ╱  ╲   ───────       │
  │╱    ╲  ↗ growth      │
  │      ╲╱  metrics     │
  └─────────────────────┘

When to Use ASCII

• Hero sections: Large ASCII murals as visual anchors instead of hero images
• Section dividers: ASCII line patterns between content sections
• Data visualization: ASCII bar charts, sparklines, and tables
• Icons/decorations: Small ASCII symbols instead of icon libraries
• Loading states: Animated ASCII sequences
• Email headers: ASCII banners that render in plain text too
• Terminal output: Brand-styled CLI output and dashboards

ASCII Techniques

• Box drawing: ┌─┐│└─┘┬┴├┤┼ for frames and borders
• Block elements: ░▒▓█▄▀ for fills and gradients
• Braille patterns: ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏ for high-resolution ASCII art
• Musical symbols: ♪♫♬♩ for MINY music contexts
• Arrows/math: →←↑↓↗↘△▽◇○● for data and flow
• Emoji accents (sparingly): Only 🔥 for Dank, 🌱 for Groww — never decorative emoji spam

ASCII + Color in HTML

Render colored ASCII in <pre> blocks with brand colors:

<pre style="font-family: 'JetBrains Mono', 'Fira Code', monospace;
            color: #fbbf24; background: #000000; padding: 2rem;
            border-radius: 12px; font-size: 0.85rem; line-height: 1.4;">
<!-- ASCII art here -->
</pre>

What NOT to Do

• Do not use ASCII as a lazy placeholder — each piece should be intentional
• Do not mix ASCII with stock photos on the same page
• Do not use colored emoji as a substitute for ASCII art
• Do not render ASCII art in proportional fonts — always monospace

Features

Smart Brand Detection

When applying styling, detect which brand context is appropriate:

• VE LAB: Default for general VE content, corporate materials, brand pages
• MINY: Music industry pitches, artist decks, investment materials
• Dank: DJ events, nightlife, club culture, dank.nyc content
• Groww: Business development, growth metrics, investment, professional presentations
• Other sub-brands (BMT, GS, IS, RC, SM): Use VE LAB parent palette with the sub-brand's logo

Dark-First Design

VE LAB, MINY, and Dank use dark backgrounds by default:

• VE LAB: black #000000 / dark gray #111111, amber accent
• MINY: near-black #1a1a1a gradient, deep orange accent
• Dank: black #000000 / near-black #0a0a0a, cyan neon accent

Light Mode (when needed)

For Groww and professional contexts:

• White backgrounds with clean borders
• Dark text hierarchy
• Green or brand-specific accent for interactive elements

Logo Usage Rules

• Maintain minimum 32px height for digital use
• Preserve 1x logo height as clear space on all sides
• Preserve aspect ratio — never stretch or skew
• Use SVG format for web where possible (VE LAB has SVG variants)
• Do not alter colors, add effects, rotate, or combine inappropriately
• Ensure sufficient background contrast
• Dank logo: use on dark backgrounds; on white, the cyan shadow provides edge definition

Accent Color Application

• VE LAB: amber #fbbf24 primary, dark amber #f59e0b secondary
• MINY: deep orange #FF5722 as dominant signal color
• Dank: cyan #00E5FF primary, optional hot pink #FF006E secondary
• Groww: green #4E8C3F primary, yellow #F4CE44 for warmth
• Use semantic green/red only for success/error states, not decoration

Technical Details

Font Management

• Uses Google Fonts CDN for Inter, Archivo Black, Space Grotesk, Bebas Neue
• Falls back to system-ui/-apple-system/sans-serif
• No local font installation required
• For PPTX: use python-pptx with closest system-installed equivalents

Color Application

• Uses hex values for CSS, RGB tuples for python-pptx
• VE LAB amber RGB: (251, 191, 36)
• MINY orange RGB: (255, 87, 34)
• Dank cyan RGB: (0, 229, 255)
• Groww green RGB: (78, 140, 63)
• Groww yellow RGB: (244, 206, 68)
• Maintains color fidelity across web, PDF, and presentation formats

CSS Custom Properties (VE LAB)

:root {
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --black: #000000;
  --gray-900: #111111;
  --gray-800: #1f2937;
  --gray-400: #9ca3af;
  --white: #ffffff;
  --green-400: #4ade80;
  --red-400: #f87171;
  --neon-cyan: #00ffff;
  --neon-magenta: #ff00ff;
  --neon-gold: #ffd400;
  --neon-green: #00ff6a;
}

CSS Custom Properties (MINY)

:root {
  --bg-primary: #1a1a1a;
  --bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
  --card-bg: #FF5722;
  --text-primary: #ffffff;
  --text-on-card: #1a1a1a;
}

CSS Custom Properties (Dank)

:root {
  --dank-black: #000000;
  --dank-near-black: #0a0a0a;
  --dank-cyan: #00E5FF;
  --dank-cyan-dark: #00B8D4;
  --dank-cyan-light: #18FFFF;
  --dank-pink: #FF006E;
  --dank-white: #ffffff;
}

CSS Custom Properties (Groww)

:root {
  --groww-green: #4E8C3F;
  --groww-green-dark: #3D7030;
  --groww-yellow: #F4CE44;
  --groww-yellow-light: #F9DC6D;
  --groww-bg-soft: #f0f7ee;
  --groww-border: #e2e8e0;
  --groww-text: #1a1b1e;
  --groww-text-muted: #6b7280;
}

Agent & Subagent Integration

This skill is designed to be consumed by Claude Code agents and subagents. When an agent needs brand styling, it should:

Quick Reference for Agents

Pick the right brand by context:

Standard brand application steps:

1. Identify which brand from the context (default: VE LAB)
2. Apply the correct color palette (CSS variables or RGB values)
3. Set typography (font-family, weights, heading colors)
4. Include the correct logo URL from the logos table
5. Follow dark-first for VE LAB/MINY/Dank, light for Groww

Google Fonts import (all brands):