vibecode-brand-design

name	vibecode-brand-design
description	Vibecode brand design system with colors, typography, spacing, and component guidelines. Use when designing UI, styling components, or ensuring brand consistency in the Vibecode app.

Vibecode Brand Design Guide

This skill provides the official Vibecode brand design system. Follow these guidelines when creating or styling UI components.

Core Design Philosophy

Vibecode is a modern, tech-forward brand emphasizing clarity, accessibility, and innovation. Focus on creating intuitive digital experiences while maintaining visual consistency.

Color System

Background Colors

• Primary Background: Clean whites (#FFFFFF) and light neutrals (#F8FAFC, #F1F5F9)
• Secondary Background: Soft grays for depth and hierarchy (#E2E8F0, #CBD5E1)

Text Colors

• Primary Text: Dark charcoal for readability (#1E293B, #0F172A)
• Secondary Text: Medium grays for supporting information (#64748B, #94A3B8)

Accent Colors (Kiwi/Teal Scale)

The primary accent palette - vibrant, modern, suggesting growth and technology:

• #14B8A6 - Teal 500 (Primary accent)
• #0D9488 - Teal 600 (Hover states)
• #0F766E - Teal 700 (Active states)
• #2DD4BF - Teal 400 (Light accent)
• #5EEAD4 - Teal 300 (Backgrounds)

Secondary Accent (Blueberry)

Deep blue tones for contrast and professional grounding:

• #3B82F6 - Blue 500
• #2563EB - Blue 600
• #1D4ED8 - Blue 700

Typography

Font Family

Primary Typeface: Play (Google Fonts) - Modern, clean aesthetic

font-family: 'Play', sans-serif;

Type Scale

Level	Size	Weight	Line Height	Usage
Display	48px	700	1.1	Hero headings
H1	36px	700	1.2	Page titles
H2	28px	600	1.25	Section headings
H3	22px	600	1.3	Subsections
H4	18px	500	1.4	Card titles
Body	16px	400	1.5	Main content
Small	14px	400	1.5	Captions, labels
Tiny	12px	400	1.4	Fine print

Typography Rules

• Use weight variation for emphasis rather than size alone
• Maintain consistent line-height for readability
• Apply color strategically to guide user attention

Spacing System

Use an 8px base unit for consistent spacing:

Token	Value	Usage
xs	4px	Tight spacing, inline elements
sm	8px	Between related elements
md	16px	Standard padding
lg	24px	Section spacing
xl	32px	Large gaps
2xl	48px	Major sections
3xl	64px	Page-level spacing

Border Radius

Subtle rounded corners for professionalism:

• Small: 4px - Buttons, inputs, tags
• Medium: 8px - Cards, panels
• Large: 12px - Modals, large containers
• Full: 9999px - Pills, avatars

Component Guidelines

Buttons

/* Primary Button */
.btn-primary {
  background: #14B8A6;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
}
.btn-primary:hover {
  background: #0D9488;
}

/* Secondary Button */
.btn-secondary {
  background: transparent;
  border: 1px solid #E2E8F0;
  color: #1E293B;
  padding: 12px 24px;
  border-radius: 8px;
}

Input Fields

.input {
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 12px 16px;
  background: #FFFFFF;
}
.input:focus {
  border-color: #14B8A6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

Cards

.card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Effects

Glassmorphism

For overlay elements and floating panels:

.glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Shadows

Level	Value	Usage
sm	0 1px 2px rgba(0,0,0,0.05)	Subtle elevation
md	0 4px 6px rgba(0,0,0,0.1)	Cards, dropdowns
lg	0 10px 15px rgba(0,0,0,0.1)	Modals, popovers
xl	0 20px 25px rgba(0,0,0,0.15)	Major floating elements

Interaction States

Hover

• Subtle color darkening (10-15%)
• Optional slight elevation increase

Focus

• Clear outline using accent color
• box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2)

Active/Pressed

• Slightly darker than hover
• Scale down subtly if appropriate (transform: scale(0.98))

Disabled

• Opacity: 50%
• Cursor: not-allowed

Tailwind CSS Variables

Add to your Tailwind config:

colors: {
  vibecode: {
    kiwi: {
      50: '#F0FDFA',
      100: '#CCFBF1',
      200: '#99F6E4',
      300: '#5EEAD4',
      400: '#2DD4BF',
      500: '#14B8A6',
      600: '#0D9488',
      700: '#0F766E',
      800: '#115E59',
      900: '#134E4A',
    },
    blueberry: {
      500: '#3B82F6',
      600: '#2563EB',
      700: '#1D4ED8',
    }
  }
}

Do's and Don'ts

Do's

• Maintain grid consistency
• Use accent colors purposefully and sparingly
• Ensure accessible contrast ratios (WCAG AA minimum)
• Apply effects subtly
• Keep layouts clean and organized

Don'ts

• Avoid overusing accent colors - they should highlight, not dominate
• Don't break grid systems arbitrarily
• Avoid excessive shadows that clutter the interface
• Don't compromise readability for aesthetics
• Avoid generic AI-generated aesthetics (purple gradients, Inter font)