Application Guidelines & Usage Standards

Layout and Product Design

---

Table of Contents - Part 2

📏 Layout & Spacing

❌ Brand Violations & Don'ts

💻 Digital Applications

🖨️ Print Applications

📱 Product Design Guidelines

---

Layout & Spacing

Grid System Foundation

FeelyFeely uses an 8-point grid system for consistent spacing and alignment across all brand applications. This system ensures visual harmony and makes designs more scalable and maintainable.

Base Unit: 8px

Core Spacing Values:

/* Spacing Scale */
--space-xs: 4px;    /* 0.25rem - Tight spacing */
--space-sm: 8px;    /* 0.5rem - Small spacing */
--space-md: 16px;   /* 1rem - Medium spacing */
--space-lg: 24px;   /* 1.5rem - Large spacing */
--space-xl: 32px;   /* 2rem - Extra large spacing */
--space-2xl: 48px;  /* 3rem - Section spacing */
--space-3xl: 64px;  /* 4rem - Major section spacing */

Layout Measurements

Content Width Standards:

• Maximum content width: 800px (based on existing CSS)
• Content centering: margin: 0 auto
• Mobile padding: 24px horizontal margins minimum
• Desktop padding: 32px horizontal margins recommended

Responsive Breakpoints:

/* Breakpoint System */
--breakpoint-mobile: 480px;
--breakpoint-tablet: 768px;
--breakpoint-desktop: 1024px;
--breakpoint-large: 1440px;

Component Spacing Standards

Button Spacing

.button {
  padding: 12px 24px; /* 1.5x base unit vertical, 3x horizontal */
  margin: 8px 0; /* Vertical spacing from other elements */
  border-radius: 8px; /* Based on 8px grid */
}

.button-large {
  padding: 16px 32px; /* 2x base unit vertical, 4x horizontal */
}

.button-small {
  padding: 8px 16px; /* 1x base unit vertical, 2x horizontal */
}

Card Component Spacing

.card {
  padding: 24px; /* 3x base unit */
  margin-bottom: 24px; /* Consistent card separation */
  border-radius: 8px; /* Aligned to grid */
}

.card-compact {
  padding: 16px; /* 2x base unit for tighter layouts */
}

.card-spacious {
  padding: 32px; /* 4x base unit for premium feeling */
}

Section Spacing

.section {
  margin-bottom: 48px; /* 6x base unit - standard section gap */
  padding: 32px 0; /* 4x base unit vertical padding */
}

.section-major {
  margin-bottom: 64px; /* 8x base unit - major section separation */
}

.section-minor {
  margin-bottom: 32px; /* 4x base unit - smaller section gaps */
}

Layout Principles

Alignment Rules

1. Left-align body text for optimal readability
2. Center-align headlines sparingly, only for impact
3. Align content to grid for visual consistency
4. Use consistent alignment throughout single layouts

White Space Usage

• Embrace white space as a design element
• Use spacing hierarchy to show content relationships
• Maintain breathing room around all elements
• Scale spacing proportionally across different screen sizes

Visual Hierarchy Through Spacing

/* Hierarchy Example */
.hero-section {
  padding: 64px 32px; /* Major section spacing */
}

.hero-title {
  margin-bottom: 24px; /* Large spacing after main headline */
}

.hero-subtitle {
  margin-bottom: 32px; /* Extra spacing before CTA */
}

.hero-cta {
  margin-top: 16px; /* Medium spacing for button */
}

---

Brand Violations & Don'ts

Logo Misuse Examples

❌ Modification Violations

Never Modify the Logo:

• Don't stretch or distort proportions
• Don't separate elements (symbol from text)
• Don't add effects (shadows, outlines, glows)
• Don't rotate or skew beyond appropriate orientations
• Don't reconstruct or redraw any part

Don't Change Colors:

• No custom colors outside approved palette
• No gradients on text portions
• No transparency effects below 100% opacity
• No color inversions except approved white version

❌ Placement Violations

Clear Space Violations:

• Don't crowd with other elements
• Don't place on busy patterns or images
• Don't reduce below minimum sizes
• Don't overlap with other content

Background Violations:

• Don't use on low-contrast backgrounds
• Don't place on conflicting colors
• Don't use wrong version for background color
• Don't place over complex imagery without proper contrast

