Brand Guidelines

Digital Asset Treasury
BNB Plus Corp (BNBX:NASDAQ)
Version 1.0 | September 2025

Table of Contents

Brand Mission & Vision

Our Mission

To pioneer the integration of digital assets into corporate treasury management, creating sustainable long-term value through strategic BNB accumulation and deployment within the Binance ecosystem.

Brand Vision

A sophisticated, professional interface that embodies the intersection of traditional finance and digital assets. Our design language draws inspiration from the Binance ecosystem while maintaining our distinctive corporate identity.

Core Values

Trust Through Transparency

Clear data visualization and real-time updates build confidence

Professional Sophistication

Enterprise-grade aesthetics with modern digital asset flair

Subtle Dynamism

Refined animations that enhance without distracting

Accessible Clarity

Information hierarchy that guides users naturally

Color Palette

Primary Colors

Primary Yellow
Binance Yellow
HEX: #F0B90B
RGB: 240, 185, 11
Usage: Primary accent, CTAs
Yellow Light
Yellow Light
HEX: #FCD535
RGB: 252, 213, 53
Usage: Hover states
Yellow Dark
Yellow Dark
HEX: #F8D12F
RGB: 248, 209, 47
Usage: Active states

Dark Colors

Primary Dark
Binance Dark
HEX: #0B0E11
RGB: 11, 14, 17
Usage: Main background
Dark Light
Dark Light
HEX: #1E2329
RGB: 30, 35, 41
Usage: Card backgrounds
Dark Lighter
Dark Lighter
HEX: #2B3139
RGB: 43, 49, 57
Usage: Elevated surfaces

Text Colors

Primary Text
White Text
HEX: #EAECEF
RGB: 234, 236, 239
Usage: Primary text on dark
Secondary Text
Gray Light
HEX: #B7BDC6
RGB: 183, 189, 198
Usage: Secondary text
Muted Text
Gray
HEX: #848E9C
RGB: 132, 142, 156
Usage: Captions, hints

Typography

Font Families

Display Font
Space Grotesk

Used for headings, metrics, and display text

Body Font
Inter

Used for body text, UI elements, and captions

Font Downloads

For designers working in design software (Figma, Adobe, Sketch), download the font files from these sources:

Space Grotesk

Display font for headings and metrics

Google Fonts fonts.google.com/specimen/Space+Grotesk →
GitHub Repository github.com/floriankarsten/space-grotesk →
Weights needed:
Light (300), Regular (400), Medium (500), Semibold (600), Bold (700)

Inter

Body font for text and UI elements

Google Fonts fonts.google.com/specimen/Inter →
GitHub Repository github.com/rsms/inter →
Weights needed:
Light (300), Regular (400), Medium (500), Semibold (600), Bold (700), Extrabold (800), Black (900)

Installation Notes

  • For Web Development: Fonts are loaded via Google Fonts CDN (already included in code examples)
  • For Design Software: Download and install the .ttf or .otf files from the links above
  • For Print: Both fonts are open source and free for commercial use under SIL Open Font License
  • Variable Fonts: Both Inter and Space Grotesk offer variable font versions for more flexibility

Web Implementation

/* Include in HTML head */
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">

