Branding & Styling

Transform your FeatureShark board to perfectly match your brand identity with comprehensive customization options for colors, logos, typography, and layout.

Overview

FeatureShark's branding system allows you to create a seamless experience that feels like a natural extension of your product. Customize every visual element to maintain brand consistency and build user trust.

Customization Capabilities

• Brand Colors: Primary, secondary, accent colors
• Logo Integration: Header logo, favicon, email signatures
• Typography: Font families, sizes, and weights
• Layout Options: Card styles, spacing, and arrangement
• Component Styling: Buttons, forms, navigation elements
• Email Templates: Branded notification emails

Brand Colors

Color Palette Configuration

Primary Brand Color

Your main brand color used for:

• Call-to-action buttons (Submit, Vote, Login)
• Active navigation items and selected states
• Progress indicators and status badges
• Link colors throughout the interface

Color Selection Tips:

/* Good contrast ratios for accessibility */
Primary: #685dee (Purple - FeatureShark default)
Primary: #2563eb (Blue - Professional)
Primary: #059669 (Green - Growth-focused)
Primary: #dc2626 (Red - Urgent/Important)

Secondary Colors

Supporting colors for:

• Hover states and interactive elements
• Background variations and subtle accents
• Border colors and dividers
• Icon colors and decorative elements

Status Colors

Semantic colors for different states:

Success: #10b981 (Green)
Warning: #f59e0b (Amber)
Error: #ef4444 (Red)
Info: #3b82f6 (Blue)
Neutral: #6b7280 (Gray)

Advanced Color Configuration

Color Variants

Automatic generation of color shades:

• 50: Very light tint (backgrounds)
• 100: Light tint (hover backgrounds)
• 200: Subtle accent
• 300: Borders and dividers
• 400: Disabled states
• 500: Primary color
• 600: Darker variant (hover states)
• 700: Dark accent
• 800: Text on light backgrounds
• 900: Very dark (headers, emphasis)

Dark Mode Colors

Separate color palette for dark theme:

/* Light mode */
Background: #ffffff
Text: #1f2937
Border: #e5e7eb

/* Dark mode */  
Background: #111827
Text: #f9fafb
Border: #374151

Color Accessibility

Contrast Requirements

Ensure WCAG 2.1 AA compliance:

• Normal text: 4.5:1 contrast ratio minimum
• Large text: 3:1 contrast ratio minimum
• Interactive elements: 3:1 for focus indicators
• Graphical elements: 3:1 for meaningful graphics

Color Blind Considerations

• Don't rely solely on color to convey information
• Use patterns or icons alongside color coding
• Test with color blind simulators
• Provide alternative indicators (text, symbols)

Logo Integration

Header Logo

Logo Specifications

Recommended dimensions:

• Width: 120-200px optimal
• Height: 40-60px optimal
• Format: SVG preferred, PNG acceptable
• Background: Transparent recommended

Technical Requirements:

• Maximum file size: 2MB
• Supported formats: SVG, PNG, JPG, WebP
• Minimum resolution: 72 DPI
• Color space: sRGB

Logo Placement Options

1. Top Left (default): Traditional navigation placement
2. Top Center: Prominent brand focus
3. Top Right: Unique positioning for some brands
4. Custom Position: Enterprise feature for specific layouts

Responsive Behavior

/* Desktop */
.logo {
  width: 180px;
  height: auto;
}

