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
majiayu000