skills.rest
shades-of-web
shades-of-webOFFICIAL
Explore all skills by this author →
Website𝕏@shadesofwebGitHub

brand-guidelines

Define Shades of Web brand colors, typography, and component patterns.

Updated May 21, 2026
Search Tags:#typography#theming#accessibility#brand identity#color palette#brand guidelines#design standards
One-click install
npx skills add https://github.com/shades-of-web/skills --skill brand-guidelines-shades-of-web
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: brand-guidelines
Source: https://github.com/shades-of-web/skills/tree/main/skills/brand-guidelines
Command: npx skills add https://github.com/shades-of-web/skills --skill brand-guidelines-shades-of-web

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) components.

What problem does it solve?

This Skill provides comprehensive brand guidelines for Shades of Web, ensuring consistency in design, color, typography, and other visual elements across all products.

Core Features & Use Cases

  • Brand Colors: Defines the official color palette with hex codes and RGB values.
  • Typography: Specifies approved fonts and type scales for various text elements.
  • ** Theming**: Offers guidance on light and dark mode theming for web applications.
  • Component Patterns: Provides design patterns for UI components like cards and buttons.
  • Brand Assets: Lists and describes all brand assets available for use.
  • Motion & Animation: Guidelines for animations and transitions to maintain brand consistency.
  • Accessibility: Ensures compliance with WCAG AA standards for accessibility.
  • Imagery Direction: Suggests a visual style for imagery that aligns with the brand.
  • Motifs: Offers geometric motifs for use in design elements.
  • Brand Voice: Defines the tone and style for written communication.
  • Accessibility: Ensures compliance with WCAG AA standards for accessibility.

Quick Start

Apply the brand guidelines to your next project to ensure visual consistency with Shades of Web standards.

Frequently Asked Questions about brand-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are brand guidelines and how do they ensure design consistency?▼

Brand guidelines define official color schemes, typography, and component patterns to ensure visual consistency across products. They provide specific design standards including hex codes, type scales, and UI patterns that maintain a unified brand identity.

How do I establish brand identity colors and typography for a new web project?▼

To establish brand identity, apply a defined color palette with hex codes and RGB values alongside approved fonts and type scales. This ensures visual elements align with standard brand guidelines for web applications.

Does these design standards include accessibility and WCAG compliance?▼

Yes, these design standards ensure compliance with WCAG AA standards for accessibility. The guidelines integrate accessibility requirements directly into the color palette, typography, and theming rules.

How to implement light and dark mode theming using brand color palettes?▼

Implement light and dark mode theming by following the provided guidance for web applications. The brand guidelines specify how to adapt the official color palette and component patterns for both theme modes.

What is the best way to maintain brand voice and motion animation consistency?▼

The best way to maintain brand voice and motion consistency is to apply the provided guidelines for written communication tone alongside specific animation and transition rules. This keeps visual and textual messaging aligned.

Related Skills

Explore More Design & Creative Skills→
KrishnatejavepaKrishnatejavepa
14

design

Constructs brand identity systems including color schemes, typography, and imagery guidelines.

Community
Advanced
omanjayaomanjaya

frontend-design

Provide typography, color, spacing, and motion guidelines for web UI design.

Community
Intermediate
mymx2mymx2
4

frontend-ui-engineering

Enforce design system constraints and WCAG 2.1 AA accessibility in web UI components.

Community
Advanced
rwHiveAquarwHiveAqua

design-advisor

Translate brand strategy into visual identity assets with typography, color, and layout specs.

Community
Basic