CAIRL Brand Identity

Brand Overview

Name: CAIRL (Consenting Adults In Real Life)

Tagline: Privacy-first identity verification for the modern web

Mission: Empower individuals to verify their identity without sacrificing their privacy or control over personal data.

Values:

• Privacy First
• User Control
• Transparency
• Security
• Trust

Visual Identity

Color Palette

Primary Colors

Trust Blue (Primary)

• Hex: #1E40AF
• HSL: 221 83% 53%
• RGB: 30 64 175
• Usage: Primary actions, links, brand elements
• Represents: Trust, security, reliability

Verified Green (Success)

• Hex: #059669
• HSL: 160 84% 39%
• RGB: 5 150 105
• Usage: Success states, verification badges
• Represents: Verification, approval, success

Neutral Colors

Background White

• Hex: #FFFFFF
• HSL: 0 0% 100%
• RGB: 255 255 255
• Usage: Primary background

Near Black (Foreground)

• Hex: #111827
• HSL: 222 47% 11%
• RGB: 17 24 39
• Usage: Primary text, headings

Muted Gray

• Hex: #64748B
• HSL: 215 16% 47%
• RGB: 100 116 139
• Usage: Secondary text, descriptions

Border Gray

• Hex: #E2E8F0
• HSL: 214 32% 91%
• RGB: 226 232 240
• Usage: Borders, dividers, input fields

Supporting Colors

Warning Amber

• Hex: #F59E0B
• Usage: Warnings, pending states

Error Red

• Hex: #DC2626
• Usage: Errors, destructive actions

Typography

Font Families

Primary: System font stack

font-family:
  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
  Arial, sans-serif;

Monospace: For code and technical content

font-family:
  "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;

Font Sizes

• Display: 72px / 4.5rem (Hero headings)
• H1: 48px / 3rem
• H2: 36px / 2.25rem
• H3: 30px / 1.875rem
• H4: 24px / 1.5rem
• H5: 20px / 1.25rem
• H6: 18px / 1.125rem
• Body Large: 18px / 1.125rem
• Body: 16px / 1rem
• Body Small: 14px / 0.875rem
• Caption: 12px / 0.75rem

Font Weights

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

Spacing Scale

Based on 4px base unit:

• xs: 4px (0.25rem)
• sm: 8px (0.5rem)
• md: 16px (1rem)
• lg: 24px (1.5rem)
• xl: 32px (2rem)
• 2xl: 48px (3rem)
• 3xl: 64px (4rem)
• 4xl: 96px (6rem)

Border Radius

• sm: 4px (0.25rem)
• md: 6px (0.375rem)
• lg: 8px (0.5rem)
• xl: 12px (0.75rem)
• 2xl: 16px (1rem)
• full: 9999px (fully rounded)

Shadows

Small: Subtle elevation

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

Medium: Card elevation

box-shadow:
  0 4px 6px -1px rgba(0, 0, 0, 0.1),
  0 2px 4px -1px rgba(0, 0, 0, 0.06);

Large: Modal/dialog elevation

box-shadow:
  0 10px 15px -3px rgba(0, 0, 0, 0.1),
  0 4px 6px -2px rgba(0, 0, 0, 0.05);

Logo & Icons

Logo Icon

Current: Shield emoji 🛡️ (placeholder)

Future: Custom shield-based logo that conveys:

• Protection
• Trust
• Privacy
• Verification

Icon System

Using Lucide React icon library for consistency:

• Shield: Identity protection, privacy
• Lock: Security, encryption
• UserCheck: Verification, approval
• Eye: Transparency, visibility
• EyeOff: Privacy, hidden data
• Key: Access control
• Check: Success, verified
• X: Error, rejected
• AlertTriangle: Warning, attention needed

Voice & Tone

Brand Voice

Professional but Approachable

• Clear and confident
• Respectful and trustworthy
• Not overly technical
• Empowering, not patronizing

Tone Guidelines

Do:

• Use clear, plain language
• Explain technical concepts simply
• Be direct and honest
• Show empathy for privacy concerns
• Empower users with control

Don't:

• Use jargon or unnecessary technical terms
• Be condescending or oversimplify
• Make promises you can't keep
• Use manipulative or dark patterns
• Create unnecessary fear or urgency

Example Messaging

Good: "You control your data. Share what you want, when you want."

Bad: "Don't let others steal your identity! Sign up NOW!"

UI Components

Buttons

Primary Button

• Background: Trust Blue
• Text: White
• Hover: Slightly darker blue
• Usage: Primary actions (submit, continue, verify)

Secondary Button

• Background: Transparent
• Border: Border Gray
• Text: Foreground
• Hover: Light gray background
• Usage: Secondary actions (cancel, go back)

Success Button

• Background: Verified Green
• Text: White
• Usage: Positive confirmations

Destructive Button

• Background: Error Red
• Text: White
• Usage: Delete, revoke, dangerous actions

Form Inputs

Text Input

• Border: Border Gray
• Focus: Trust Blue border
• Radius: 0.5rem
• Padding: 0.5rem 0.75rem

Error State

• Border: Error Red
• Helper text: Error Red

Cards

Default Card

• Background: White
• Border: Border Gray
• Radius: 0.5rem
• Shadow: Small

Hover State

• Border: Trust Blue (subtle)
• Shadow: Medium

Status Badges

Verified

• Background: Verified Green (light)
• Text: Verified Green (dark)
• Icon: Check

Pending

• Background: Amber (light)
• Text: Amber (dark)
• Icon: Clock

Rejected

• Background: Red (light)
• Text: Red (dark)
• Icon: X

Accessibility

WCAG 2.1 AA Compliance

Color Contrast

• Text: Minimum 4.5:1 ratio
• Large text: Minimum 3:1 ratio
• Interactive elements: Clearly distinguishable

Keyboard Navigation

• All interactive elements keyboard accessible
• Visible focus indicators
• Logical tab order

Screen Readers

• Semantic HTML
• ARIA labels where needed
• Alt text for images
• Clear form labels

Responsive Design

Breakpoints

• Mobile: < 640px
• Tablet: 640px - 1024px
• Desktop: > 1024px

Mobile First

• Design for mobile, enhance for desktop
• Touch-friendly targets (minimum 44x44px)
• Readable text without zooming

Brand Applications

Marketing Materials

• Coming Soon page: Clean, minimal, trust-focused
• Documentation: Clear, structured, helpful
• Social media: Professional, informative
• Email communications: Respectful, valuable

Product UI

• Dashboard: Information-dense but scannable
• Verification flow: Step-by-step, encouraging
• Settings: Comprehensive but not overwhelming
• Help/Support: Accessible, empathetic

Last Updated: 2026-01-23 Version: 1.0 Status: Active