---

name: branding-guidelines description: Apply corporate branding standards including blue color palette, dark/light theme support, and shadcn UI component library. Use when implementing UI components, styling elements, or ensuring brand consistency. allowed-tools: Read, Edit, Grep, Glob

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