discord-ui-skills

Enforce Discord's light-mode UI design system with Inter font and 4px grid.

73|9|Updated Jan 25, 2026

Search Tags:#design system #discord #ui design #light mode #inter font #4px grid

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with Discord's light mode aesthetic, ensuring a familiar and high-quality user experience.

Core Features & Use Cases

Consistent Design Language: Enforces Discord's specific use of the Inter font, a 4px grid system, and a defined color palette.
Accessibility Standards: Ensures text contrast ratios meet accessibility requirements.
Use Case: When designing a new community platform or a feature that needs to feel like a native part of Discord, use these guidelines to maintain visual fidelity and user familiarity.

Quick Start

Apply Discord's UI design system to a new web application interface.

Frequently Asked Questions about discord-ui-skills

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

FAQPage Schema

What design system constraints are needed to build Discord-style interfaces?▼

Discord-style interfaces require the Inter font, a 4px grid system, defined color tokens for light mode, and specific spacing and border-radius scales to ensure visual consistency.

How do I apply Discord's light mode UI design system to a new web application?▼

Apply Discord's UI design system by enforcing its light-mode color palette, Inter typography, 4px grid spacing rules, and interactive button states to maintain visual fidelity and user familiarity.

Does the Discord UI design system meet accessibility contrast ratios for light mode?▼

Yes, the Discord UI design system specifies color tokens that adhere to accessibility contrast ratios, ensuring text meets accessibility requirements in light-mode interfaces.

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

No, this Skill specifically enforces Discord's UI design system for light-mode interfaces, focusing on light-mode color tokens and accessibility standards rather than dark mode.

What typography and spacing rules are enforced by the Discord UI design system?▼

The Discord UI design system enforces the Inter font for typography and a strict 4px grid system for spacing, alongside defined border-radius scales and focus indicators.

When should I use Discord's UI design system constraints for my project?▼

Use Discord's UI design system constraints when designing a community platform or feature that needs to feel like a native part of Discord, ensuring a familiar user experience.