writing-visual-identity

Define color tokens, typography systems, and spatial rules for marketing pages.

Updated Mar 6, 2026
One-click install
npx skills add https://github.com/musher-dev/bundles --skill writing-visual-identity
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: writing-visual-identity
Source: https://github.com/musher-dev/bundles/tree/main/marketing-site-authoring/skills/writing-visual-identity
Command: npx skills add https://github.com/musher-dev/bundles --skill writing-visual-identity

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a structured approach to defining the core visual elements of a brand for marketing pages, ensuring consistency and impact.

Core Features & Use Cases

  • Color System Definition: Specifies 6 essential color tokens (e.g., base-dark, accent-primary) using OKLCH for perceptual uniformity.
  • Typography System: Guides font selection based on product type and audience, defines weight contrast, tracking, and baseline grid alignment.
  • Spatial Rules: Establishes an 8-point spacing scale and macro-whitespace guidelines for premium page design.
  • Use Case: When launching a new SaaS product, use this Skill to establish its foundational color palette, typography, and spacing rules, ensuring a cohesive and professional brand presentation across all marketing materials.

Quick Start

Use the writing-visual-identity skill to define the color tokens, typography system, and spatial rules for a new product.

Frequently Asked Questions about writing-visual-identity

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

FAQPage Schema
Can I use this visual identity approach for an existing product redesign?

Yes, you can use this approach to redefine the foundational color palette, typography system, and spatial rules for an existing product. It supports the creation of design token specifications to ensure a cohesive visual identity during a redesign.

What is the OKLCH color space and why use it for a brand color system?

OKLCH is a color space used for defining color tokens to ensure perceptual uniformity across a brand color system. It specifies six essential color tokens, such as base-dark and accent-primary, to maintain consistent visual impact across marketing pages.

How do I set up a typography system and baseline grid for a SaaS product?

Setting up a typography system involves guiding font selection based on product type and audience, then defining weight contrast, tracking, and baseline grid alignment. This structured approach ensures readable and professional typography pairings for your marketing pages.

What are the best spatial rules and spacing scales for premium page design?

The best spatial rules for premium page design establish an 8-point spacing scale alongside macro-whitespace guidelines. This enforces consistent spatial rules across the layout, resulting in a cohesive and professional brand presentation.

Can I use this visual identity approach for an existing product redesign?

Yes, you can use this approach to redefine the foundational color palette, typography system, and spatial rules for an existing product. It supports the creation of design token specifications to ensure a cohesive visual identity during a redesign.