Color Usage Violations

❌ Color Application Mistakes

Brand Color Overuse:

• Don't make everything blue/purple - use strategically
• Don't ignore white space importance
• Don't use brand colors for large background areas
• Don't combine with non-brand colors without approval

Accessibility Violations:

• Don't ignore contrast requirements (minimum 4.5:1 for text)
• Don't rely on color alone to convey information
• Don't use color combinations not tested for colorblindness
• Don't sacrifice readability for aesthetic preferences

❌ Typography Violations

Font Usage Don'ts:

• Don't use fonts other than Inter without approval
• Don't use too many weights (maximum 3 per design)
• Don't ignore line height recommendations
• Don't use decorative fonts for body text

Text Layout Don'ts:

• Don't center large text blocks (hard to read)
• Don't use all caps for body text
• Don't use small text below 14px on digital
• Don't ignore responsive scaling for mobile

Content Guidelines Violations

❌ Voice and Tone Mistakes

Language Don'ts:

• Don't use overly technical jargon without explanation
• Don't be overly casual in professional contexts
• Don't use exclusionary language
• Don't make assumptions about user capabilities

Communication Violations:

• Don't overwhelm with information
• Don't hide important information in fine print
• Don't use misleading headlines or claims
• Don't forget to include accessibility considerations

---

Digital Applications

Website Design Guidelines

Header and Navigation

/* Header Specifications */
.site-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  padding: 16px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.logo-container {
  height: 48px; /* Consistent header height */
}

.nav-links {
  font-size: 16px;
  font-weight: 500;
  color: #474747;
  text-decoration: none;
}

.nav-links:hover {
  color: #0136BC;
}

Button Styles for Web

