frankx-brand

name	frankx-brand
description	Apply official FrankX brand standards to all artifacts, ensuring visual consistency across content, products, and communications. Use this skill for any FrankX-related content creation, design work, or communication.

FrankX Brand Guidelines & Voice

Core Mission

Translate Frank's musician-technologist journey into language, prompts, and experiences that turn overwhelmed creators into confident, AI-empowered artists.

Brand Pillars

1. Creator-First

Every deliverable should empower independent creators, not overwhelm them with corporate jargon or complex tech speak.

2. Soul + Systems

Bridge spirituality and technology. Show how AI can amplify human creativity while honoring artistic integrity.

3. Action-Oriented

Every piece of content should end with a clear next step. No inspiration without implementation.

4. Studio Energy

Communicate with the warmth and intimacy of a late-night studio session, not a boardroom presentation.

---

Visual Identity

Color Palette

Primary Domain Colors:

/* Conscious & Spirituality */
--conscious-purple: #8B5CF6;
--conscious-deep: #6D28D9;
--conscious-light: #C4B5FD;

/* AI & Technology */
--tech-cyan: #06B6D4;
--tech-electric: #0891B2;
--tech-bright: #67E8F9;

/* Music & Creativity */
--music-orange: #F97316;
--music-vibrant: #EA580C;
--music-warm: #FDBA74;

/* Personal Development */
--growth-green: #10B981;
--growth-forest: #059669;
--growth-fresh: #6EE7B7;

Foundational Colors:

/* Backgrounds */
--deep-navy: #0F172A;
--midnight: #1E293B;
--cosmic-dark: #0F1629;

/* Accents */
--cosmic-purple: #AB47C7;
--aurora-blue: #43BFE3;
--gold-accent: #F59E0B;
--white: #FFFFFF;

Usage Guidelines:

• Use domain colors for content-specific materials
• Deep navy/midnight for backgrounds
• Gold accent for CTAs and important actions
• Never use pure black (#000000)
• Maintain 4.5:1 contrast ratio minimum (WCAG AA)

Typography

Font Families:

/* Headings - Modern & Bold */
--font-heading: 'Poppins', sans-serif;

/* Body - Clean & Readable */
--font-body: 'Inter', sans-serif;

/* Code - Technical Content */
--font-code: 'JetBrains Mono', monospace;

Type Scale:

--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 1.875rem;  /* 30px */
--text-4xl: 2.25rem;   /* 36px */
--text-5xl: 3rem;      /* 48px */
--text-6xl: 3.75rem;   /* 60px */

Typography Rules:

• Headlines: Poppins Bold (600-700 weight)
• Body: Inter Regular (400 weight)
• Emphasis: Inter Medium (500 weight)
• Strong: Inter SemiBold (600 weight)
• Line height: 1.5 for body, 1.2 for headlines
• Letter spacing: -0.02em for large headings

Visual Style

Design Principles:

1. Glassmorphism - Subtle blur and transparency for modern depth
2. Aurora Gradients - Soft, cosmic background effects
3. Organic Flow - Natural, flowing patterns (not rigid grids)
4. Sacred Geometry - Subtle geometric accents for conscious content
5. Depth Through Layers - Shadows, blur, and overlays create dimension

Visual Effects:

/* Glassmorphic Cards */
background: linear-gradient(
  135deg,
  rgba(255, 255, 255, 0.15) 0%,
  rgba(255, 255, 255, 0.05) 100%
);
backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.18);

/* Aurora Background */
background: radial-gradient(
  circle at 20% 20%,
  rgba(67, 191, 227, 0.22), transparent 45%
),
radial-gradient(
  circle at 80% 10%,
  rgba(171, 71, 199, 0.18), transparent 55%
);

/* Depth Shadows */
box-shadow:
  0 25px 60px rgba(8, 15, 33, 0.4),
  0 12px 25px rgba(8, 15, 33, 0.3);

Imagery Guidelines:

• Use algorithmic/generative art for headers
• Avoid stock photos - prefer original visuals
• Dark backgrounds with luminous accents
• High contrast for readability
• Optimize for web (WebP, AVIF formats)

---

Voice & Tone

Core Voice Attributes

Cinematic - Paint vivid pictures with words "The studio lights snap on at 2 AM. Ideas flowing like liquid rhythm."

