brand-guidelines

name	brand-guidelines
description	Applies InfiniteBoard's official brand colors, typography, and design system to any artifact. Use when creating or styling InfiniteBoard-related interfaces, documentation, presentations, or any visual content that should reflect the InfiniteBoard brand identity (tech-modern, dark theme, orange accents).
license	Complete terms in LICENSE.txt

InfiniteBoard Brand Guidelines

Overview

InfiniteBoard's brand identity reflects its core purpose: a powerful, infinite canvas for creative professionals. The visual language combines tech-modern minimalism with creative energy, using a dark foundation with vibrant orange accents.

Brand Essence: Professional. Infinite. Vibrant. Modern.

Keywords: branding, InfiniteBoard, dark theme, tech aesthetic, orange accent, infinite canvas, design system, visual identity

---

Color System

Primary Colors

Dark Foundation:

• #1a1a1a - Primary background (tech-panel)
• #141413 - Deep black for emphasis
• #0a0a0a - True black for overlays

Orange Accent System:

• #FF6B00 - Primary accent (tech-orange) - Main interactive elements
• #d97757 - Warm orange - Hover states, secondary accents
• #ff8533 - Bright orange - Highlights, active states

Neutral Grays

Structured Hierarchy:

• #faf9f5 - Light text on dark backgrounds
• #e5e5e5 - High contrast text
• #9ca3af - Secondary text (gray-400)
• #71717a - Tertiary text (zinc-500)
• #52525b - Subtle text (zinc-600)
• #3f3f46 - Borders (zinc-700)
• #27272a - Subtle borders (zinc-800)
• #18181b - Card backgrounds (zinc-900)

Semantic Colors

Status & Feedback:

• Success: #22c55e (green-500)
• Warning: #eab308 (yellow-500)
• Error: #ef4444 (red-500)
• Info: #3b82f6 (blue-500)

Grid & Canvas

Visual Helpers:

• Grid dots/lines: #444444 at 30% opacity
• Anchor points: #FF6B00 with white stroke
• Selection: #FF6B00 at 20% opacity

---

Typography

Font Stack

Primary Font Family:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;

Monospace (for code/technical):

font-family: 'Courier New', Courier, monospace;

Type Scale

Headings:

• H1: 2rem (32px) - Bold, tech-orange
• H2: 1.5rem (24px) - Semibold
• H3: 1.25rem (20px) - Semibold
• H4: 1rem (16px) - Medium

Body:

• Large: 1rem (16px)
• Base: 0.875rem (14px)
• Small: 0.75rem (12px)
• Tiny: 0.625rem (10px) - Status bar, labels

Font Weights

• Regular: 400
• Medium: 500
• Semibold: 600
• Bold: 700

---

Design Patterns

Glass Morphism (Tech-Modern)

Panel Effects:

background: rgba(26, 26, 26, 0.8);
backdrop-filter: blur(12px);
border: 1px solid rgba(63, 63, 70, 0.5);

Toolbar/StatusBar:

background: rgba(10, 10, 10, 0.9);
backdrop-filter: blur(16px);
border: 1px solid #27272a;

Neon Glow Effects

Orange Glow (Interactive Elements):

box-shadow: 0 0 20px rgba(255, 107, 0, 0.3);

Strong Glow (Active/Selected):

box-shadow: 0 0 30px rgba(255, 107, 0, 0.5),
            0 0 60px rgba(255, 107, 0, 0.2);

Button Styles

Primary (Orange):

background: linear-gradient(135deg, #FF6B00 0%, #d97757 100%);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
transition: all 0.3s ease;
box-shadow: 0 0 20px rgba(255, 107, 0, 0.3);

Secondary (Ghost):

background: transparent;
color: #FF6B00;
border: 1px solid #FF6B00;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
transition: all 0.3s ease;

Icon Buttons:

background: rgba(255, 107, 0, 0.1);
color: #FF6B00;
padding: 0.5rem;
border-radius: 0.375rem;
transition: all 0.2s ease;

Cards & Panels

Standard Panel:

background: #18181b;
border: 1px solid #27272a;
border-radius: 0.75rem;
padding: 1.5rem;

Elevated Panel:

background: rgba(26, 26, 26, 0.95);
border: 1px solid #3f3f46;
border-radius: 0.75rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);