/* Primary Button */
.btn-primary {
  background: linear-gradient(90deg, #0136BC 0%, #5B1BC3 84%);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
}

/* Secondary Button */
.btn-secondary {
  background: transparent;
  color: #0136BC;
  border: 2px solid #0136BC;
  border-radius: 8px;
  padding: 10px 22px; /* Adjusted for border */
  font-weight: 500;
  font-size: 14px;
}

Form Design Standards

/* Form Inputs */
.form-input {
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  color: #474747;
  background: #FFFFFF;
}

.form-input:focus {
  outline: none;
  border-color: #0136BC;
  box-shadow: 0 0 0 3px rgba(1, 54, 188, 0.1);
}

.form-label {
  font-weight: 500;
  font-size: 14px;
  color: #474747;
  margin-bottom: 8px;
  display: block;
}

Mobile Application Guidelines

App Icon Requirements

• Use logo mark only (FeelyfeelyLogo-05.svg gradient version)
• Minimum size: 1024x1024px for app stores
• Background: White or transparent
• Safe area: Ensure logo mark doesn't touch edges
• Platform adaptation: Follow iOS and Android guidelines

Mobile UI Components

/* Mobile-First Button Design */
.mobile-btn {
  min-height: 48px; /* Accessibility requirement */
  width: 100%;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

/* Mobile Navigation */
.mobile-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #FFFFFF;
  border-top: 1px solid #E5E5E5;
  padding: 12px 0;
}

Email Template Guidelines

Email Header Design

• Logo placement: Top left, maximum 200px width
• Background: Always white (#FFFFFF)
• Spacing: 24px minimum around logo
• Mobile responsive: Logo scales down to 150px minimum

Email Typography

/* Email-Safe Typography */
.email-heading {
  font-family: "Inter", Arial, sans-serif;
  font-size: 28px;
  line-height: 1.3;
  color: #474747;
  margin: 32px 0 16px 0;
}

.email-body {
  font-family: "Inter", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #474747;
}

Social Media Guidelines

Profile Images

• Use logo mark (FeelyfeelyLogo-05.svg) for profile pictures
• Square format: 1:1 aspect ratio required
• Minimum size: 400x400px
• Background: White with adequate padding

Cover Images and Headers

• Use horizontal logo with generous white space
• Platform-specific sizes: Optimize for each platform
• Consistent branding: Maintain visual hierarchy
• Contact information: Include when space allows

---

Print Applications

Business Card Design

Standard Business Card (3.5" x 2")

FRONT:
- Logo: Maximum 1.5" width, positioned top left
- Clear space: 0.25" minimum on all sides
- Typography: 10pt minimum for contact information
- Color: Full brand colors acceptable

BACK:
- Solid brand color background allowed
- White logo version required on colored background
- Text: White on brand color background

Sizing Specifications

• Logo minimum: 1" width
• Text minimum: 8pt for legibility
• Margins: 0.25" minimum on all sides
• Bleed area: 0.125" beyond final trim

Letterhead and Stationery

Letterhead Design (8.5" x 11")

• Logo placement: Top left corner
• Logo size: 2" to 3" width maximum
• Margin space: 1" top margin minimum
• Contact info: Bottom of page, subtle treatment

Envelope Design Standards

• #10 Envelope (4.125" x 9.5"): Logo maximum 1.5" width
• Return address: Upper left corner, 9pt minimum
• Positioning: 0.5" from edges minimum

Marketing Collateral

Brochure and Flyer Guidelines

• Cover logo: Up to 4" width for major pieces
• Internal pages: 1" to 2" width maximum
• Font sizes: 12pt minimum for body text
• Image quality: 300 DPI minimum for print

Banner and Signage

• Large format: Logo can scale up to 10" width
• Viewing distance: Consider optimal size for distance
• Material consideration: Ensure colors translate well
• Installation: Account for mounting and environmental factors

Print Color Specifications

CMYK Color Values

Brand Blue: C100 M71 Y0 K26
Brand Purple: C53 M86 Y0 K24
Brand Gray: C0 M0 Y0 K72

Print Production Notes

• File format: Vector files (PDF, AI, EPS) preferred
• Color mode: CMYK for offset printing
• Resolution: 300 DPI minimum for raster elements
• Bleed: 0.125" bleed area for full-color backgrounds
• Spot colors: Use Pantone equivalents when needed

---

Product Design Guidelines

User Interface Standards

Component Library Approach

• Consistent spacing: Follow 8-point grid system
• Unified styling: Use brand colors strategically
• Accessibility first: Meet WCAG AA standards minimum
• Responsive design: Mobile-first approach

Button Component System

/* Component Variants */
.btn-xs { padding: 6px 12px; font-size: 12px; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.btn-md { padding: 12px 24px; font-size: 14px; } /* Default */
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-xl { padding: 20px 40px; font-size: 18px; }

Form Design Patterns

• Input groups: Consistent styling and spacing
• Error states: Clear visual feedback with appropriate colors
• Success states: Confirm actions without overwhelming
• Loading states: Provide immediate feedback for actions

Marketplace-Specific Guidelines

Product Card Design

/* Product Card Component */
.product-card {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
  transition: box-shadow 0.2s ease;
}

.product-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 12px;
}

.product-title {
  font-weight: 600;
  font-size: 16px;
  color: #474747;
  margin-bottom: 8px;
}

.product-price {
  font-weight: 700;
  font-size: 18px;
  color: #0136BC;
}

Navigation Design Standards

• Primary navigation: Always visible, consistent positioning
• Secondary navigation: Contextual, clearly labeled
• Breadcrumbs: Use for deep category structures
• Search functionality: Prominent placement, autocomplete support

Shopping Cart and Checkout

/* Cart Badge */
.cart-badge {
  background: #0136BC;
  color: #FFFFFF;
  border-radius: 50%;
  min-width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Checkout Progress */
.checkout-step {
  display: flex;
  align-items: center;
  padding: 16px 0;
}

.checkout-step.active {
  color: #0136BC;
}

.checkout-step.completed {
  color: #10B981; /* Success green */
}

Dashboard and Admin Interfaces

Data Visualization

• Charts and graphs: Use brand blue as primary data color
• Secondary data: Use brand purple for comparisons
• Neutral data: Use grays for less critical information
• Status indicators: Green for positive, red for negative, yellow for warnings

Table Design

/* Data Table Styling */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
}

.data-table th {
  background: #F9FAFB;
  font-weight: 600;
  font-size: 14px;
  color: #374151;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #E5E5E5;
}

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #F3F4F6;
  color: #474747;
}

.data-table tr:hover {
  background: #F9FAFB;
}

Accessibility Considerations

Color Accessibility

• Never rely on color alone to convey information
• Provide text labels for all interactive elements
• Test with colorblind simulators regularly
• Maintain minimum contrast ratios (4.5:1 for normal text, 3:1 for large text)

Interactive Element Guidelines

/* Focus States */
.interactive-element:focus {
  outline: 2px solid #0136BC;
  outline-offset: 2px;
}

/* Skip Links */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #0136BC;
  color: #FFFFFF;
  padding: 8px;
  text-decoration: none;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}

