Apply brand colors and typography to artifacts. Use when brand colors, style guidelines, visual formatting, or company design standards apply. Ensures consistency across branded content.
The 'brand-guidelines' skill ensures consistency across all branded content by applying standardized visual styles to various artifacts, such as documents, presentations, web pages, and marketing materials. It resolves the challenge of maintaining brand coherence by offering a set of predefined color schemes, typography rules, and layout guidelines, enabling businesses to ensure that all materials adhere to their established brand identity. This guarantees that every piece of content aligns with the company’s visual standards, contributing to a unified and professional appearance in all public-facing materials.
The skill provides essential brand elements such as brand-specific colors, fonts, spacing, and layout structures. It offers a CSS-based approach for styling components such as buttons, cards, headers, and document templates. By defining key aspects like primary and secondary brand colors, typography, and space guidelines, the skill helps users apply a cohesive design language to their projects. This includes examples of how to implement these elements in real-world scenarios such as Google Docs, presentations, and web-based applications.
This skill is ideal for designers, developers, and content creators who need to apply consistent brand styling across multiple platforms. It's especially useful for teams managing corporate communications, marketing materials, and internal documentation, ensuring that all artifacts remain visually aligned with the company's established identity. Whether you're working on a website, a presentation, or a marketing campaign, the 'brand-guidelines' skill simplifies the process of keeping all design elements in sync with the brand’s core visual standards.
You can apply brand colors by using the predefined CSS variables in the skill, such as --brand-primary, --brand-secondary, and others, to style your content. These variables ensure that your content follows the exact color scheme defined in the brand guidelines.
This skill provides CSS-based guidelines that can be applied to web and document-based content. While it’s not specifically designed for all design tools, it can be adapted to most platforms that support custom styling, including web pages, Google Docs, and presentations.
The typography settings are based on CSS font families like 'Product Sans', 'Google Sans', and 'Roboto'. Ensure that these fonts are available in your project, or substitute them with similar fonts if necessary. The skill offers flexible font settings for both headings and body text.
While the skill provides a set of default brand elements (colors, fonts, and spacing), these can be customized to fit your specific brand guidelines. You can override the CSS variables to match your own color palette or typography choices.
The best practices include using the exact brand colors, ensuring sufficient contrast for readability, establishing a clear content hierarchy through size and weight, and using generous whitespace for a premium feel. Additionally, maintaining proper spacing around logos is essential for consistency.
Quick Setup:
.claude/skills/Repository
skillcreatorai/Ai-Agent-Skills