slack-ui-skills

Enforce Slack UI design constraints for light-mode interfaces with Inter font and 4px grid.

73|9|Updated Jan 25, 2026

Search Tags:#typography #design system #color palette #slack #ui design #light mode

Ready to run

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

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints and guidelines for building user interfaces that are visually consistent with Slack's design system, ensuring a familiar and intuitive user experience.

Core Features & Use Cases

Consistent Styling: Apply Slack's specific color palette, typography (Inter font), and spacing (4px grid) to UI elements.
Accessibility: Enforces minimum text contrast ratios for better readability.
Use Case: When designing a new internal communication tool, use this Skill to ensure it adopts the clean, light-mode aesthetic and familiar UI patterns of Slack.

Quick Start

Apply Slack's UI design system to a new web application, ensuring adherence to its color palette, Inter font, and 4px grid.

Frequently Asked Questions about slack-ui-skills

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

FAQPage Schema

How do I build a UI design system that matches Slack's light mode aesthetic?▼

Build a Slack-inspired light mode interface by enforcing the Inter font family, a 4px grid for spacing, and predefined semantic color tokens. This ensures visual consistency and familiar user experience for internal communication tools.

What typography and spacing rules are required for Slack UI design?▼

Slack UI design requires the Inter font family with specific font sizes and weights. Layout spacing must follow a strict 4px grid system, and border radius scales are predefined to maintain component visual hierarchy across the interface.

Can I use this to style interactive states for buttons and inputs?▼

Yes, you can style buttons and inputs by applying component-specific styling rules. The guidelines detail interactive states and animation behaviors to ensure elements respond consistently within the Slack design system.

Does the Slack design system support dark mode interfaces?▼

No, the Slack design system constraints provided here are specifically for building light-mode interfaces. They focus entirely on light mode color palettes, minimum text contrast ratios, and light-themed semantic color tokens.

What viewport dimensions does the Slack UI layout target?▼

The Slack UI layout targets a 1920px viewport, detailing specific layout dimensions to ensure proper rendering. This allows you to design web applications that scale correctly within standard desktop display environments.