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

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:

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

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)