TimeTracker/docs/BRAND_GUIDELINES.md

TimeTracker Brand Guidelines

Overview

This document outlines the brand identity, visual guidelines, and usage rules for TimeTracker. Following these guidelines ensures consistent branding across all platforms and touchpoints.

Logo

Primary Logo

The primary TimeTracker logo features a rounded square with a gradient background (blue to cyan), containing a stylized clock with a checkmark.

File: app/static/images/timetracker-logo.svg

Usage:

• Primary branding element
• Headers and navigation
• Application icons
• Marketing materials

Logo Variations

Light Background Variant

File: app/static/images/timetracker-logo-light.svg

• Use on light backgrounds
• Standard web application

Dark Background Variant

File: app/static/images/timetracker-logo-dark.svg

• Use on dark backgrounds
• Dark mode interfaces

Icon-Only Variant

File: app/static/images/timetracker-logo-icon.svg

• Square format
• Favicons and app icons
• Small spaces where full logo doesn't fit

Horizontal Variant

File: app/static/images/timetracker-logo-horizontal.svg

• Logo with text side-by-side
• Wide headers
• Marketing materials

Logo Usage Rules

DO:

• Maintain minimum clear space (equal to 20% of logo height)
• Use appropriate variant for background color
• Scale proportionally
• Use SVG format when possible for scalability

DON'T:

• Stretch or distort the logo
• Rotate the logo
• Change colors (except approved variants)
• Add effects (shadows, outlines) without approval
• Place on busy backgrounds without sufficient contrast
• Use at sizes smaller than 24px height

Minimum Sizes

• Web: 32px height minimum
• Print: 0.5 inches height minimum
• Mobile: 24px height minimum

Color Palette

Primary Colors

Primary Indigo (Brand)

• Hex: #4F46E5
• RGB: 79, 70, 229
• Usage: Primary actions, links, focus rings, highlights
• Notes: Designed to work with slate-based neutrals in light/dark mode

Secondary Cyan (Accent)

• Hex: #50E3C2
• RGB: 80, 227, 194
• Usage: Secondary accents, gradients, non-critical highlights

Info Blue

• Hex: #3b82f6
• RGB: 59, 130, 246
• Usage: Informational states and highlights (not the primary brand color)

Gradient

The brand uses a gradient from Primary Indigo to Secondary Cyan:

• Start: #4F46E5 (Primary Indigo)
• End: #50E3C2 (Secondary Cyan)
• Direction: Diagonal (135deg) or horizontal as needed

Status Colors

Success (Green)

• Hex: #10b981
• Usage: Success messages, positive indicators

Warning (Amber)

• Hex: #f59e0b
• Usage: Warnings, caution messages

Error / Danger (Red)

• Hex: #ef4444
• Usage: Error messages, destructive actions

Background Colors

Light Mode (Slate):

• Background: #f8fafc
• Card: #ffffff
• Border: #e2e8f0

Dark Mode (Slate):

• Background: #0b1220
• Card: #0f172a
• Border: #334155

Text Colors

Light Mode (Slate):

• Primary Text: #0f172a
• Secondary Text: #64748b
• Muted Text: #94a3b8

Dark Mode (Slate):

• Primary Text: #e2e8f0
• Secondary Text: #94a3b8
• Muted Text: #64748b

Typography

Font Families

Primary (Inter):

font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;

Usage:

• Body text
• UI elements
• Headings and navigation

Font Weights

• Regular (400): Body text, descriptions
• Medium (500): Labels, buttons
• Semibold (600): Headings, emphasis
• Bold (700): Primary headings, strong emphasis

Font Sizes

Headings:

• H1: 2.5rem (40px) - Page titles
• H2: 2rem (32px) - Section titles
• H3: 1.5rem (24px) - Subsection titles
• H4: 1.25rem (20px) - Card titles

Body:

• Large: 1.125rem (18px) - Important text
• Base: 1rem (16px) - Standard text
• Small: 0.875rem (14px) - Secondary text
• XS: 0.75rem (12px) - Labels, captions

Spacing

Spacing Scale

Based on 4px base unit:

• 4px (0.25rem) - Tight spacing
• 8px (0.5rem) - Compact spacing
• 16px (1rem) - Standard spacing
• 24px (1.5rem) - Comfortable spacing
• 32px (2rem) - Generous spacing
• 48px (3rem) - Section spacing
• 64px (4rem) - Large section spacing

Border Radius

• Small: 4px (0.25rem) - Buttons, inputs
• Medium: 8px (0.5rem) - Cards, containers
• Large: 12px (0.75rem) - Modals, large cards
• XLarge: 16px (1rem) - Hero sections

Iconography

Icon Library

Font Awesome 6.4.0

• Primary icon library
• Consistent style and sizing
• Extensive icon set

Icon Usage

• Size: 16px for inline, 24px for standalone
• Color: Inherit text color or use brand colors
• Spacing: 8px margin from adjacent text

Imagery

Style Guidelines

• Clean, professional photography
• Minimal, uncluttered compositions
• Consistent lighting and color grading
• Focus on productivity and professionalism

Screenshots

• Use actual application screenshots
• Maintain consistent browser chrome
• Include realistic data
• Highlight key features clearly

Application Icons

Desktop Application

Windows:

• Format: .ico
• Sizes: 16x16, 32x32, 48x48, 256x256
• File: desktop/assets/icon.ico

macOS:

• Format: .icns
• Size: 512x512 (multi-resolution)
• File: desktop/assets/icon.icns

Linux:

• Format: .png
• Size: 512x512
• File: desktop/assets/icon.png

Web Application

Favicon:

• Format: .ico and .svg
• Sizes: 16x16, 32x32, 48x48
• File: app/static/images/favicon.ico

Apple Touch Icon:

• Format: .png
• Size: 180x180
• File: app/static/images/apple-touch-icon.png

Android Chrome Icons:

• Format: .png
• Sizes: 192x192, 512x512
• Files: app/static/images/android-chrome-*.png

Social Media

Open Graph Image

• Size: 1200x630px
• Format: PNG
• File: app/static/images/og-image.png
• Content: Logo, tagline, key visual elements

Twitter Card

• Use large image card format
• Same image as Open Graph
• Include app name and tagline

Voice and Tone

Brand Voice

• Professional: Maintain business-appropriate language
• Clear: Use simple, direct communication
• Helpful: Focus on user benefits
• Confident: Express expertise without arrogance

Writing Style

• Use active voice
• Keep sentences concise
• Avoid jargon when possible
• Use second person ("you") for user-facing text

Platform-Specific Guidelines

Web Application

• Responsive design for all screen sizes
• Dark mode support
• PWA capabilities
• Accessible (WCAG 2.1 AA)

Desktop Application

• Native platform look and feel
• Consistent branding with web app
• Platform-appropriate icons
• Smooth animations and transitions

Do's and Don'ts

DO

✅ Use brand colors consistently ✅ Maintain logo clear space ✅ Use appropriate logo variant for context ✅ Follow spacing guidelines ✅ Test on multiple devices and platforms ✅ Ensure accessibility compliance ✅ Keep designs clean and professional

DON'T

❌ Modify logo colors or design ❌ Use outdated logo versions ❌ Place logo on low-contrast backgrounds ❌ Mix different design systems ❌ Use non-brand colors for primary actions ❌ Compromise accessibility for aesthetics ❌ Use unlicensed fonts or assets

Asset Management

File Organization

• Logos: app/static/images/timetracker-logo-*.svg
• Icons: app/static/images/*.png, desktop/assets/*
• Social: app/static/images/og-image.png
• Screenshots: assets/screenshots/

File Formats

• Vector: SVG for logos and icons
• Raster: PNG for screenshots, social images
• Icons: ICO, ICNS, PNG for platform-specific needs

Version Control

• All brand assets in repository
• Document changes in commit messages
• Maintain asset inventory
• Archive old versions when updating

Updates and Maintenance

Review Schedule

• Quarterly brand audit
• Annual comprehensive review
• Update as needed for new platforms

Change Process

1. Document proposed changes
2. Review with team
3. Update guidelines
4. Update all assets
5. Communicate changes

Contact

For questions about brand usage or to request new assets, please refer to the project documentation or create an issue on GitHub.

---

Last Updated: 2024 Version: 1.0