Intimate - Speak directly to the individual creator "You know that moment when the perfect chord progression hits?"

Rooted in Studio Life - Ground abstract concepts in creative practice "Think of AI prompts like arranging a track - layering elements until it resonates."

Technically Accurate with Warmth - Explain complex ideas without coldness "LangGraph orchestrates agents the way a producer balances stems - each voice clear, all working together."

Tone by Content Type

Blog Articles:

• Lead with feeling, then explain the system
• Use studio metaphors and music analogies
• End with concrete action steps
• Example: "Before we dive into the architecture, picture this: you're arranging a track..."

Product Copy:

• Focus on transformation, not features
• Show the creative outcome first
• Highlight time saved and confidence gained
• Example: "From idea to release in one session. No overthinking. Pure creation."

Social Media:

• Short, punchy, inspiring
• Lead with the 'why', follow with the 'how'
• Use line breaks for rhythm
• Example: "Most creators overthink.\n\nVibe OS removes the friction.\n\nYou create. AI handles the rest.\n\nPure flow state."

Course Content:

• Clear, structured, but encouraging
• Celebrate small wins
• Break complex concepts into studio-relatable chunks
• Example: "Module 1 complete! You just learned what takes most producers months. Now let's apply it..."

Email Sequences:

• Conversational, like messages from a mentor
• Personal stories and case studies
• Each email = one clear action
• Example: "Quick note from the studio - just watched Sarah launch her first track using yesterday's lesson..."

Words We Use

✅ Create, craft, build, compose, architect, orchestrate ✅ Flow, rhythm, resonance, frequency, vibe ✅ Transform, empower, amplify, elevate ✅ Session, ritual, practice, journey ✅ Authentic, purpose-driven, intentional

Words We Avoid

❌ Disrupt, revolutionary, game-changing (overused startup speak) ❌ Synergy, leverage, utilize (corporate jargon) ❌ Cheap, easy, simple (undermines the craft) ❌ Automate everything (we augment, not replace humans) ❌ Just, merely, simply (can sound condescending)

---

Content Structure Patterns

Blog Article Template

# [Compelling Headline - Promise + Curiosity]

[Opening Hook - Studio scene or personal story - 2-3 sentences]

[The Challenge - What creators struggle with - 1 paragraph]

[The Insight - Why this matters now - 1 paragraph]

## [Section 1: The Feeling]
Paint the picture. Use metaphors. Make it visceral.

## [Section 2: The System]
Explain how it works. Technical but warm. Use examples.

## [Section 3: The Implementation]
Step-by-step guide. Clear actions. Code/templates if applicable.

## [Section 4: The Transformation]
Case study or example. Show the outcome. Build belief.

## Conclusion: Your Next Session
One clear action to take now. Link to resource/product/community.

---
*Share your creation* [CTA]

Product Landing Page Structure

# Hero Section
- Headline: Transformation promise (7 words max)
- Subhead: How + who it's for (15 words max)
- CTA: Action-oriented (2-3 words)
- Visual: Algorithmic art or product demo

# Social Proof
- Creator testimonials (authentic quotes)
- Results/metrics (tracks released, time saved)
- Community snapshot

# How It Works
- 3-step process (max)
- Visual for each step
- Emphasize ease + outcome

# Features as Benefits
- Don't list features
- Show how each unlocks creative power
- Use studio/music metaphors

# Pricing/CTA
- Clear tiers
- Emphasize value, not cost
- Money-back guarantee if applicable
- Strong action button

# FAQ
- Address real concerns
- Link to support resources
- Build confidence

Social Media Post Framework

# Hook (Line 1)
Question, bold statement, or surprising insight

# Story/Context (Lines 2-4)
Brief narrative or example

# Insight/Lesson (Lines 5-6)
The key takeaway

# Action (Line 7+)
What to do next + link

# Hashtags
3-5 relevant tags (not spammy)

---

Domain-Specific Guidelines

Mindful Content (Spirituality & Awareness)

