Brand GuidelinesVersion 1.0

CraftlyAI Brand Guidelines

Last Updated: 2024

Brand Overview

Mission

CraftlyAI empowers independent consultants and freelancers worldwide to streamline their business operations through intelligent automation and strategic management tools.

Brand Personality

Professional: Enterprise-grade reliability
Futuristic: Cutting-edge AI technology
Efficient: Streamlined workflows
Strategic: Business-focused solutions
Premium: High-quality experience

Brand Values

Innovation:Leveraging AI to solve real business challenges
Empowerment:Enabling freelancers to scale their operations
Precision:Attention to detail in every interaction
Trust:Secure, reliable platform for business-critical operations

Logo Usage

Primary Logo

The CraftlyAI logo consists of the wordmark "CraftlyAI" in uppercase, typically paired with a lightning bolt icon representing energy and AI intelligence.

Logo Variations

Horizontal Logo

Use: Primary usage for headers, navigation bars, and horizontal layouts

Clearance: Minimum 20px space

Min Size: 120px width for digital

Stacked Logo

Use: Square spaces, mobile headers, favicons

Clearance: Minimum 15px space

Min Size: 80px width/height

Icon Only

Use: App icons, favicons, social media profile pictures

Clearance: Minimum 10px space

Min Size: 32px × 32px (favicon)

Do

Use on white or light backgrounds with full color logo
Use on dark backgrounds with white/light logo
Maintain proper clearance space
Scale proportionally

Don't

Rotate, skew, or distort the logo
Use colors outside the brand palette
Place on busy backgrounds without proper contrast
Change the font or letter spacing
Add effects (shadows, gradients, outlines) to the logo

Color Palette

Primary Colors

Indigo 600

HEX

RGB

Primary CTAs, active states, brand highlights

Indigo 700

HEX

RGB

Hover states, emphasis, headers

Indigo 500

HEX

RGB

Secondary actions, subtle highlights

Neutral Colors

Dark Mode Canvas

HEX

RGB

Dark theme background

Dark Mode Card

HEX

RGB

Card backgrounds in dark mode

Light Mode Canvas

HEX

RGB

Light theme background

Light Mode Card

HEX

RGB

Card backgrounds in light mode

Semantic Colors

Success

Primary

Light

Dark

Warning

Primary

Light

Dark

Error

Primary

Light

Dark

Info

Primary

Light

Dark

Color Usage Guidelines

Text on backgrounds must meet WCAG AA contrast (4.5:1 for normal text, 3:1 for large text)
Interactive elements must have 3:1 contrast ratio
Use primary indigo for main CTAs and primary actions
Use semantic colors consistently (green = success, red = error)
Test in both light and dark modes

Typography

Primary Typeface

Inter - Modern, clean, professional sans-serif

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

Type Scale

Display

48px - 64px•900 (Black)

Line Height: 1.1 • Letter Spacing: -0.02em

Hero headlines, landing page titles

Sample text: The quick brown fox jumps over the lazy dog

Heading 1

32px - 40px•800 (Extra Bold)

Line Height: 1.2 • Letter Spacing: -0.01em

Page titles, section headers

Sample text: The quick brown fox jumps over the lazy dog

Heading 2

24px - 32px•800 (Extra Bold)

Line Height: 1.3 • Letter Spacing: 0

Subsection headers, card titles

Sample text: The quick brown fox jumps over the lazy dog

Heading 3

20px - 24px•700 (Bold)

Line Height: 1.4 • Letter Spacing: 0

Component titles, form labels

Sample text: The quick brown fox jumps over the lazy dog

Body Large

18px•400 (Regular)

Line Height: 1.6 • Letter Spacing: 0

Lead paragraphs, important content

Sample text: The quick brown fox jumps over the lazy dog

Body Regular

16px•400 (Regular)

Line Height: 1.6 • Letter Spacing: 0

Standard body text, descriptions

Sample text: The quick brown fox jumps over the lazy dog

Body Small

14px•400 (Regular)

Line Height: 1.5 • Letter Spacing: 0

Secondary text, captions

Sample text: The quick brown fox jumps over the lazy dog

Label/Uppercase

10px - 12px•700 - 900 (Bold to Black)

