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

superhuman-ui-skills

Enforce Superhuman's UI design system with Inter font and a 4px grid.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

  • Aesthetic Consistency: Enforces Superhuman's signature light mode, Inter font, and 4px grid system.
  • Design System Adherence: Provides specific guidelines for colors, typography, spacing, and borders.
  • Use Case: When tasked with creating a new email client interface that needs to feel premium and efficient, like Superhuman, this Skill will guide the AI to apply the correct visual styles and spacing.

Quick Start

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

Frequently Asked Questions about superhuman-ui-skills

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

FAQPage Schema
How do I build a light-mode interface with a 4px grid system?▼

Build a light-mode interface with a 4px grid system by enforcing specific color tokens, Inter font typography styles, and border radius scales. This ensures aesthetic consistency for a polished, professional user experience.

What design system constraints ensure a clean, premium email client UI?▼

Design system constraints ensuring a premium email client UI include enforcing light mode, Inter font, and a 4px grid. Specific color tokens, typography styles, spacing rules, and border radius scales guarantee visual consistency.

Can I use this UI design system for dark mode applications?▼

No, you cannot use this UI design system for dark mode applications. It specifically enforces Superhuman's signature light-mode aesthetic and adheres to accessibility standards with a minimum 4.5:1 text contrast ratio.

Does this UI design system meet accessibility contrast standards?▼

Yes, this UI design system meets accessibility contrast standards by enforcing a minimum 4.5:1 text contrast ratio. This ensures the light-mode interface maintains readability and compliance for all users.

What is the best way to apply Superhuman-inspired visual styles to a new interface?▼

The best way to apply Superhuman-inspired visual styles is to use an opinionated design system specifying color tokens, typography, spacing, and borders. This guides the AI to apply the correct light-mode aesthetic automatically.

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
doanchienthangdevdoanchienthangdev
4

design-system-context

Enforce theme-defined CSS variables for colors and border-radius in frontend components.

Community
Intermediate
ihlamuryihlamury
73

anthropic-ui-skills

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

Community
Intermediate
ArogyaReddyArogyaReddy

visual-design-foundations

Define typography, color, spacing, and iconography design tokens for web and mobile UI.

Community
Advanced