Skip to main content

Brand Foundation & Identity System

Core visual identity elements​

Table of Contents​

📖 Introduction​

🎨 Logo Guidelines​

🌈 Color Palette​

✍️ Typography​

Introduction​

Welcome to Part 1 of the FeelyFeely brand guidelines. This section establishes the core visual identity elements that form the foundation of our brand - logo, colors, and typography. These elements must be consistently applied across all brand touchpoints to maintain recognition and trust.

Brand Overview​

FeelyFeely is a modern marketplace brand that emphasizes emotional connection and tactile experiences. Our visual identity reflects these values through:

  • Approachable design that feels human and warm
  • Contemporary aesthetics that appeal to modern consumers
  • Consistent execution that builds brand recognition
  • Flexible applications for digital and physical environments

Brand Personality​

Emotional: We connect with feelings and experiences Modern: Contemporary design with clean lines Trustworthy: Professional execution builds confidence Accessible: Clear, inclusive communication

How to Use This Guide​

This three-part guide system:

  • Part 1: Brand Foundation (Logo, Colors, Typography)
  • Part 2: Application Guidelines (Layouts, Spacing, Usage)
  • Part 3: Asset Library (Downloads, Templates, Resources)

Logo Guidelines​

Logo System Overview​

The FeelyFeely logo system consists of a distinctive symbol with custom typography. The logo mark features a stylized "F" that conveys both feeling and forward movement, representing our brand's focus on emotional marketplace experiences.

Primary Logo Variations​

