SUZAA Brand Color System

A comprehensive color palette designed for professional cryptocurrency payment infrastructure. This system ensures consistency across all touchpoints while maintaining accessibility and visual hierarchy.

Primary Colors

Navy

Primary brand color. Logo, text, dark surfaces, navigation.

• HEX: #0b111f
• RGB: 11, 17, 31
• HSL: 222°, 48%, 8%

Electric Blue

Primary accent. CTAs, links, active states, highlights.

• HEX: #0a84ff
• RGB: 10, 132, 255
• HSL: 210°, 100%, 52%

Teal

Secondary accent. Gradients, decorative elements, success states.

• HEX: #00b8a9
• RGB: 0, 184, 169
• HSL: 175°, 100%, 36%

Neutral Scale

Semantic Colors

Success

Success messages, completed states, positive feedback.

• HEX: #10b981

Warning

Warning messages, pending states, caution indicators.

• HEX: #f59e0b

Error

Error messages, destructive actions, failed states.

• HEX: #ef4444

Info

Info messages, neutral notifications, helpful tips.

• HEX: #0a84ff

Brand Gradients

Primary Gradient

CTAs, hero sections, premium features, accent elements.

background: linear-gradient(135deg, #0a84ff 0%, #00b8a9 100%);

Dark Gradient

Dark sections, footers, premium cards, sophisticated backgrounds.

background: linear-gradient(135deg, #0b111f 0%, #1e293b 100%);

Light Gradient

Page backgrounds, subtle sections, clean surfaces.

background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

Usage Guidelines

✅ Do’s

• Use Navy (#0b111f) for all text over light backgrounds
• Use Electric Blue (#0a84ff) for primary CTAs and links
• Use gradients sparingly for premium emphasis
• Maintain 4.5:1 contrast ratio for accessibility
• Use neutral scale for hierarchy and depth
• Apply semantic colors consistently for states

❌ Don’ts

• Don’t use Electric Blue for large text blocks
• Don’t mix multiple gradients in one view
• Don’t use colors outside this system
• Don’t ignore contrast requirements
• Don’t use semantic colors for decoration
• Don’t place light text on light backgrounds

Accessibility & Contrast

All color combinations meet WCAG standards:

Contrast Requirements

• Normal text: 4.5:1 minimum (WCAG AA)
• Large text (18pt+): 3:1 minimum (WCAG AA)
• UI components: 3:1 minimum (WCAG AA)

Color Application by Element

Typography

Headlines: Navy (#0b111f)
Body text: Slate 700 (#334155)
Secondary text: Slate 500 (#64748b)
Links: Electric Blue (#0a84ff)

Backgrounds

Page background: Slate 50 (#f8fafc)
Section background: Slate 100 (#f1f5f9)
Card background: White (#ffffff)
Dark sections: Navy (#0b111f)

Borders

Default borders: Slate 200 (#e2e8f0)
Dividers: Slate 300 (#cbd5e1)
Focus rings: Electric Blue (#0a84ff)

Buttons

Primary button: Navy (#0b111f) background, white text
Primary hover: Slate 900 (#0f172a) background
Secondary button: White background, Navy (#0b111f) text, Slate 200 border
Link button: Electric Blue (#0a84ff) text

States

Hover: Lighten/darken by 10%
Active: Lighten/darken by 15%
Disabled: Slate 300 (#cbd5e1)
Focus: Electric Blue (#0a84ff) ring

CSS Variables Implementation

Complete Variable Set

:root {
    /* Primary Colors */
    --navy: #0b111f;
    --primary: #0a84ff;
    --secondary: #00b8a9;
    
    /* Neutral Scale */
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-500: #64748b;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --slate-50: #f8fafc;
    --white: #ffffff;
    
    /* Semantic Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #0a84ff;
}

Usage Example

/* Typography */
h1 {
    color: var(--navy);
}
 
body {
    color: var(--slate-700);
}
 
/* Backgrounds */
.section {
    background: var(--slate-50);
}
 
/* Buttons */
.btn-primary {
    background: var(--navy);
    color: var(--white);
}
 
.btn-primary:hover {
    background: var(--slate-900);
}
 
/* Links */
a {
    color: var(--primary);
}
 
/* Borders */
.card {
    border: 1px solid var(--slate-200);
}

Color Psychology & Strategy

Navy (#0b111f)

Conveys: Trust, stability, authority, professionalism Use for: Brand identity, primary text, serious messaging

Electric Blue (#0a84ff)

Conveys: Technology, innovation, action, reliability Use for: CTAs, interactive elements, tech features

Teal (#00b8a9)

Conveys: Growth, success, balance, forward-thinking Use for: Positive states, accents, progress indicators

Slate Gray Scale

Conveys: Neutrality, sophistication, clarity, focus Use for: Hierarchy, backgrounds, supporting elements

Brand Color Combinations

Recommended Pairings

High Impact (Hero sections)

Navy (#0b111f) + Electric Blue (#0a84ff)
Effect: Modern, tech-forward, trustworthy

Professional (Body content)

Slate 700 (#334155) + White (#ffffff)
Effect: Clean, readable, approachable

Premium (Special features)

Navy (#0b111f) + Teal (#00b8a9) gradient
Effect: Sophisticated, valuable, innovative

Neutral (Backgrounds)

Slate 50 (#f8fafc) + White (#ffffff)
Effect: Subtle, spacious, professional

Design System Integration

Typography with Color

Hero Headline (72px):     Navy (#0b111f)
Section Heading (48px):   Navy (#0b111f)
Card Title (24px):        Navy (#0b111f)
Body Large (22px):        Slate 700 (#334155)
Body Text (16px):         Slate 700 (#334155)
Caption (15px):           Slate 500 (#64748b)

Spacing with Background Colors

Light sections:   White or Slate 50/100
Dark sections:    Navy or Slate 900/800
Alternating:      White → Slate 100 → White

Component Colors

Navigation bar:   White background, Navy text
Footer:          Navy background, White text
Cards:           White background, Slate 200 border
Buttons:         Navy or Electric Blue
Forms:           Slate 200 borders, Navy focus rings

Quality Assurance Checklist

Color Implementation

• All colors use exact hex values from this system
• No colors outside the defined palette
• CSS variables implemented correctly
• Consistent color naming across codebase

Accessibility

• All text meets 4.5:1 contrast minimum
• Large text meets 3:1 contrast minimum
• UI components meet 3:1 contrast
• Focus indicators are visible
• Color is not the only indicator of state

Visual Consistency

• Navy used for all primary text
• Electric Blue limited to CTAs and links
• Neutral scale used for hierarchy
• Semantic colors used appropriately
• Gradients used sparingly

Brand Alignment

• Colors match logo exactly
• Professional fintech aesthetic maintained
• Trust and authority conveyed
• Modern and innovative feel

Additional Resources

Design Tools Integration

Figma Variables:

Navy:         #0b111f
Primary:      #0a84ff
Secondary:    #00b8a9
Slate/900:    #0f172a
Slate/800:    #1e293b
Slate/700:    #334155
Slate/500:    #64748b
Slate/300:    #cbd5e1
Slate/200:    #e2e8f0
Slate/100:    #f1f5f9
Slate/50:     #f8fafc

Tailwind Config:

module.exports = {
  theme: {
    extend: {
      colors: {
        navy: '#0b111f',
        primary: '#0a84ff',
        secondary: '#00b8a9',
        slate: {
          900: '#0f172a',
          800: '#1e293b',
          700: '#334155',
          500: '#64748b',
          300: '#cbd5e1',
          200: '#e2e8f0',
          100: '#f1f5f9',
          50: '#f8fafc',
        }
      }
    }
  }
}

Version History

Version 1.0 - November 2024

• Initial brand color system
• Based on logo colors (#0b111f, #0a84ff, #00b8a9)
• Professional fintech aesthetic
• WCAG AAA accessibility compliance

Contact & Feedback

For questions about the color system:

• Email: design@suzaa.com
• Documentation: docs.suzaa.com
• Brand assets: brand.suzaa.com

This color system is designed to be implemented across all SUZAA touchpoints including web, mobile, marketing materials, and product interfaces. Consistency in color usage builds brand recognition and trust.