---

Component Styling

Toolbar

Structure:

• Dark background (#0a0a0a at 90% opacity)
• Backdrop blur (16px)
• Bottom border (#27272a)
• Height: 60px
• Padding: 1rem horizontal

Tool Buttons:

• Size: 40x40px
• Border-radius: 0.5rem
• Active state: Orange background (#FF6B00)
• Hover: Orange background at 10% opacity

Status Bar

Layout:

• Fixed bottom
• Dark background with blur
• Text: Small (12px), monospace
• Color: Zinc-400 (#9ca3af)
• Orange highlights for important metrics

Context Menu

Style:

• Dark panel (#18181b)
• Border: Zinc-800
• Border-radius: 0.5rem
• Shadow: Neon orange glow
• Items: Hover with orange accent

Transformer/Selection

Visual Feedback:

• Border: #FF6B00 (2px)
• Handles: Orange circles with white stroke
• Selection box: Orange at 20% opacity

---

Animations & Transitions

Timing Functions

Standard Ease:

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

Bounce (Playful):

transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

Smooth (Elegant):

transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

Common Animations

Fade In:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

Slide Up:

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Glow Pulse:

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 107, 0, 0.3); }
  50% { box-shadow: 0 0 40px rgba(255, 107, 0, 0.6); }
}

---

Iconography

Style Guidelines

• Line weight: 2px for clarity
• Size: 16px, 20px, 24px (consistent sizing)
• Color: Inherit from parent or use zinc-400
• Active state: tech-orange (#FF6B00)

Icon Usage

• Lucide React library for consistency
• Always include alt text/labels
• Use contextual colors (orange for active/selected)

---

Best Practices

Do's ✅

• Use dark backgrounds with orange accents
• Apply glass morphism for panels
• Include subtle neon glows for interactive elements
• Maintain consistent spacing (multiples of 4px)
• Use monospace fonts for technical data
• Provide clear visual feedback for interactions

Don'ts ❌

• Avoid light themes (InfiniteBoard is dark-first)
• Don't use other accent colors (stick to orange)
• Avoid sharp, harsh shadows (use soft glows)
• Don't mix font families unnecessarily
• Avoid cluttered interfaces (embrace whitespace)

---

Technical Implementation

Tailwind Configuration

Key custom values used in InfiniteBoard:

colors: {
  'tech-orange': '#FF6B00',
  'tech-panel': '#1a1a1a',
  'tech-dark': '#0a0a0a',
}

boxShadow: {
  'neon-orange': '0 0 30px rgba(255, 107, 0, 0.5)',
}

backdropBlur: {
  'tech': '12px',
}

CSS Variables

:root {
  --color-primary: #FF6B00;
  --color-bg-dark: #1a1a1a;
  --color-bg-darker: #0a0a0a;
  --color-text-light: #faf9f5;
  --spacing-unit: 4px;
  --border-radius: 0.5rem;
}

---

Examples

Hero Section

• Large H1 in tech-orange
• Subtitle in zinc-400
• CTA button with orange gradient
• Dark background with subtle grain

Feature Card

• Dark panel (#18181b)
• Border zinc-800
• Icon in tech-orange (24px)
• Title semibold
• Description in zinc-400

Interactive Element

• Base state: Ghost style (transparent + orange border)
• Hover: Orange background at 10% opacity + subtle glow
• Active: Full orange background + strong glow
• Transition: 0.3s ease

---

Brand Voice

Tone: Professional yet approachable, creative, empowering

Voice attributes:

• Clear and direct
• Tech-savvy but not jargon-heavy
• Encouraging creativity
• Confident without arrogance

Sample copy:

• "Infinite possibilities, infinite canvas"
• "Create without boundaries"
• "Your ideas, amplified"