/* Or import in CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

Type Scale

H1 - 72px/80px - Space Grotesk Bold
Digital Asset Treasury

Dashboard Usage: Hero section main headline ("BNB Plus Corp Digital Asset Treasury Initiative")

H2 - 48px/56px - Space Grotesk Bold
Building Long-term Value

Dashboard Usage: Section headers ("Real-Time Treasury Metrics", "Strategic Roadmap", "Why BNB?"), page titles

H3 - 32px - Space Grotesk Semibold
Strategic BNB Accumulation

Dashboard Usage: Subsection headers ("BNB Treasury Purchases", "Phase 1: Foundation"), metric group titles

H4 - 24px - Space Grotesk Semibold
Metric Card Titles

Dashboard Usage: Card headers in MetricsSection, table headers, feature titles ("Exchange Dominance", "Deep Liquidity")

Display Large - 48px/64px - Space Grotesk Bold
$985.48

Dashboard Usage: Large metric values (BNB price, BNBX stock price), primary data displays in metric cards

Display Medium - 32px - Space Grotesk Bold
28,965,148

Dashboard Usage: Secondary metric values (share counts, treasury values), StockChart data points

Navigation Title - 20px - Space Grotesk Bold
Digital Asset Treasury

Dashboard Usage: Navigation bar left side title, persistent site identifier in header

Body Large - 18px - Inter Regular
Our strategic initiative leverages the growing Binance ecosystem to create sustainable long-term value for shareholders through digital asset accumulation.

Dashboard Usage: Hero section subtitle, introduction paragraphs, call-to-action descriptions

Body - 16px - Inter Regular
BNB Plus Corp is pioneering the integration of digital assets into corporate treasury management, establishing a new paradigm for value creation.

Dashboard Usage: Body text throughout sections (StrategySection descriptions, WhyBNBSection content), FAQ answers, general paragraph text

Body Small - 14px - Inter Regular
Trading volume across 380+ cryptocurrencies with institutional-grade infrastructure

Dashboard Usage: Supporting descriptions, secondary card content, button labels, table data

Caption - 13px - Inter Regular
Data updated in real-time via secure API connections

Dashboard Usage: Timestamps ("Last updated"), metadata labels, footnotes, help text

Caption Small - 12px - Inter Regular
As of July 31, 2025

Dashboard Usage: Date labels, fine print, source attributions, mobile table data

Label - 14px - Inter Medium
Outstanding Common Stock

Dashboard Usage: Metric labels in cards, form labels, table column headers, category tags

Spacing & Layout System

Spacing Scale

Our spacing system is based on a 4px base unit, ensuring consistent rhythm and alignment across all designs.

Token Pixels Rem Tailwind Class Usage Visual
spacing-1 4px 0.25rem p-1, m-1, gap-1 Minimal spacing, icon padding
spacing-2 8px 0.5rem p-2, m-2, gap-2 Tight spacing, small gaps
spacing-3 12px 0.75rem p-3, m-3, gap-3 Button padding, small cards
spacing-4 16px 1rem p-4, m-4, gap-4 Standard spacing, container padding
spacing-6 24px 1.5rem p-6, m-6, gap-6 Card padding, medium gaps
spacing-8 32px 2rem p-8, m-8, gap-8 Large card padding, section gaps
spacing-12 48px 3rem p-12, m-12, gap-12 Large element spacing
spacing-24 96px 6rem p-24, m-24, py-24 Section padding (vertical)

Layout Grid

We use a flexible container-based layout system with responsive breakpoints.

Breakpoint Min Width Container Max Width Columns Gutter
Mobile (default) 0px 100% 1 16px (px-4)
sm 640px 640px 2 16px
md 768px 768px 2-3 24px
lg 1024px 1024px 3 24px
xl 1280px 1280px 3-4 32px
2xl 1536px 1536px 4 32px

Border Radius Scale

rounded-sm
4px / 0.25rem
Small elements
rounded-lg
8px / 0.5rem
Buttons, badges
rounded-2xl
16px / 1rem
Cards, containers
rounded-full
9999px
Pills, avatars

Layout Examples

Card Grid Layout

Card 1
gap-6 (24px)
Card 2
Card 3
grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6

Animation & Motion

Motion Principles

Purposeful

Every animation should have a clear purpose—guiding attention, providing feedback, or enhancing understanding.

Subtle

Animations should enhance, not distract. Use restraint to maintain a professional, focused experience.

Responsive

Provide immediate visual feedback for user interactions to confirm actions and maintain engagement.

Performant

Optimize animations for smooth 60fps performance. Use GPU-accelerated properties (transform, opacity).

Animation Durations

Duration Milliseconds Tailwind Class Use Case
Instant 75ms duration-75 Color changes, simple state updates
Quick 150ms duration-150 Hover effects, button presses
Normal 300ms duration-300 Standard transitions, card hovers, borders
Moderate 600ms duration-600 Element entrances, tab transitions
Slow 1000ms duration-1000 Complex animations, reveal effects

Easing Functions

ease-in-out

Default for most animations. Smooth start and end.

transition-all ease-in-out

ease-out

Entering elements. Fast start, slow finish.

transition-all ease-out

ease-in

Exiting elements. Slow start, fast finish.

transition-all ease-in

Common Animations

Fade In (Element Entrance)

// Framer Motion
initial={{ opacity: 0, y: 15 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}

Usage: MetricCard components, section content reveals

Hover Scale

whileHover={{ scale: 1.05 }}
transition={{ duration: 0.2 }}

Usage: Interactive cards, buttons, clickable elements

Navigation Slide Down

initial={{ y: -100 }}
animate={{ y: 0 }}
transition={{ duration: 0.6 }}

Usage: Navigation bar entrance on page load

Stagger Children

// Parent container
transition={{ staggerChildren: 0.1 }}

// Each child
transition={{ delay: index * 0.1 }}

Usage: Navigation tabs, card grids, feature lists

Custom Keyframe Animations

Animation Name Duration Tailwind Class Usage
gradient-x 15s animate-gradient-x Background gradient horizontal movement
float 6s animate-float Subtle floating motion for decorative elements
glow 2s animate-glow Pulsing glow effect for emphasis
shimmer 2s .shimmer Loading skeleton shimmer animation

Animation Don'ts

  • Don't animate layout properties (width, height, margin, padding) - use transform instead
  • Don't use animations longer than 1 second for UI interactions
  • Don't create animations that prevent user interaction
  • Don't animate on scroll without throttling
  • Don't forget to respect prefers-reduced-motion settings

Iconography

Icon Library

We use Lucide React as our primary icon library. Lucide provides a comprehensive set of clean, consistent icons optimized for web applications.

Installation

npm install lucide-react
Browse Lucide Icons →

Icon Sizes

Small
16px
size={16}
Inline text, tight spaces
Default
20px
size={20}
Standard UI, buttons
Medium
24px
size={24}
Headers, feature icons
Large
32px
size={32}
Hero sections, emphasis

Icon Colors

Context Color Tailwind Class Example
Primary Actions #F0B90B (Binance Yellow) text-binance-yellow
Primary Text #EAECEF (Binance White) text-binance-white
Secondary/Muted #848E9C (Binance Gray) text-binance-gray
Positive/Success #10B981 (Green) text-green-400
Negative/Error #EF4444 (Red) text-red-400

Common Icons Used

TrendingUp
Positive metrics
TrendingDown
Negative metrics
Menu
Mobile nav
X
Close/dismiss

Icon Usage Guidelines

Best Practices

  • Always use currentColor for icon stroke/fill to inherit text color
  • Maintain consistent stroke-width of 2px across all icons
  • Icons should be vertically centered with adjacent text
  • Use size prop instead of CSS width/height for better scaling
  • Provide aria-labels for standalone icons without accompanying text
  • Use decorative icons sparingly - they should enhance, not clutter

Component States

Interactive State System

Every interactive component should communicate its current state through visual feedback. Our state system ensures consistent user experience across all touchpoints.

Button States

Primary Button States

Default
Hover
Active/Pressed
Disabled

Secondary Button States

Default
Hover
Active/Pressed
Disabled

Card States

Default
BNB PRICE
$985.48
Hover
BNB PRICE
$985.48
Loading

Input States

Default
Focus
Error
This field is required
Disabled

Link States

Default
Learn More
Hover
Learn More
Visited
Learn More
Disabled
Learn More

State Specifications

State Visual Changes Transition Duration Properties Changed
Hover Lighter color, border change, scale up 150-300ms background, border-color, transform
Active/Press Darker color, scale down 75ms background, transform
Focus Yellow border, subtle glow 150ms border-color, box-shadow
Disabled Gray colors, reduced opacity, no pointer 0ms (instant) color, background, opacity, cursor
Loading Skeleton/shimmer animation, pulse 2000ms (loop) opacity (animated)
Error Red border, error message below 300ms border-color, text content

Accessibility Requirements

  • Focus states must be clearly visible with sufficient contrast (minimum 3:1 ratio)
  • Disabled states should use cursor: not-allowed and aria-disabled="true"
  • Loading states must include aria-busy="true" and descriptive text
  • Error states require aria-invalid="true" and aria-describedby linking to error message
  • Interactive elements must have minimum 44x44px touch target on mobile

Visual Elements

Gradients

Primary Gradient
Dark Gradient
Yellow Gradient

Glass Morphism Effect

Glass Effect

Background: rgba(255, 255, 255, 0.05)
Backdrop Filter: blur(12px)
Border: 1px solid rgba(255, 255, 255, 0.1)

Shadows & Elevation

Elevation 1

0 2px 4px rgba(0,0,0,0.1)

Elevation 2

0 4px 8px rgba(0,0,0,0.15)

Elevation 3

0 8px 16px rgba(0,0,0,0.2)

UI Components

Buttons

Primary Button

Background: #F0B90B
Text: #0B0E11
Padding: 12px 24px
Border Radius: 8px

Secondary Button

Border: 2px solid #F0B90B
Text: #0B0E11
Padding: 12px 24px
Border Radius: 8px

Cards

Metric Card

$985.48
↑ 2.45%

Info Card

Strategic accumulation of digital assets through disciplined investment approach.

Form Elements

Usage Guidelines

Logo Usage

Do's

  • Maintain minimum size requirements
  • Use approved color combinations
  • Preserve clear space around logo
  • Use high-resolution versions

Don'ts

  • Don't stretch or distort the logo
  • Don't use unapproved colors
  • Don't add effects or shadows
  • Don't rotate the logo

Color Usage

Do's

  • Use yellow for primary actions
  • Maintain proper contrast ratios
  • Use dark backgrounds for main UI
  • Apply colors consistently

Don'ts

  • Don't use yellow text on light backgrounds
  • Don't mix brand colors randomly
  • Don't use low contrast combinations
  • Don't modify color values

Typography

Do's

  • Use Space Grotesk for headings
  • Use Inter for body text
  • Maintain hierarchy with size and weight
  • Ensure readability at all sizes

Don'ts

  • Don't use other fonts without approval
  • Don't use decorative fonts
  • Don't use text smaller than 12px
  • Don't use all caps for body text

Applications

Digital Platforms

Marketing Materials

Documentation

BNB Plus Corp

Digital Asset Treasury Initiative

© 2025 BNB Plus Corp. All rights reserved.
For brand inquiries: brand@bnbpluscorp.com