/* Tablet */
@media (max-width: 768px) {
  .logo {
    width: 140px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .logo {
    width: 120px;
  }
}

Favicon

Favicon Requirements

• Size: 32x32px (minimum), 192x192px (recommended)
• Format: ICO, PNG, or SVG
• Design: Simple, recognizable at small sizes
• Background: Usually solid color or transparent

Multi-Size Favicon Package

Generate comprehensive favicon set:

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

Email Logo Integration

Email Header Logo

• Dimensions: 200x60px recommended
• Format: PNG for better email client support
• Alt text: Include descriptive alt text
• Retina support: Provide 2x resolution version

Typography

Font Selection

Web Font Integration

FeatureShark supports Google Fonts and custom font uploads:

Popular Professional Fonts:

/* Sans-serif options */
font-family: 'Inter', sans-serif; /* Modern, clean */
font-family: 'Roboto', sans-serif; /* Google standard */
font-family: 'Open Sans', sans-serif; /* Friendly, readable */
font-family: 'Poppins', sans-serif; /* Geometric, modern */

/* Serif options */
font-family: 'Merriweather', serif; /* Traditional, readable */
font-family: 'Playfair Display', serif; /* Elegant, distinctive */

Custom Font Upload:

• Supported formats: WOFF2, WOFF, TTF
• File size limit: 500KB per font file
• Font variants: Regular, Bold, Italic recommended
• Fallback fonts: Always specify system fallbacks

Typography Scale

Consistent sizing hierarchy:

/* Heading sizes */
h1: 2.25rem (36px) - Page titles
h2: 1.875rem (30px) - Section headers  
h3: 1.5rem (24px) - Subsection headers
h4: 1.25rem (20px) - Card titles
h5: 1.125rem (18px) - Small headers
h6: 1rem (16px) - Smallest headers

/* Body text */
Large: 1.125rem (18px) - Important content
Normal: 1rem (16px) - Default body text
Small: 0.875rem (14px) - Secondary text
Tiny: 0.75rem (12px) - Labels, captions

Font Pairing

Effective Combinations

Professional & Clean:

Headings: 'Inter', sans-serif
Body: 'Inter', sans-serif

Creative & Friendly:

Headings: 'Poppins', sans-serif  
Body: 'Open Sans', sans-serif

Classic & Readable:

Headings: 'Playfair Display', serif
Body: 'Source Sans Pro', sans-serif

Typography Best Practices

1. Limit font families to 2 maximum (heading + body)
2. Ensure readability at all sizes and devices
3. Consider loading performance - fewer fonts load faster
4. Test across browsers and devices
5. Provide fallbacks for custom fonts

Layout Customization

Board Layout Options

Card Layout Styles

Compact Cards:

.feature-card {
  padding: 16px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

Spacious Cards:

.feature-card {
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

Minimal Cards:

.feature-card {
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

Grid Configuration

Responsive Grid System:

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

/* Tablet: 2 columns */
@media (max-width: 1023px) and (min-width: 640px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* Mobile: 1 column */
@media (max-width: 639px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

Navigation Styling

Header Customization

/* Navigation bar styling */
.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 12px 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Navigation links */
.nav-link {
  color: white;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.nav-link:hover {
  opacity: 0.8;
}

Sidebar Configuration (Enterprise)

• Collapsible sidebar for category navigation
• Fixed or floating positioning options
• Custom category icons and colors
• Hierarchical navigation for complex categorization

Component Styling

Button Customization

Button Variants

Primary Buttons:

.btn-primary {
  background: linear-gradient(135deg, #685dee 0%, #7c3aed 100%);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(140, 80, 255, 0.3);
}

Secondary Buttons:

.btn-secondary {
  background: transparent;
  border: 2px solid #685dee;
  color: #685dee;
  border-radius: 8px;
  padding: 10px 22px;
}

Form Styling

Input Fields

.form-input {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  transition: border-color 0.2s ease;
}

.form-input:focus {
  border-color: #685dee;
  box-shadow: 0 0 0 3px rgba(140, 80, 255, 0.1);
  outline: none;
}

Textarea Customization

.form-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
}

Vote Button Styling

Custom Vote Buttons

.vote-button {
  background: #f3f4f6;
  border: 2px solid #e5e7eb;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.vote-button.voted {
  background: #685dee;
  border-color: #685dee;
  color: white;
}

.vote-button:hover {
  transform: scale(1.05);
}

Theme Presets

Pre-Built Themes

Professional Theme

:root {
  --primary-color: #1f2937;
  --secondary-color: #374151;
  --accent-color: #3b82f6;
  --background-color: #ffffff;
  --text-color: #1f2937;
  --border-color: #e5e7eb;
}

Creative Theme

:root {
  --primary-color: #685dee;
  --secondary-color: #7c3aed;
  --accent-color: #06b6d4;
  --background-color: #fafafa;
  --text-color: #374151;
  --border-color: #d1d5db;
}

Minimal Theme

:root {
  --primary-color: #000000;
  --secondary-color: #404040;
  --accent-color: #666666;
  --background-color: #ffffff;
  --text-color: #000000;
  --border-color: #cccccc;
}

Dark Theme

:root {
  --primary-color: #685dee;
  --secondary-color: #7c3aed;
  --accent-color: #06b6d4;
  --background-color: #111827;
  --text-color: #f9fafb;
  --border-color: #374151;
}

Email Template Branding

Notification Emails

Header Branding

<table width="100%" style="background: #685dee; padding: 20px;">
  <tr>
    <td>
      <img src="https://yourdomain.com/logo-white.png" 
           alt="Your Company" 
           width="120" 
           style="display: block;">
    </td>
  </tr>
</table>

Content Styling

/* Email-safe CSS */
.email-content {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #374151;
}

.email-button {
  background-color: #685dee;
  color: white;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 6px;
  display: inline-block;
  font-weight: 600;
}

Footer Customization

<table width="100%" style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #e5e7eb;">
  <tr>
    <td style="text-align: center; color: #6b7280; font-size: 14px;">
      <p>© 2024 Your Company. All rights reserved.</p>
      <p>
        <a href="https://yourapp.com" style="color: #685dee;">Visit our website</a> | 
        <a href="https://feedback.yourapp.com" style="color: #685dee;">Feature requests</a>
      </p>
    </td>
  </tr>
</table>

Mobile Optimization

Responsive Design

Mobile-First Approach

/* Base styles for mobile */
.container {
  padding: 16px;
  max-width: 100%;
}

/* Scale up for larger screens */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

Touch-Friendly Elements

.touch-target {
  min-height: 44px; /* Apple's recommended minimum */
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-vote-button {
  padding: 16px;
  font-size: 18px;
  border-radius: 8px;
}

Mobile Navigation

Hamburger Menu Styling

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }
  
  .desktop-nav {
    display: none;
  }
}

Implementation Guide

Quick Setup Process

Step 1: Basic Brand Colors

1. Navigate to Settings > Branding
2. Upload your company logo
3. Set primary brand color
4. Choose secondary accent color
5. Preview changes in real-time

Step 2: Typography Configuration

1. Select font family from Google Fonts library
2. Configure font sizes for headings and body
3. Adjust line heights for readability
4. Test on mobile devices

Step 3: Layout Customization

1. Choose card style (compact, spacious, minimal)
2. Configure spacing and margins
3. Select button styles and hover effects
4. Preview responsive behavior

Step 4: Advanced Styling

1. Upload custom CSS if needed
2. Configure email template branding
3. Set up dark mode color scheme
4. Test across different browsers

Testing and Validation

Cross-Browser Testing

Test your branding across:

• Chrome (desktop and mobile)
• Safari (desktop and mobile)
• Firefox (desktop and mobile)
• Edge (desktop and mobile)

Accessibility Testing

• Color contrast validation
• Keyboard navigation testing
• Screen reader compatibility
• Mobile usability verification

Performance Impact

Monitor branding impact on:

• Page load times
• Font loading performance
• Image optimization
• CSS file sizes

Best Practices

Brand Consistency

1. Use your established brand colors exactly
2. Match typography to your main product
3. Maintain consistent spacing and proportions
4. Apply brand voice to all text content

Performance Optimization

1. Optimize images for web (WebP format preferred)
2. Minimize custom CSS file sizes
3. Use system fonts when possible for speed
4. Implement lazy loading for images

Accessibility

1. Ensure sufficient color contrast (4.5:1 minimum)
2. Provide alternative text for all images
3. Use semantic HTML structure
4. Test with keyboard-only navigation

Mobile Experience

1. Design mobile-first for better responsiveness
2. Use appropriate touch targets (44px minimum)
3. Optimize font sizes for mobile reading
4. Test on real devices when possible

What's Next?

Take your customization further:

1. Custom CSS & Themes - Advanced styling techniques
2. Custom Domain Setup - Complete brand integration
3. Managing Feature Requests - Optimize your branded board

Getting Help

• 🎨 Design Support: design@featureshark.com
• 📱 Mobile Optimization: mobile-help@featureshark.com
• 💬 Live Design Chat: Available in your dashboard
• 🎯 Brand Consultation: Schedule 1-on-1 session

---

Setup Time: 30-60 minutes for complete branding Design Skills: Beginner to intermediate Last Updated: September 2025