Agent skill

branding-guidelines

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.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/branding-guidelines

SKILL.md

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)

javascript
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

javascript
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

css
: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

css
[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:

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

Button Variants

tsx
// 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

tsx
<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

css
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)

css
--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

css
.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

css
--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

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results