skills.rest
ihlamury
ihlamuryCOMMUNITY
Explore all skills by this author →
𝕏@yagizihlamurGitHub

pitch-ui-skills

Enforce Pitch's light mode, Inter font, and 4px grid design constraints.

73|9|Updated Jan 25, 2026
Search Tags:#design system#pitch#ui design#light mode#inter font#4px grid
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill pitch-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pitch-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/pitch
Command: npx skills add https://github.com/ihlamury/design-skills --skill pitch-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with Pitch's aesthetic, ensuring a polished and professional user experience.

Core Features & Use Cases

  • Consistent Design Language: Enforces Pitch's specific use of light mode, Inter font, and a 4px grid for UI elements.
  • Color Palette Guidance: Defines semantic color tokens and usage for backgrounds, text, and accents.
  • Typography Standards: Specifies font families, sizes, weights, and text balancing for clear hierarchy.
  • Spacing and Borders: Mandates a 4px grid for spacing and defines a scale for border-radius and widths.
  • Use Case: When designing a new feature for a presentation tool that needs to feel like a natural extension of Pitch, use these guidelines to ensure the UI elements, typography, and spacing align perfectly with the existing Pitch design system.

Quick Start

Apply the pitch-ui-skills to ensure the new UI uses the Inter font and a 4px grid.

Frequently Asked Questions about pitch-ui-skills

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

FAQPage Schema
How do I build a UI that matches Pitch's design system?▼

Pitch's UI design system relies on light mode, the Inter font, and a 4px grid for spacing and layout. You must also apply defined semantic color tokens, typography scales, and specific border-radius widths to maintain visual consistency.

What is the 4px grid system used for in UI design?▼

A 4px grid system is a layout methodology where all spacing, padding, and element dimensions are multiples of four. Pitch's design system mandates it to ensure pixel-perfect alignment and consistent visual hierarchy across interface components.

How do I apply semantic color tokens for light mode interfaces?▼

Apply semantic color tokens for light mode by using the defined background, text, and accent color variables from the Pitch design system. This ensures proper contrast and consistent usage without hardcoding specific hex values.

Can I use a different font instead of Inter for Pitch-inspired interfaces?▼

No, the Inter font is a strict requirement for building Pitch-inspired interfaces. The design system specifies Inter to ensure clear typography hierarchy and a cohesive, professional user experience across all UI elements.

What are the spacing and border constraints for a Pitch-style design system?▼

The constraints mandate a 4px grid for all spacing and define a specific scale for border-radius and border widths. Adhering to these layout principles ensures pixel-perfect replication of the Pitch aesthetic.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

gusto-ui-skills

Enforce Gusto's UI design system constraints for light-mode interfaces.

Community
Intermediate
gerald-icagerald-ica

superdesign

Analyze codebases to extract UI context and design tokens.

Community
Advanced
ihlamuryihlamury
73

stripe-ui-skills

Enforce Stripe's UI design system constraints for building interfaces.

Community
Intermediate
ihlamuryihlamury
73

raycast-ui-skills

Enforce Raycast's light-mode UI design system with Inter font and a 4px grid.

Community
Intermediate