Line Height: 1.4 • Letter Spacing: 0.1em - 0.4em

Labels, badges, navigation items, terminal-style UI elements

Sample text: The quick brown fox jumps over the lazy dog

Typography Guidelines

Use font size and weight to establish clear visual hierarchy
Limit to 2-3 font sizes per section
Minimum 14px for body text (16px recommended)
Line height should be 1.5-1.6 for body text
Limit line length to 65-75 characters for optimal readability

Imagery & Photography

Image Style

Clean and Minimal: Avoid cluttered or busy images
Professional: High-quality, business-focused imagery
Modern: Contemporary, tech-forward aesthetic
Neutral Backgrounds: Allow content to stand out

Illustration Style

Geometric: Clean lines, simple shapes
Monochromatic or Two-Tone: Primarily using brand colors
Technical: Data visualizations, charts, diagrams
Abstract: Represent concepts rather than literal representations

Icon Usage

Library: Lucide React Icons (primary)
Style: Line icons, 1.5-2px stroke width
Size: Consistent sizing (16px, 20px, 24px, 32px)
Color: Use brand colors or inherit from parent element

Voice & Tone

Voice Characteristics

Professional yet Approachable: Enterprise-grade without being intimidating
Confident: Assured in our capabilities and solutions
Efficient: Direct, no-nonsense communication
Strategic: Business-focused language

Key Phrases

Strategic Node:Company/Organization

Registry:User account/profile

Terminal:Application interface

Sync/Synchronize:Save/Update operations

Dispatch:Send/Submit actions

Operative:User/Team member

Do

Use active voice
Be specific and concrete
Use business terminology appropriately
Keep sentences concise
Use bullet points for lists

Don't

Use jargon without explanation
Be overly casual or informal
Use passive voice unnecessarily
Write overly long paragraphs
Use exclamation points excessively

Application Guidelines

UI Component Styling

Buttons

Primary: Indigo 600 background, white text, rounded-xl (12px)
Secondary: Transparent with border, inherit text color
Size: Height 44px (h-11) for primary actions, 40px (h-10) for secondary
Typography: Uppercase, tracking-widest, font-black, 10-11px

Cards

Background: var(--bg-card) in theme
Border: 1px solid var(--border-ui)
Border Radius: rounded-3xl (24px) for main cards, rounded-2xl (16px) for smaller elements
Padding: p-10 (40px) for main cards, p-6 (24px) for compact cards

Input Fields

Height: h-14 (56px) for primary inputs, h-12 (48px) for secondary
Border: 1px solid var(--border-ui)
Border Radius: rounded-2xl (16px)
Background: var(--input-bg) or var(--bg-card-muted)
Focus: Border color changes to var(--accent)

Spacing System

Based on 4px base unit

Common spacing: 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 64px

Logo Assets

Available Logo Files

Primary Logo (SVG)

SVG

horizontal

Primary Logo (PNG)

PNG

horizontal

Icon Only

SVG

icon

File Formats & Use Cases

SVG (Scalable Vector Graphics)

Best for: Web usage, scaling to any size, crisp rendering

Files: craftly_logo.svg, craftly_logo_white.svg, craftly_icon.svg

PNG (Portable Network Graphics)

Best for: Transparent backgrounds, specific sizes, compatibility

Files: craftly_logo_highres.png, craftly_logo_white.png, various icon sizes

ICO (Icon)

Best for: Favicons, browser tabs

File: craftly_favicon.ico

Logo Specifications

Standard Logo Sizes (Web)

Small: 120px × 40px (minimum recommended)
Medium: 180px × 60px (standard)
Large: 240px × 80px (hero sections)

Icon Sizes

Favicon: 32px × 32px
App Icon: 1024px × 1024px
Social Media: 1200px × 1200px (square)
Browser Icon: 192px × 192px, 512px × 512px

Contact & Support

For brand-related questions or requests for additional assets:

Email: branding@craftlyai.app
Documentation: See /docs/BRAND_GUIDELINES.md
Asset Requests: Contact design team

© 2024 CraftlyAI. All rights reserved.

This brand guideline document is proprietary and confidential. Unauthorized use of CraftlyAI branding is prohibited.