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

warp-ui-skills

Enforces Warp's UI design system for light-mode interfaces with Inter font and 4px grid.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with Warp's design system, ensuring a cohesive and branded user experience.

Core Features & Use Cases

  • Consistent Design Language: Enforces Warp's specific use of light mode, Inter font, and a 4px grid for UI elements.
  • Accessibility Compliance: Ensures text contrast ratios meet WCAG AA standards.
  • Use Case: Develop a new feature for a SaaS product that needs to match the existing Warp aesthetic, ensuring seamless integration with the rest of the application.

Quick Start

Apply Warp's UI design system to build a light-mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about warp-ui-skills

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

FAQPage Schema
How do I build a light-mode interface that follows the Warp UI design system?▼

To build a Warp-style interface, apply enforced constraints using the Inter font, a 4px grid, specific color palettes, typography scales, spacing rules, and border-radius values to ensure visual consistency.

Does this UI design system enforce accessibility standards for light mode?▼

Yes, the UI design system enforces accessibility by ensuring text contrast ratios meet WCAG AA standards and maintaining interactive state consistency throughout the light-mode interface.

What is the best way to match the Warp aesthetic for a new SaaS feature?▼

The best way to match the Warp aesthetic is to apply an opinionated design system that enforces specific light-mode palettes, Inter typography scales, 4px grid spacing, and consistent border-radius values.

Can I use this design system to enforce a 4px grid and Inter font spacing rules?▼

Yes, you can use this design system to enforce a 4px grid layout and specific Inter font typography scales, ensuring that all UI elements adhere to strict spacing and visual consistency rules.

When do I need to enforce a specific UI design system for my application?▼

You need to enforce a UI design system when developing new features for a SaaS product that require seamless integration with an existing branded aesthetic, ensuring a cohesive user experience across the application.

Related Skills

Explore More Design & Creative Skills→
HeartcoolmanHeartcoolman
88

warp-ui-guidelines

Provide UI coding guidelines for the Warp client design system.

Community
Intermediate
hschnehschne
1

design-principles

Apply named aesthetic philosophies to frontend UI builds and critiques.

Community
Intermediate
ihlamuryihlamury
73

gusto-ui-skills

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

Community
Intermediate
0xrafasec0xrafasec
9

rlabs-design

Generate branded Rlabs interfaces and assets using the design system.

Community
Advanced