OneValue Corporate Branding Guidelines

OneValue Corporate Branding Guidelines

This skill provides comprehensive branding guidelines including corporate blue color palette, typography, theme system, and shadcn UI component usage.

Corporate Color Palette

Primary Blue (Corporate)

Extended Blue Scale (Tailwind-compatible)

primary: {
  50: '#F0F7FF',
  100: '#E0EFFF',
  200: '#C7DFFF',
  300: '#A4CCFF',
  400: '#7EB3FF',
  500: '#4D94FF',
  600: '#0066CC',  // Main brand color
  700: '#0052A3',
  800: '#003D7A',
  900: '#002B57',
  950: '#001A3D',
}

Semantic Colors

Neutral Grays

gray: {
  50: '#F9FAFB',
  100: '#F3F4F6',
  200: '#E5E7EB',
  300: '#D1D5DB',
  400: '#9CA3AF',
  500: '#6B7280',
  600: '#4B5563',
  700: '#374151',
  800: '#1F2937',
  900: '#111827',
  950: '#030712',
}

Theme Configuration

Light Theme

:root {
  --background: #FFFFFF;
  --foreground: #111827;
  --card: #FFFFFF;
  --card-foreground: #111827;
  --primary: #0066CC;
  --primary-foreground: #FFFFFF;
  --secondary: #F3F4F6;
  --secondary-foreground: #111827;
  --muted: #F3F4F6;
  --muted-foreground: #6B7280;
  --accent: #F3F4F6;
  --accent-foreground: #111827;
  --destructive: #EF4444;
  --border: #E5E7EB;
  --ring: #0066CC;
  --radius: 12px;
}

Dark Theme

[data-theme="dark"], .dark {
  --background: #111827;
  --foreground: #F3F4F6;
  --card: #1F2937;
  --card-foreground: #F3F4F6;
  --primary: #4D94FF;
  --primary-foreground: #111827;
  --secondary: #374151;
  --secondary-foreground: #F3F4F6;
  --muted: #374151;
  --muted-foreground: #9CA3AF;
  --accent: #374151;
  --accent-foreground: #F3F4F6;
  --destructive: #F87171;
  --border: #374151;
  --ring: #4D94FF;
}

Shadcn UI Components

Required Components

Install these shadcn components for the design system:

npx shadcn@latest add button card badge tabs dialog toast select input textarea avatar dropdown-menu separator skeleton

Button Variants

// Primary action
<Button className="bg-primary-600 hover:bg-primary-700">Primary</​Button>

// Secondary action
<Button variant="outline">Secondary</​Button>

// Ghost/​subtle
<Button variant="ghost">Subtle</​Button>

// Destructive
<Button variant="destructive">Delete</​Button>

Card Usage

<Card className="backdrop-blur-lg bg-white/​70 dark:bg-gray-900/​70 border-white/​20">
  <CardHeader>
    <CardTitle>Title</​CardTitle>
    <CardDescription>Description</​CardDescription>
  </​CardHeader>
  <CardContent>Content here</​CardContent>
</​Card>

Typography

Font Stack

font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;

Scale

Spacing Scale

Border Radius

Shadows (Elevation)

--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

Glass Morphism

.glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .glass {
  background: rgba(17, 24, 39, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Animation Standards

--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

Accessibility Requirements

• Minimum contrast ratio: 4.5:1 for text
• Focus rings: 2px solid primary color
• Touch targets: minimum 44x44px
• Reduced motion: respect prefers-reduced-motion