Mobile Accessibility

• Touch targets: Minimum 44x44px for all interactive elements
• Font sizing: Minimum 16px to prevent zoom on iOS
• Gesture alternatives: Provide button alternatives for swipe actions
• Screen reader support: Proper ARIA labels and semantic HTML

---

Platform-Specific Applications

iOS Design Guidelines

Brand Integration with iOS

• Follow Human Interface Guidelines while maintaining brand identity
• Use SF Pro Display as secondary font when Inter isn't available
• Adapt brand colors to iOS dark mode requirements
• Maintain brand recognition within iOS design patterns

/* iOS Dark Mode Adaptations */
@media (prefers-color-scheme: dark) {
  .brand-background { background: #1C1C1E; }
  .brand-text { color: #FFFFFF; }
  .brand-secondary-text { color: #8E8E93; }
}

Android Design Guidelines

Material Design Integration

• Follow Material Design principles while preserving brand elements
• Use Roboto as fallback when Inter isn't available
• Adapt elevation and shadows to Material Design specifications
• Maintain brand color hierarchy within Material Design framework

Web Browser Considerations

Cross-Browser Compatibility

• Test in all major browsers: Chrome, Firefox, Safari, Edge
• Provide font fallbacks: Ensure Inter loads properly or falls back gracefully
• Optimize SVG logos: Ensure crisp rendering across all browsers
• Test responsive behavior: Verify layouts work across different screen sizes

Performance Optimization

/* Font Loading Optimization */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap; /* Prevents invisible text during font load */
  src: url('Inter-Regular.woff2') format('woff2');
}

---

Quality Assurance Guidelines

Design Review Checklist

Brand Compliance

• Logo used from official asset library
• Correct color values implemented
• Typography follows established hierarchy
• Spacing adheres to 8-point grid system
• Clear space requirements met around logo

Accessibility Verification

• Color contrast ratios meet WCAG AA standards
• Focus states visible and logical
• Alternative text provided for images
• Keyboard navigation functional
• Screen reader compatibility verified

Technical Implementation

• Responsive design tested across devices
• Cross-browser compatibility verified
• Loading performance optimized
• SVG logos render correctly
• Font loading optimized with fallbacks

Approval Process

Internal Review

1. Designer self-review using brand checklist
2. Peer review by another team member
3. Brand team approval for external-facing materials
4. Stakeholder sign-off for major campaigns or launches

External Vendor Guidelines

• Provide complete brand guidelines to all external vendors
• Require mockups for approval before final production
• Conduct final review of all delivered materials
• Document any approved variations for future reference

---

Implementation Support

Code Examples and Resources

CSS Variables Implementation

/* Complete Brand System Variables */
:root {
  /* Colors */
  --brand-blue: #0136BC;
  --brand-purple: #5B1BC3;
  --brand-gray: #474747;
  --brand-black: #000000;
  --brand-white: #FFFFFF;
  
  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  
  /* Typography */
  --font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 3rem;
  
  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

Utility Classes

/* Spacing Utilities */
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.m-xl { margin: var(--space-xl); }

.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* Text Utilities */
.text-brand-blue { color: var(--brand-blue); }
.text-brand-purple { color: var(--brand-purple); }
.text-brand-gray { color: var(--brand-gray); }

/* Background Utilities */
.bg-brand-blue { background-color: var(--brand-blue); }
.bg-brand-purple { background-color: var(--brand-purple); }
.bg-white { background-color: var(--brand-white); }

Training and Resources

Team Training Materials

• Brand guidelines presentation for new team members
• Design system documentation with interactive examples
• Regular brand training sessions for consistent implementation
• Vendor onboarding materials for external partners

Reference Materials

• Digital asset library with all logo files and resources
• Code snippets for common implementation patterns
• Template collection for frequently used layouts
• Best practices guides for specific platforms and applications

---

Next: Part 3 - Asset Library & Resources

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