Aura Platform Brand Guidelines

🎨 Brand Overview

Aura is a cutting-edge platform for autonomous economic negotiations between AI agents and service providers. Our brand identity reflects the fusion of advanced technology, trust, and innovation in the AI-driven economy.

Brand Personality

• Innovative: Cutting-edge AI and blockchain technology

• Trustworthy: Secure, reliable, and transparent negotiations

• Professional: Enterprise-grade platform for business transactions

• Futuristic: Cyberpunk-inspired aesthetic with a modern twist

• Approachable: User-friendly despite complex underlying technology

🔤 Brand Name & Logo

Name Usage

• Full Name: Aura Platform

• Short Form: Aura (preferred for most contexts)

• Tagline: "Autonomous Economic Negotiations for the AI Era"

Logo Guidelines

• Primary Logo: "Aura" wordmark with cyberpunk-inspired gradient

• Icon: Abstract wave/neural network pattern representing AI negotiations

• Clear Space: Maintain minimum clear space equal to the height of the logo

• Minimum Size: 24px height for digital, 0.5" for print

• Color Variations:

  • Primary: Gradient (cyberpunk-blue to cyberpunk-purple)

  • Monochrome: White or black for constrained contexts

  • Dark Mode: Cyberpunk-blue (#00f2ff) on dark backgrounds

🎨 Color Palette

Primary Colors

Our cyberpunk-inspired color palette balances futuristic energy with professional trustworthiness.

Color Name	Hex Code	RGB	Usage
Cyberpunk Blue	#00f2ff	0, 242, 255	Primary brand color, CTAs, highlights
Cyberpunk Purple	#a855f7	168, 85, 247	Secondary actions, accents
Cyberpunk Pink	#ec4899	236, 72, 153	Alerts, notifications, emphasis

Neutral Colors

Color Name	Hex Code	RGB	Usage
Dark Background	#0a0a0a	10, 10, 10	Primary background
Card Background	#1a1a1a	26, 26, 26	Surface backgrounds
Gray 800	#1f1f1f	31, 31, 31	Secondary surfaces
Gray 700	#373737	55, 55, 55	Borders, dividers
Gray 600	#4b4b4b	75, 75, 75	Hover states
Gray 500	#6b6b6b	107, 107, 107	Disabled states
Gray 400	#9ca3af	156, 163, 175	Secondary text
Gray 300	#d1d5db	209, 213, 219	Tertiary text
White	#ffffff	255, 255, 255	Primary text on dark backgrounds

Semantic Colors

Color Name	Hex Code	RGB	Usage
Success	#10b981	16, 185, 129	Success states, confirmations
Warning	#f59e0b	245, 158, 11	Warning states, alerts
Error	#ef4444	239, 68, 68	Error states, critical alerts
Info	#3b82f6	59, 130, 246	Informational messages

Color Usage Guidelines

• Primary CTA Buttons: Use cyberpunk-blue (#00f2ff)

• Secondary Buttons: Use cyberpunk-purple (#a855f7)

• Accent Elements: Use cyberpunk-pink (#ec4899) sparingly

• Backgrounds: Use dark-bg (#0a0a0a) for primary, card-bg (#1a1a1a) for surfaces

• Text: White (#ffffff) for primary text, gray-400 (#9ca3af) for secondary

• Borders: gray-700 (#373737) for standard, cyberpunk-blue for active states

📐 Typography

Font Family

• Primary: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif

• Fallback: System sans-serif stack for maximum compatibility

• Monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace

Font Weights

Weight	Usage
300 (Light)	Large headings, decorative text
400 (Regular)	Body text, default weight
500 (Medium)	Subheadings, emphasis
600 (SemiBold)	Section titles, important UI elements
700 (Bold)	Primary headings, CTAs
800 (ExtraBold)	Hero text, special emphasis

Font Sizes (rem scale)

Size	rem	px	Usage
Display	3.75rem	60px	Hero headings
H1	3rem	48px	Main page titles
H2	2.25rem	36px	Section headings
H3	1.875rem	30px	Subsection headings
H4	1.5rem	24px	Card titles
Body Large	1.125rem	18px	Primary body text
Body	1rem	16px	Standard body text
Body Small	0.875rem	14px	Secondary text
Caption	0.75rem	12px	Labels, captions

Line Heights

• Headings: 1.1 - 1.2 (tight for impact)

• Body Text: 1.5 - 1.6 (comfortable readability)

• UI Elements: 1.4 (balanced for compact spaces)

📏 Spacing & Layout

Spacing Scale (rem-based)

0 = 0rem      // 0px
1 = 0.25rem   // 4px
2 = 0.5rem    // 8px
3 = 0.75rem   // 12px
4 = 1rem      // 16px
5 = 1.25rem   // 20px
6 = 1.5rem    // 24px
8 = 2rem      // 32px
10 = 2.5rem   // 40px
12 = 3rem      // 48px
16 = 4rem      // 64px
20 = 5rem      // 80px
24 = 6rem      // 96px

Container & Layout Guidelines

• Max Width: 72rem (1152px) for main content containers

• Gutters: 1rem (16px) on mobile, 1.5rem (24px) on desktop

• Grid System: 12-column responsive grid

• Breakpoints:

  • sm: 640px

  • md: 768px

  • lg: 1024px

  • xl: 1280px

  • 2xl: 1536px

🎯 UI Components Guidelines

Buttons

• Primary: cyberpunk-blue background, white text, rounded-md

• Secondary: cyberpunk-purple border, white text, rounded-md

• Destructive: error color background, white text

• Size: h-10 px-4 for standard, h-8 px-3 for small

• Typography: SemiBold (600) weight, 0.875rem (14px) size

Cards

• Background: card-bg (#1a1a1a)

• Border: 1px solid gray-700 (#373737)

• Border Radius: 0.5rem (8px)

• Padding: 1.5rem (24px) for content, 1rem (16px) for headers

• Shadow: None (flat design for cyberpunk aesthetic)

Inputs

• Background: gray-800 (#1f1f1f)

• Border: 1px solid gray-600 (#4b4b4b)

• Focus State: cyberpunk-blue border

• Placeholder: gray-400 (#9ca3af)

• Text: white

Badges

• Default: cyberpunk-blue background, white text

• Secondary: gray-700 background, white text

• Success: success color background, white text

• Warning: warning color background, dark text

• Error: error color background, white text

🌙 Dark Mode

Aura uses a dark-first design approach:

Dark Mode Specifications

• Primary Background: dark-bg (#0a0a0a)

• Surface Background: card-bg (#1a1a1a)

• Text Primary: white (#ffffff)

• Text Secondary: gray-400 (#9ca3af)

• Text Disabled: gray-500 (#6b6b6b)

• Borders: gray-700 (#373737)

• Hover States: Lighten by 10-15% using opacity

Light Mode (Optional)

While Aura primarily uses dark mode, light mode should follow:

• Primary Background: white (#ffffff)

• Surface Background: #f8fafc

• Text Primary: gray-900 (#111827)

• Text Secondary: gray-600 (#4b5563)

• Borders: gray-200 (#e5e7eb)

📱 Responsive Design

Mobile-First Approach

• Design for mobile breakpoints first, then scale up

• Ensure touch targets are at least 48x48px

• Use responsive typography with rem units

• Test all interactions on mobile devices

Breakpoint-Specific Adjustments

• Mobile (<768px): Single column layouts, larger touch targets

• Tablet (768-1024px): Two-column layouts, optimized for touch

• Desktop (>1024px): Multi-column layouts, hover states, keyboard navigation

💡 Iconography

Icon Style

• Primary: Lucide icons (open-source, consistent style)

• Size: 16px for standard, 20px for emphasis, 24px for large

• Color: Inherit text color by default, cyberpunk colors for emphasis

• Spacing: 4px gap between icon and text

Common Icons

• Search: Magnifying glass

• Wallet: Wallet/credit card

• Message: Speech bubble

• Success: Check circle

• Error: X circle

• Warning: Alert triangle

📸 Imagery & Illustrations

Style Guidelines

• Photography: Futuristic, tech-oriented, cyberpunk aesthetic

• Illustrations: Abstract neural networks, data flows, AI concepts

• Color Treatment: Apply cyberpunk color overlay/gradient

• Aspect Ratios: 16:9 for hero images, 1:1 for thumbnails

Image Usage

• Hero Images: High-quality, futuristic cityscapes or AI visualizations

• Product Images: Clean, professional product photography

• Icons: Consistent with Lucide style

• Backgrounds: Subtle gradients or patterns that don't distract

📝 Content & Tone

Writing Style

• Tone: Professional yet approachable, technical but not jargon-heavy

• Voice: Confident, knowledgeable, helpful

• Grammar: Use active voice, present tense where appropriate

• Capitalization: Sentence case for headings, title case for major sections

Content Guidelines

• Headings: Clear, concise, and descriptive

• Body Text: Short paragraphs (2-3 sentences max)

• Lists: Use bullet points for readability

• CTAs: Action-oriented, specific ("Submit Bid" vs "Click Here")

• Error Messages: Helpful, actionable, non-technical where possible

🔒 Accessibility

Color Contrast

• Minimum 4.5:1 contrast ratio for normal text

• Minimum 3:1 for large text (18.66px+ bold or 24px+ regular)

• Test contrast using tools like WebAIM Contrast Checker

Keyboard Navigation

• All interactive elements must be keyboard accessible

• Visible focus indicators (cyberpunk-blue outline)

• Logical tab order

Screen Reader Support

• Proper ARIA attributes

• Semantic HTML structure

• Alt text for all images

• Descriptive link text (avoid "click here")

Motion & Animation

• Provide reduce-motion alternatives

• Keep animations subtle and purposeful

• Limit to 300-500ms duration

📁 File Organization

Design Assets

• Location: /design-assets/ (to be created)

• Structure:

  design-assets/
  ├── logos/
  │   ├── aura-logo-primary.svg
  │   ├── aura-logo-monochrome.svg
  │   └── aura-icon.svg
  ├── colors/
  │   └── palette.ase
  ├── fonts/
  │   └── inter/
  ├── illustrations/
  └── ui-kits/

Frontend Implementation

• Tailwind Config: /frontend/tailwind.config.ts

• Global Styles: /frontend/src/app/globals.css

• Component Library: /frontend/src/components/ui/

🔧 Implementation Checklist

For Designers

• Use approved color palette

• Follow typography guidelines

• Maintain proper spacing scale

• Use consistent iconography

• Ensure accessibility compliance

• Export assets in multiple formats

For Developers

• Use Tailwind classes from approved palette

• Follow component naming conventions

• Implement responsive breakpoints correctly

• Ensure dark mode support

• Add proper ARIA attributes

• Test keyboard navigation

• Verify color contrast ratios

📋 Version Control

Brand Guidelines Version

• Current Version: 1.0

• Last Updated: 2024-01-26

• Maintainer: Brand & Design Team

Change Log

• 1.0: Initial comprehensive brand guidelines

• Future versions will include additional components and patterns

🤝 Contributing to Brand

Brand Evolution

• All brand changes must be reviewed by the design team

• Maintain backward compatibility where possible

• Document all changes in the change log

• Update all references and implementations

Feedback & Issues

• Report brand inconsistencies via GitHub issues

• Tag issues with brand label

• Include screenshots and specific locations

---

© 2024 Aura Platform. All rights reserved.