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

plaid-ui-skills

Enforce Plaid's UI design system with dark mode, Inter font, and 4px grid.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

  • Dark Mode Implementation: Enforces dark backgrounds and specific color palettes suitable for dark themes.
  • Consistent Typography: Utilizes the 'Inter' font family with defined heading and body text styles.
  • Grid-Based Spacing: Adheres to a 4px grid for consistent spacing and layout.
  • Use Case: When designing a new financial dashboard that needs to feel like a Plaid product, use these guidelines to ensure the colors, fonts, and spacing match Plaid's established aesthetic.

Quick Start

Apply Plaid's UI design system to a new interface, ensuring dark mode, Inter font, and a 4px grid are used.

Frequently Asked Questions about plaid-ui-skills

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

FAQPage Schema
How do I build a UI with Plaid's dark mode design system?▼

To build a UI with Plaid's dark mode design system, apply specific dark background color palettes, utilize the Inter font family, and adhere to a strict 4px spacing grid for visual consistency.

What font family and spacing grid does Plaid's UI design system use?▼

Plaid's UI design system uses the Inter font family for consistent heading and body text styles, and it enforces a strict 4px grid for all layout spacing and component dimensions.

Can I use these UI design constraints for a financial dashboard?▼

Yes, you can use these UI design constraints for a financial dashboard to ensure colors, fonts, and spacing match Plaid's established aesthetic and deliver a familiar user experience.

What is the best way to ensure visual consistency in Plaid-inspired interfaces?▼

The best way to ensure visual consistency is to enforce specific guidelines for colors, typography, borders, layout, interactive states, and animation according to Plaid's brand identity constraints.

Does this UI design system include guidelines for interactive states and animations?▼

Yes, this UI design system includes specific guidelines for interactive states and animations alongside rules for colors, typography, spacing, borders, and layout to maintain Plaid's brand identity.

Related Skills

Explore More Design & Creative Skills→
bryanvillamilpragmabryanvillamilpragma
3

tailwind-css-patterns

Provide utility-first CSS patterns for responsive Tailwind CSS layouts.

Community
Intermediate
paradox123paradox123

frontend-design

Generate production-grade frontend interfaces with bold aesthetic and strict design constraints.

Community
Advanced
ihlamuryihlamury
73

planetscale-ui-skills

Enforce Planetscale UI design tokens, dark mode, Inter font, and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

craft-ui-skills

Enforce Craft's UI design constraints for light mode interfaces using Inter font and 4px grid.

Community
Intermediate