Documentation → Brand Guidelines
← Back to Documentation

Brand Guidelines

Official ONVEXIS brand identity guidelines for developers, partners, and content creators.

Brand Identity

ONVEXIS
Krypto Tactical Trading Platform

ONVEXIS represents precision, intelligence, and tactical excellence in cryptocurrency trading. Our brand embodies cutting-edge technology, professional-grade tools, and sophisticated analytical capabilities.

Color Palette

The ONVEXIS color palette is designed to convey trust, innovation, and precision in financial technology.

Primary Blue
#1F8AEE

Primary brand color for buttons, links, and key UI elements

Secondary Cyan
#00F7C4

Secondary accent color for highlights and success states

Alert Red
#F74B4B

Alert and error color for warnings and critical actions

Neutral Dark
#0D0F12

Primary background color for dark theme

Neutral Light
#E6E8EB

Primary text color and light accents

Typography

ONVEXIS Wordmark

Font: Arial Black, Helvetica Neue Bold, or system equivalent

Weight: 800 (Extra Bold)

Letter Spacing: 0.02em

Tagline Typography

Font: System UI, Segoe UI, Roboto, sans-serif

Weight: 500 (Medium)

Letter Spacing: 0.01em

CSS Implementation

/* ONVEXIS Brand Typography */ .onvexis-wordmark { font-family: 'Arial Black', 'Helvetica Neue', sans-serif; font-weight: 800; letter-spacing: 0.02em; color: var(--brand-primary); } .onvexis-tagline { font-family: system-ui, 'Segoe UI', Roboto, sans-serif; font-weight: 500; letter-spacing: 0.01em; color: var(--brand-secondary); }

CSS Implementation

Use these CSS custom properties for consistent brand color implementation:

:root { /* ONVEXIS Brand Colors */ --brand-primary: #1F8AEE; /* Primary Blue */ --brand-secondary: #00F7C4; /* Secondary Cyan */ --brand-alert: #F74B4B; /* Alert Red */ --brand-neutral-dark: #0D0F12; /* Dark Background */ --brand-neutral-light: #E6E8EB;/* Light Text */ /* HSL Variants for Tailwind */ --brand-primary-hsl: 207 88% 52%; --brand-secondary-hsl: 177 100% 48%; --brand-alert-hsl: 4 88% 63%; --brand-dark-hsl: 215 12% 6%; --brand-light-hsl: 215 9% 91%; } /* Utility Classes */ .text-brand-primary { color: var(--brand-primary); } .text-brand-secondary { color: var(--brand-secondary); } .bg-brand-primary { background-color: var(--brand-primary); } .bg-brand-secondary { background-color: var(--brand-secondary); } .border-brand-primary { border-color: var(--brand-primary); }

Usage Guidelines

✅ Do

  • Use the exact hex color values provided
  • Maintain proper contrast ratios for accessibility
  • Use Primary Blue for primary actions and navigation
  • Use Secondary Cyan for success states and highlights
  • Preserve the ONVEXIS wordmark proportions
  • Use the dark theme as the primary interface

❌ Don't

  • Modify or approximate the brand colors
  • Use Alert Red for non-critical interface elements
  • Stretch or distort the ONVEXIS wordmark
  • Use light themes as the primary interface
  • Combine ONVEXIS with competing brand colors
  • Use the brand colors in low-contrast combinations

Brand Applications

Interface Elements

  • Primary Buttons: Primary Blue background with white text
  • Secondary Buttons: Secondary Cyan background with dark text
  • Success States: Secondary Cyan for confirmations and positive feedback
  • Warning/Error States: Alert Red for critical alerts and errors
  • Navigation Active States: Primary Blue for active tabs and current pages

Logo and Wordmark

  • Minimum Size: 120px width for digital applications
  • Clear Space: Maintain 1x the height of the wordmark as clear space
  • Backgrounds: Optimized for dark backgrounds, use white on light backgrounds

Brand Assets

For official brand assets including logos, icons, and style guides, contact the ONVEXIS brand team or access the internal brand portal.

/* Quick Brand Implementation */ .onvexis-branding { background: var(--brand-neutral-dark); color: var(--brand-neutral-light); } .onvexis-button-primary { background: var(--brand-primary); color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 8px; font-weight: 600; transition: all 0.3s ease; } .onvexis-button-primary:hover { background: color-mix(in srgb, var(--brand-primary) 90%, white 10%); transform: translateY(-1px); }