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

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

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

weights-biases-ui-skills

Enforce Weights Biases UI design with light mode, Inter font, and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

upstash-ui-skills

Enforce Upstash UI design rules for colors, Inter font, and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

clerk-ui-skills

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

Community
Intermediate
dylantarredylantarre
38

dark-mode

Implement dark mode with semantic color tokens, CSS variables, and system preference detection.

Community
Advanced