brand-style

Enforce Screenpipe brand guidelines for typography, color, and voice.

20.9k|2.1k|Updated Jun 19, 2024
One-click install
npx skills add https://github.com/screenpipe/screenpipe --skill brand-style
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: brand-style
Source: https://github.com/screenpipe/screenpipe/tree/main/.claude/skills/brand-style
Command: npx skills add https://github.com/screenpipe/screenpipe --skill brand-style

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Screenpipe Brand Style Guide provides a single source of truth for typography, color, layout, and voice, ensuring consistent design decisions across UI, copy, and visuals.

Core Features & Use Cases

  • Typography: Defines font stacks for headings, body, and code to maintain readability and hierarchy.
  • Color & Geometry: Establishes grayscale palette, border rules, and sharp geometry for a cohesive look.
  • Brand Voice & Taglines: Guides tone, tagline usage, and design language across components and documentation.

Quick Start

Open the brand-style document and reference the typography, color, and layout guidelines when creating any screen or UI copy.

Frequently Asked Questions about brand-style

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

FAQPage Schema
How do I maintain UI consistency across typography and color in a design system?

To maintain UI consistency, codify brand guidelines into a single source of truth for typography, color, and layout. This ensures cohesive design decisions across UI components, copy, and visuals by enforcing grayscale rules, borders, and font hierarchy.

What is a brand style guide used for in product design?

A brand style guide is used to codify visual and verbal identity rules, ensuring consistent design decisions across UI components, documentation, and copy. It defines typography, grayscale color palettes, and brand voice to maintain cohesive branding.

How to standardize typography and color palette for UI components?

Standardize typography and color by defining specific font stacks for headings, body, and code, alongside a strict grayscale palette and border rules. Applying these geometry and layout guidelines across UI components ensures readability and hierarchy.

Does this brand style guide cover brand voice and taglines or just visual design?

This brand style guide covers both visual design and verbal identity. It establishes typography, color, and geometry rules for visuals, while also guiding brand voice, tone, and tagline usage across components and documentation.

Can I use these brand style rules for documentation and UI copy?

Yes, you can apply these brand style rules to documentation and UI copy. The guidelines are designed to maintain cohesive branding across product teams, ensuring consistent tone, tagline usage, and design language in all written and visual material.

When do I need to define a grayscale color palette and sharp geometry for a brand?

You need to define a grayscale color palette and sharp geometry when establishing a cohesive visual identity for a product team. This approach enforces consistent border rules, alignment, and layout across UI components and documentation.