robinhood-ui-skills

Enforce Robinhood's UI design system constraints for dark mode interfaces with Inter font and a 4px grid.

73|9|Updated Jan 25, 2026

Search Tags:#frontend #design system #constraints #ui design #dark mode #robinhood

Ready to run

npx skills add https://github.com/ihlamury/design-skills --skill robinhood-ui-skills

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: robinhood-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/robinhood
Command: npx skills add https://github.com/ihlamury/design-skills --skill robinhood-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with Robinhood'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.
Typography & Spacing: Guides the use of the 'Inter' font family, a 4px grid system, and consistent text styles.
Component Styling: Defines specific styles for buttons, borders, and interactive states (focus, hover, disabled).
Use Case: When developing a new feature for a financial trading platform that needs to match Robinhood's established aesthetic, use this Skill to ensure all UI elements, from buttons to text, adhere to the correct design principles.

Quick Start

Apply Robinhood's UI design system constraints to build a dark mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about robinhood-ui-skills

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

FAQPage Schema

How do I build a dark mode interface that matches Robinhood's UI design system?▼

To build a Robinhood-style dark mode interface, apply specific UI design system constraints using the Inter font family and a 4px grid. This enforces consistent color palettes, typography scales, spacing rules, and border styles for high-quality visual consistency.

What color palettes and typography rules are used in Robinhood-style frontend design?▼

Robinhood-style frontend design uses the Inter font family on a 4px grid system. It enforces specific dark background color palettes, consistent text styles, and typography scales that adhere to accessibility standards for text contrast.

How do I ensure accessible text contrast in a dark mode financial trading platform UI?▼

Ensure accessible text contrast in a dark mode trading platform UI by enforcing specific dark background color palettes and typography constraints. The system adheres to established accessibility standards for text contrast and interactive states.

Can I use these UI design constraints for platforms other than financial trading apps?▼

You can use these UI design constraints for any platform, though they are optimized for financial trading apps needing a Robinhood aesthetic. The 4px grid, Inter font, and dark mode palettes apply broadly to consistent component styling.

What are the limitations of using a strict 4px grid system for frontend UI design?▼

A strict 4px grid system for frontend UI design limits spacing flexibility to multiples of four. This constraint ensures consistent layout alignment and spacing rules, but may require adjustments for custom or non-standard component dimensions.