Coinbox Brand Styling

Overview

To access Coinbox's official brand identity and style resources, use this skill when building any UI components, pages, or design artifacts for the Coinbox platform.

Keywords: branding, design system, visual identity, crypto wallet, fintech, portfolio tracker, colors, typography, Coinbox brand, UI components

Brand Identity

Product Name: Coinbox Tagline: Portfolio Intelligence, Not Just Tracking Category: Multi-chain Cryptocurrency Portfolio Intelligence Platform

Brand Personality:

• •Trustworthy - Handles financial data with care
• •Intelligent - AI-powered insights, not just raw data
• •Professional - Suitable for serious portfolio management
• •Modern - Cutting-edge tech with refined aesthetics

Aesthetic Direction: Refined Fintech with Subtle Edge

• •Avoid: Neon gradients, excessive glow, "Web3" clichés, purple everything
• •Embrace: Clean confidence, purposeful accents, data-forward design

Brand Guidelines

Colors

Primary Colors (Indigo):

• •Primary Light: #C7D2FE (Indigo-200) - Hover states, subtle highlights
• •Primary Default: #6366F1 (Indigo-500) - Main brand color, CTAs
• •Primary Dark: #4F46E5 (Indigo-600) - Active states, emphasis
• •Primary Darker: #4338CA (Indigo-700) - Dark mode accents

Accent Colors (Teal):

• •Accent Light: #5EEAD4 (Teal-300) - Highlights on dark
• •Accent Default: #2DD4BF (Teal-400) - Secondary CTAs, special features
• •Accent Dark: #14B8A6 (Teal-500) - Dark mode accent

Semantic Colors:

• •Success: #22C55E (Green-500) - Positive gains, confirmations
• •Warning: #F59E0B (Amber-500) - Uncategorized, needs attention
• •Destructive: #EF4444 (Red-500) - Losses, errors, deletions

Neutral Colors:

• •Background Light: #F8FAFC (Slate-50) - Light theme background
• •Background Dark: #0F172A (Slate-900) - Dark theme background
• •Card Light: #FFFFFF - Light theme cards
• •Card Dark: #1E293B (Slate-800) - Dark theme cards
• •Border Light: #E2E8F0 (Slate-200) - Light theme borders
• •Border Dark: #334155 (Slate-700) - Dark theme borders
• •Muted Foreground: #64748B (Slate-500) - Secondary text

Chain-Specific Colors:

• •Bitcoin: #F7931A - Bitcoin orange
• •Ethereum: #627EEA - Ethereum blue
• •Arbitrum: #28A0F0 - Arbitrum blue
• •Optimism: #FF0420 - Optimism red
• •Base: #0052FF - Coinbase blue
• •Polygon: #8247E5 - Polygon purple

Typography

Font Stack:

• •Headings: Geist (with Plus Jakarta Sans fallback)
• •Body Text: Geist (with system-ui fallback)
• •Monospace: Geist Mono (with JetBrains Mono fallback)

Typography Rules:

• •All financial numbers use tabular-nums for aligned columns
• •Wallet addresses and transaction hashes use monospace
• •Price changes use semantic colors (green positive, red negative)

Font Sizes:

• •Display (Hero numbers): 48px / 3rem
• •Page Title: 36px / 2.25rem
• •Section Header: 24px / 1.5rem
• •Card Title: 20px / 1.25rem
• •Body Large: 18px / 1.125rem
• •Body: 16px / 1rem
• •Body Small: 14px / 0.875rem
• •Caption: 12px / 0.75rem

Motion & Animation

Timing:

• •Fast (hover, micro-interactions): 150ms
• •Normal (state changes): 200ms
• •Slow (page transitions, modals): 300ms

Easing:

• •Default: cubic-bezier(0.22, 1, 0.36, 1) - Quick start, smooth end
• •Spring: type: spring, stiffness: 400, damping: 24

Key Animations:

• •Page enter: Fade in + slide up 12px
• •Card hover: Scale 1.01 + subtle shadow increase
• •List items: Stagger reveal with 50ms delay between items
• •Number changes: Animated counting with spring physics

Spacing & Layout

Spacing Scale (4px base):

• •4px (0.25rem) - Tight spacing within elements
• •8px (0.5rem) - Default gap between inline items
• •12px (0.75rem) - Compact padding
• •16px (1rem) - Standard padding
• •24px (1.5rem) - Card padding, section gaps
• •32px (2rem) - Large section margins
• •48px (3rem) - Page section spacing

Border Radius:

• •Small: 4px - Buttons, inputs, chips
• •Medium: 8px - Cards, panels
• •Large: 12px - Modals, large containers
• •XL: 16px - Hero elements
• •Full: 9999px - Pills, avatars, circular elements

Elevation (Shadows)

• •sm: 0 1px 2px rgba(0, 0, 0, 0.05) - Subtle lift
• •md: 0 4px 6px -1px rgba(0, 0, 0, 0.1) - Default card shadow
• •lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1) - Hover state
• •xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1) - Modal, dropdown

Visual Effects

Glass Effect:

.glass {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

Component Guidelines

Cards

• •Default shadow: sm, increases to lg on hover
• •Padding: 24px (space-6)
• •Border radius: 8px (medium)
• •Subtle border in light mode, no border in dark mode

Buttons

• •Primary: Indigo background, white text
• •Secondary: Ghost/outline with indigo text
• •Destructive: Red, use sparingly
• •All buttons have subtle scale transform on tap (0.97)

Data Display

• •Numbers right-aligned in tables
• •Monospace font for all numeric values
• •Green (↑) for positive, Red (↓) for negative
• •Neutral gray for zero or no change

Forms

• •Labels above inputs
• •Inline validation with colored borders
• •Clear disabled states (reduced opacity)

Technical Details

CSS Variables

All colors are defined as HSL values in CSS custom properties:

:root {
  --primary: 239 84% 67%;      /* Indigo-500 */
  --accent: 174 72% 56%;        /* Teal-400 */
  --success: 142 71% 45%;       /* Green-500 */
  --warning: 38 92% 50%;        /* Amber-500 */
  --destructive: 0 84% 60%;     /* Red-500 */
}

Font Loading

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");

Implementation Files

• •CSS Variables: desktop/src/index.css
• •Tailwind Config: desktop/tailwind.config.js
• •Animation Presets: desktop/src/lib/animations.ts