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)

| Name | Hex | RGB | Usage | |------|-----|-----|-------| | Primary | #0066CC | rgb(0, 102, 204) | Main brand color, primary buttons | | Primary Light | #4D94FF | rgb(77, 148, 255) | Hover states, highlights | | Primary Dark | #0052A3 | rgb(0, 82, 163) | Pressed states, dark accents | | Primary Darker | #003D7A | rgb(0, 61, 122) | Dark mode primary |

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

| Purpose | Light Mode | Dark Mode | |---------|------------|-----------| | Success | #10B981 | #34D399 | | Warning | #F59E0B | #FBBF24 | | Error | #EF4444 | #F87171 | | Info | #3B82F6 | #60A5FA |

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

| Name | Size | Weight | Line Height | |------|------|--------|-------------| | Display | 36px | 700 | 1.2 | | H1 | 30px | 700 | 1.3 | | H2 | 24px | 600 | 1.35 | | H3 | 20px | 600 | 1.4 | | Body | 16px | 400 | 1.5 | | Small | 14px | 400 | 1.5 | | Caption | 12px | 400 | 1.4 |

Spacing Scale

| Token | Value | Usage | |-------|-------|-------| | xs | 4px | Tight spacing | | sm | 8px | Compact elements | | md | 16px | Default spacing | | lg | 24px | Section spacing | | xl | 32px | Large gaps | | 2xl | 48px | Page sections |

Border Radius

| Token | Value | Usage | |-------|-------|-------| | sm | 6px | Small elements, badges | | md | 8px | Buttons, inputs | | lg | 12px | Cards, dialogs | | xl | 16px | Large panels | | full | 9999px | Pills, avatars |

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