Filename: FeelyfeelyLogo-01.svg Best for: Headers, business cards, wide format applications

  • Full color version with gradient brand mark
  • Gray typography (#474747) for professional balance
  • Minimum width: 120px digital / 1 inch print

Filename: FeelyfeelyLogo-02.svg (outlined) / FeelyfeelyLogo-03.svg (solid)

  • Outlined version: Clean line art for light backgrounds
  • Solid version: Bold presence when needed
  • Use when: Brand colors unavailable or high contrast needed

Filename: FeelyfeelyLogo-04.svg

  • White version for dark backgrounds only
  • Maintains brand mark and typography hierarchy
  • Reversed color scheme for maximum contrast

Vertical Logo Variations​

Filename: FeelyfeelyLogo-09.svg

  • Stacked layout for narrow vertical spaces
  • Same color treatment as horizontal version
  • Minimum height: 80px digital / 0.75 inch print

2. Vertical Black/White Versions​

Filenames: FeelyfeelyLogo-10.svg, FeelyfeelyLogo-11.svg, FeelyfeelyLogo-12.svg

  • Consistent color options matching horizontal versions
  • Proportional scaling maintains legibility

Logo Mark (Icon Only)​

Standalone Brand Symbol​

Filenames: FeelyfeelyLogo-05.svg through FeelyfeelyLogo-08.svg

Color Variations:

  • Gradient version (-05.svg): Primary brand colors
  • Black outlined (-06.svg): Light backgrounds
  • Black solid (-07.svg): Strong contrast needed
  • White version (-08.svg): Dark backgrounds only

Usage Guidelines:

  • Minimum size: 32px digital / 0.5 inch print
  • Use only when brand recognition is established
  • Perfect for: App icons, favicons, social media avatars
  • Avoid using as primary logo in marketing materials

Logo Usage Rules​

✅ DO:

  • Use only official logo files from brand asset library
  • Maintain proper clear space around all logo applications
  • Scale proportionally - never stretch or distort
  • Choose appropriate version for background contrast
  • Use consistent logo version throughout single applications

❌ DON'T:

  • Recreate, redraw, or modify any part of the logo
  • Change colors outside approved brand palette
  • Add effects, shadows, outlines, or gradients to logo files
  • Rotate, skew, or transform logo beyond proportional scaling
  • Use logo as dominant visual element overwhelming content
  • Place logo on busy or low-contrast backgrounds

Clear Space Requirements​

Clear space calculation: Use the height of lowercase "f" in FeelyFeely text as the minimum clear space around entire logo.

        [clear space]
[clear space] LOGO [clear space]
        [clear space]

Application:

  • Digital: Minimum 20px clear space on all sides
  • Print: Minimum 0.25" clear space on all sides
  • Never compromise on clear space requirements

Sizing Standards​

Digital Applications​

  • Primary placement: 200px+ width recommended
  • Secondary placement: 120px minimum width
  • Icon usage: 32px minimum for logo mark only
  • High DPI displays: Use SVG format when possible
  • Large format: 2"+ width for primary usage
  • Standard size: 1" minimum width
  • Small applications: 0.75" minimum (short text acceptable)
  • Business cards: 0.5" minimum with logo mark only

Color Palette​

Primary Brand Colors​

Brand Blue - Primary Action Color​

/* Primary Blue */
--brand-blue: #0136BC;
  • Hex: #0136BC
  • RGB: rgb(1, 54, 188)
  • CMYK: C100 M71 Y0 K26
  • HSL: hsl(223, 99%, 37%)

Usage Guidelines:

  • Primary buttons and call-to-action elements
  • Interactive links and navigation
  • Key brand moments and emphasis
  • Progress indicators and active states

Brand Purple - Secondary Accent Color​

/* Secondary Purple */
--brand-purple: #5B1BC3;
  • Hex: #5B1BC3
  • RGB: rgb(91, 27, 195)
  • CMYK: C53 M86 Y0 K24
  • HSL: hsl(260, 76%, 44%)

Usage Guidelines:

  • Secondary buttons and actions
  • Accent elements and highlights
  • Gradient partner with brand blue
  • Decorative elements and icons

Brand Gradient - Logo Mark Treatment​

/* Primary Gradient */
background: linear-gradient(90deg, #0136BC 0%, #5B1BC3 84%);

Direction: Left to right (0° to 84% stop) Usage: Logo mark, hero sections, premium features

Neutral Colors​

Primary Gray - Professional Text​

/* Primary Gray */
--brand-gray: #474747;
  • Hex: #474747
  • RGB: rgb(71, 71, 71)
  • Usage: Body text, headings, secondary information

Pure Black - High Contrast​

/* Pure Black */
--brand-black: #000000;
  • Hex: #000000
  • RGB: rgb(0, 0, 0)
  • Usage: Strong emphasis, dark backgrounds, high contrast text

Pure White - Clean Foundation​

/* Pure White */
--brand-white: #FFFFFF;
  • Hex: #FFFFFF
  • RGB: rgb(255, 255, 255)
  • Usage: Primary backgrounds, negative space, reversed text

Color Application Guidelines​

Primary Brand Color Usage​

  • Brand Blue: Use for primary actions (buttons, links, CTAs)
  • Brand Purple: Use for secondary actions and accents
  • Gradient: Reserve for logo mark and premium brand moments
  • Limit usage: Don't overwhelm with brand colors

Text Color Hierarchy​

/* Text Color System */
.text-primary { color: #474747; }     /* Main body text */
.text-emphasis { color: #000000; }    /* Headlines, strong emphasis */
.text-secondary { color: #474747; }   /* Supporting text */
.text-inverse { color: #FFFFFF; }     /* Text on dark backgrounds */
.text-link { color: #0136BC; }        /* Interactive links */
.text-accent { color: #5B1BC3; }      /* Accent text, highlights */

Background Usage​

  • Primary background: Always white (#FFFFFF)
  • Secondary background: Black (#000000) for dramatic sections
  • Never use brand colors as large background areas
  • Maintain contrast ratios for accessibility

Accessibility & Contrast Standards​

All color combinations meet WCAG 2.1 AA accessibility standards:

AAA Compliant Combinations:

  • White text on Brand Blue (21:1 ratio)
  • White text on Brand Purple (21:1 ratio)
  • Black text on White (21:1 ratio)

AA Compliant Combinations:

  • Brand Gray on White (9.5:1 ratio)
  • Brand Blue links on White (7.2:1 ratio)

Testing Requirements:

  • Always verify contrast ratios during design
  • Test with colorblind simulation tools
  • Provide alternative visual indicators beyond color alone

Typography​

Primary Typeface: Inter​

Font Family: Inter Source: Google Fonts (open source) Fallback: Arial, Helvetica, sans-serif

/* Primary Font Declaration */
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

Why Inter?​

Selected for FeelyFeely because:

  • Exceptional legibility across all sizes and screens
  • Modern, clean appearance aligns with brand personality
  • Comprehensive weight range (100-900) provides flexibility
  • Optimized for digital with excellent screen rendering
  • Open source availability ensures consistent implementation
  • International character support for global marketplace

Typography Scale & Hierarchy​

Display & Heading Styles​

/* H1 - Primary Headlines */
.heading-1 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 3rem; /* 48px */
  line-height: 1.2;
  color: #474747;
  letter-spacing: -0.02em;
}

/* H2 - Section Headlines */
.heading-2 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 2rem; /* 32px */
  line-height: 1.3;
  color: #474747;
  letter-spacing: -0.01em;
}

/* H3 - Subsection Headlines */
.heading-3 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 1.5rem; /* 24px */
  line-height: 1.4;
  color: #474747;
}

Body Text Styles​

/* Body Large - Lead paragraphs */
.body-large {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.7;
  color: #474747;
}

/* Body Regular - Standard text */
.body-regular {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1.6;
  color: #474747;
}

/* Body Small - Supporting text */
.body-small {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
  color: #474747;
}

Functional Text Styles​

/* Button Text */
.button-text {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.9rem; /* 14px */
  line-height: 1;
  letter-spacing: 0.01em;
}

/* Caption Text */
.caption {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 0.75rem; /* 12px */
  line-height: 1.4;
  color: #474747;
}

/* Label Text */
.label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 0.875rem; /* 14px */
  line-height: 1.2;
  color: #474747;
}

Font Weight Guidelines​

Available Weights:

  • 100-200: Thin/ExtraLight (avoid in most applications)
  • 300: Light (use sparingly for large text only)
  • 400: Regular (primary body text weight)
  • 500: Medium (buttons, labels, emphasis)
  • 600: SemiBold (headings, subheadings)
  • 700: Bold (major headlines only)
  • 800-900: ExtraBold/Black (avoid in brand applications)

Best Practices:

  • Limit to 3 weights maximum per design
  • Regular (400) for all body text
  • Medium (500) for interactive elements
  • SemiBold (600) for headings and important information

Typography Usage Guidelines​

Hierarchy Best Practices​

  • Create clear visual hierarchy using size, weight, and spacing
  • Maintain consistent line heights for readable text blocks
  • Use adequate contrast ratios for all text elements
  • Optimize for screen reading with appropriate font sizes

Responsive Typography​

/* Mobile Responsive Adjustments */
@media (max-width: 768px) {
  .heading-1 { font-size: 2.25rem; } /* 36px */
  .heading-2 { font-size: 1.75rem; } /* 28px */
  .heading-3 { font-size: 1.25rem; } /* 20px */
}

Performance Considerations​

  • Load only necessary weights to optimize performance
  • Use font-display: swap to prevent invisible text
  • Preload critical font files for faster rendering
  • Provide fallback fonts for loading states

Implementation Notes​

CSS Custom Properties​

:root {
  /* Brand Colors */
  --brand-blue: #0136BC;
  --brand-purple: #5B1BC3;
  --brand-gray: #474747;
  --brand-black: #000000;
  --brand-white: #FFFFFF;
  
  /* Typography */
  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-h1: 3rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
}

Asset Integration​

  • Use SVG logos for scalability and crisp rendering
  • Implement Inter font via Google Fonts or local hosting
  • Test across devices to ensure consistent rendering
  • Validate accessibility with automated and manual testing

Next: Part 2 - Application Guidelines

© 2025 FeelyFeely. All brand assets and guidelines are proprietary and protected.