skills.rest
PolicyEngine
PolicyEngineOFFICIAL
Explore all skills by this author →
Website𝕏@thepolicyengineGitHub

policyengine-design

Defines and enforces PolicyEngine's visual identity across charts, apps, and research outputs.

31|6|Updated Oct 19, 2025
Search Tags:#branding#data visualization#design system#ui/ux#color palette#plotly#streamlit
One-click install
npx skills add https://github.com/PolicyEngine/policyengine-claude --skill policyengine-design
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: policyengine-design
Source: https://github.com/PolicyEngine/policyengine-claude/tree/main/skills/policyengine-design-skill
Command: npx skills add https://github.com/PolicyEngine/policyengine-claude --skill policyengine-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Maintaining a consistent visual identity across all PolicyEngine outputs (web apps, charts, research) is crucial for brand recognition and user trust. This Skill provides comprehensive design guidelines, ensuring all your creations align with the PolicyEngine brand.

Core Features & Use Cases

  • Brand Colors & Typography: Defines primary and secondary brand colors (Teal, Blue) and specifies Roboto Serif for charts.
  • Logo Usage: Guides on correct logo placement and usage for various backgrounds.
  • Plotly Chart Formatting: Provides a standard format_fig() function to brand your charts with consistent fonts, colors, and logo placement.
  • Streamlit Theme Configuration: Instructions for applying PolicyEngine's visual theme to Streamlit applications.
  • Use Case: Create a new Plotly chart for a research report, ensuring it uses PolicyEngine's Teal accent color, Roboto Serif font, and includes the official logo in the bottom right corner.

Quick Start

Use the policyengine-design skill to get the hex code for PolicyEngine's primary Teal accent color.

Frequently Asked Questions about policyengine-design

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

FAQPage Schema
How do I apply consistent branding to Plotly charts?▼

Use the policyengine-design Skill's `format_fig()` function to automatically apply PolicyEngine's visual identity to Plotly charts. It standardizes fonts, colors, and logo placement, ensuring your charts align with brand guidelines across research outputs and web applications.

What are PolicyEngine's brand colors and typography standards?▼

PolicyEngine's visual identity specifies Teal and Blue as primary colors with hex codes, and Roboto Serif as the standard font for charts. The Skill provides these brand assets and usage guidelines for consistent application across all outputs.

Can I use PolicyEngine's design system with Streamlit applications?▼

Yes. The policyengine-design Skill includes Streamlit theme configuration instructions to apply PolicyEngine's visual branding to web apps, ensuring consistent color schemes and typography across interactive applications.

How do I ensure my data visualizations match the PolicyEngine brand?▼

The Skill defines standardized chart formatting rules, logo placement, and color palette specifications. Apply these guidelines through the provided code-ready style rules to maintain visual consistency across all research reports and dashboards.

What does the policyengine-design Skill include for logo usage?▼

The Skill provides guidance on correct logo placement, sizing, and usage for various backgrounds. It specifies where to position logos in charts and applications to maintain brand integrity and professional presentation.

Do I need design experience to implement PolicyEngine's visual guidelines?▼

No. The policyengine-design Skill provides code-ready style guidelines and a standardized `format_fig()` function, allowing developers to apply brand standards programmatically without design expertise.

Related Skills

Explore More Design & Creative Skills→
eduardoabreu81eduardoabreu81
6

brand-guidelines

Apply configured brand colors, typography, and formatting rules to visual artifacts.

Community
Intermediate
JoeyMckenzieJoeyMckenzie
27

brandkit

Generate brand-kit visuals with a 3×3 grid on a dark canvas.

Community
Advanced
alyamenfactoryalyamenfactory

streamlit

Create interactive data visualizations in web browsers with Streamlit.

Community
Advanced
DevanBDevanB

Frontend CSS

Enforce Tailwind utility classes and design system tokens in CSS files.

Community
Basic