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

stripe-ui-skills

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints and guidelines for building user interfaces that are visually consistent with Stripe's design system, ensuring a familiar and high-quality user experience.

Core Features & Use Cases

  • Consistent Design Language: Enforces Stripe's specific color palette, typography, spacing, and border-radius scales.
  • Accessibility Focus: Ensures adherence to minimum text contrast ratios.
  • Use Case: When developing a new feature for a financial application that needs to feel integrated with Stripe's existing products, use this Skill to guide the UI development for colors, fonts, and spacing.

Quick Start

Apply Stripe's UI design system to the new dashboard interface, using the Inter font and a 4px grid for spacing.

Frequently Asked Questions about stripe-ui-skills

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

FAQPage Schema
How do I build a Stripe-inspired UI design system for a financial application?▼

Stripe's UI design system enforces specific semantic color tokens, typography styles with defined sizes and weights, and spacing rules based on a 4px scale to ensure consistent aesthetics across interfaces.

What typography and spacing rules apply when creating Stripe-inspired interfaces?▼

Creating Stripe-inspired interfaces requires using the Inter font with defined typography sizes and weights, alongside strict spacing rules based on a 4px scale grid for layout consistency.

Does the Stripe UI design system support dark mode or only light mode?▼

The Stripe UI design system currently provides guidelines specifically for light mode, ensuring adherence to minimum text contrast ratios for accessibility rather than offering dark mode variations.

How do I maintain accessible color contrast when applying Stripe design system constraints?▼

To maintain accessible color contrast with Stripe design system constraints, use the provided specific semantic color tokens which ensure adherence to minimum text contrast ratios for accessibility.

What are the layout principles for a consistent aesthetic in Stripe UI design?▼

Layout principles for a consistent aesthetic in Stripe UI design involve guiding border-radius usage, applying a 4px grid for spacing, and enforcing specific color palette and typography scales.

Can I use custom color palettes with the Stripe UI design system constraints?▼

Using custom color palettes is not recommended as the Stripe UI design system enforces specific semantic color tokens to maintain a consistent design language and ensure accessibility compliance.

Related Skills

Explore More Design & Creative Skills→
sawzhangsawzhang
3

web-artifacts-builder

Bundle React, Tailwind CSS, and shadcn/ui frontend projects into a single self-contained HTML file for Claude conversations.

Community
Advanced
jubalmjubalm
1

shadcn/ui Customization & Theming

Configure CSS variable-based theming for shadcn/ui components with Tailwind.

Community
Advanced
DanielV-94DanielV-94

awwwards-ui-skills

Enforce Awwwards-style UI design guidelines with Inter font and 4px spacing grid.

Community
Intermediate
yairbedermanyairbederman

figma-to-code

Translate Figma designs into React and Vue UI components with token-driven styling.

Community
Advanced