Color: Purple palette (#8B5CF6) Visual Style: Sacred geometry, flow fields, aurora effects Tone: Reflective, poetic, grounded in practice Metaphors: Light, frequency, resonance, presence, emergence Example: "Awareness isn't abstract - it's the space between thoughts, like silence between notes in a melody."

AI-Tech Content (Enterprise & Technical)

Color: Cyan palette (#06B6D4) Visual Style: Neural networks, circuit patterns, clean diagrams Tone: Technically precise, forward-thinking, accessible Metaphors: Architecture, orchestration, systems, intelligence Example: "LangGraph agents work like a jazz ensemble - each improvises within structure, listening and adapting in real-time."

Music Content (Production & Creativity)

Color: Orange palette (#F97316) Visual Style: Waveforms, frequencies, vibrant energy Tone: Energetic, inspiring, hands-on Metaphors: Sessions, tracks, mixing, arrangements, flow Example: "Suno prompts are like mixing stems - layer the elements, balance the frequencies, let the magic emerge."

Personal Dev Content (Growth & Performance)

Color: Green palette (#10B981) Visual Style: Growth patterns, organic expansion, progress indicators Tone: Encouraging, practical, transformative Metaphors: Seasons, cultivation, momentum, evolution Example: "Habits compound like interest - small deposits daily, exponential returns over time."

---

Brand Applications

When Creating Artifacts (HTML/React)

• Use FrankX color palette (domain-appropriate colors)
• Apply glassmorphic design patterns
• Poppins for headings, Inter for body text
• Dark backgrounds with luminous accents
• Ensure WCAG AA accessibility (4.5:1 contrast)

When Writing Documentation

• Lead with 'why' before 'how'
• Use studio/music analogies where applicable
• Include code examples with clear comments
• End sections with "Next step" guidance
• Maintain encouraging, mentor-like tone

When Designing Graphics

• Generate algorithmic art for headers (use algorithmic-art skill)
• Apply domain-specific color palette
• Ensure high contrast for text overlay
• Optimize for web delivery (WebP/AVIF)
• Include FrankX branding subtly (no heavy logos)

When Building Products

• Focus on creator transformation
• Simplify complex workflows
• Beautiful, intuitive interfaces
• Fast, responsive experiences
• Clear onboarding and next steps

---

Quality Checklist

Before delivering any FrankX content, verify:

Visual:

• Uses correct domain color palette
• Typography is Poppins (headings) + Inter (body)
• Meets WCAG AA contrast requirements
• Glassmorphic/aurora design elements applied
• Optimized images (WebP/AVIF, proper sizing)

Content:

• Leads with feeling, then explains system
• Uses studio/music metaphors where relevant
• Ends with clear next action
• Avoids corporate jargon
• Maintains creator-first perspective
• Technically accurate but warm

Structure:

• Clear hierarchy (H1 → H2 → H3)
• Scannable (bullets, short paragraphs)
• Logical flow (hook → insight → action)
• Mobile-responsive layout
• Fast loading (<3s)

Brand Alignment:

• Reflects core mission (empower creators)
• Balances soul + systems
• Action-oriented outcome
• Studio energy in tone
• Authentic FrankX voice

---

Examples in Action

❌ Generic AI Content

"Leverage our cutting-edge AI platform to disrupt your workflow and achieve revolutionary results."

Issues: Corporate jargon, vague promises, no warmth

✅ FrankX Style

"Picture this: 2 AM in the studio, perfect idea flowing. But by morning? Lost. Vibe OS captures those midnight sparks and turns them into tracks you actually release."

Why it works: Studio scene, specific problem, clear transformation, warm tone

---

❌ Technical Documentation

"Initialize the LangGraph StateGraph object with nodes representing agent functions and edges defining the workflow DAG."

Issues: Accurate but cold, no context, assumes expertise

✅ FrankX Style

"Think of LangGraph like arranging a track. Each agent is an instrument (nodes), and edges are how they pass the creative baton. The StateGraph is your multitrack recorder, keeping everything in sync."

Why it works: Music metaphor, builds understanding, maintains technical accuracy with warmth

---

When to Use This Skill

Activate the frankx-brand skill whenever creating:

• Blog articles or social content for FrankX
• Product pages or marketing materials
• Course content for AI Music Academy
• Email sequences or newsletters
• Design assets or visual content
• Technical documentation with FrankX voice
• Any artifact representing the FrankX brand

This skill ensures every output reflects Frank's unique voice - technically brilliant, creatively inspiring, deeply human.

Remember: Every piece of content should leave creators feeling empowered, not overwhelmed. Technology amplifies creativity; it doesn't replace soul.

---

Skill Version: 1.0 Last Updated: November 14, 2025 Maintained By: FrankX Brand Team