brand_skill

Overview

This skill helps founders create a coherent brand identity for their SaaS product, covering color systems, typography, logos, icons, and brand voice. It guides the creative decisions you must make and produces practical deliverables that an implementation agent can apply across your UI. Focus is on recognition, consistency, and readiness for production use.

How this skill works

You choose the high-level creative directions: primary color, warm/cool neutral tone, heading and body fonts, icon library, and voice attributes. The skill generates a complete visual system from those inputs: full color scales (primary, neutral, semantic), a typography scale with weights and line heights, logo variants as SVG, icon usage rules, and an OG image template. It outputs CSS custom properties or Tailwind config and concrete examples (buttons, cards, headers) so engineers or automation can implement the design consistently.

When to use it

• When launching an MVP and you need a usable, consistent look fast
• When you need a reusable color system and typography for engineers
• When preparing assets: SVG logos, favicons, and OG templates for social sharing
• Before handing work to developers or a design implementation agent
• When you want to standardize iconography and UI tone across the product

Best practices

• Decide creative inputs quickly (color, fonts, voice) and let AI generate the scales and variants
• Prioritize consistency over novelty: apply a simple system uniformly
• Pick one icon library and one typographic pairing and stick to them
• Design a text-based logo as an MVP; invest in a custom mark after validation
• Export logos as SVG and provide favicon and icon-only versions for small sizes

Example use cases

• Produce a full color system from a single primary hex and warm/cool preference
• Set up a typography scale (0.75rem–3rem) with specific weights and line heights for headings/body
• Generate three logo files: full wordmark, icon-only, and 16x16 favicon in SVG
• Create a Tailwind config or CSS variables for colors, surfaces, and semantic states
• Build an OG image template (1200x630) using the primary color, heading font, and logo