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

Top Left (default): Traditional navigation placement
Top Center: Prominent brand focus
Top Right: Unique positioning for some brands
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

Limit font families to 2 maximum (heading + body)
Ensure readability at all sizes and devices
Consider loading performance - fewer fonts load faster
Test across browsers and devices
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>© 2026 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

Navigate to Settings > Branding
Upload your company logo
Set primary brand color
Choose secondary accent color
Preview changes in real-time

Step 2: Typography Configuration

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

Step 3: Layout Customization

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

Step 4: Advanced Styling

Upload custom CSS if needed
Configure email template branding
Set up dark mode color scheme
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

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

Performance Optimization

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

Accessibility

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

Mobile Experience

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

What's Next?

Take your customization further:

Custom CSS & Themes - Advanced styling techniques
Custom Domain Setup - Complete brand integration
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

Branding & Styling