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

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
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill discord-ui-skills
Or copy as Structured Prompt for Agent▼
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.

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
ihlamuryihlamury
73

miro-ui-skills

Enforce Miro's UI design system constraints for light-mode interfaces with Inter font and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

beehiiv-ui-skills

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

Community
Intermediate
joabeoliveirajoabeoliveira

Design System Gov-Tech

Create consistent, accessible Gov-Tech design systems with Tailwind and Shadcn/UI.

Community
Intermediate