Slack Block Kit

Free

Dark Mode

Figma Design Systems: Slack Block Kit UI Framework

The Slack Block Kit is the main UI framework for building app surfaces inside Slack. This design system works differently from traditional web frameworks. Instead of HTML and CSS, you stack individual blocks using structured JSON. These blocks create app surfaces like messages, modals, and the App Home. This process ensures all third-party applications automatically inherit the native Slack look and feel. Therefore, developers and designers consistently create visually rich and interactive communication. They do this without worrying about platform fragmentation. The Block Kit Builder is an invaluable sandbox. It lets you visually configure and instantly preview the JSON output. This resource is a critical component of successful Figma design systems integration.

Core Technology: Figma Design System Components and Bolt

Block Kit is a fundamental JSON specification. However, developers use several languages and frameworks to generate and manage this JSON payload effectively.

Primary Languages: The Slack Bolt framework is the recommended open-source toolkit. Bolt is available for JavaScript/Node.js, Python, and Java. In addition, developers using other languages like C# or Go simply construct the correct JSON object to use Block Kit.
Structure: The UI relies on three main elements: Blocks (visual layouts), Block Elements (interactive components like buttons), and Composition Objects (defines text and options).
Outbound Tooling: The Bolt SDK is a key feature for maintainability. It actively handles complex tasks like token rotation and rate limiting. This lets your teams focus entirely on application logic. To explore a similar API-first approach, review the Twilio Paste Design System documentation.

Theming and Figma Design Systems Architecture

The Slack platform manages the visual styles of Block Kit elements natively. This approach guarantees perfect consistency with the user’s selected theme.

Dark Mode Support: Yes, the system inherently supports it. The Slack client renders all Block Kit components. Consequently, the components automatically inherit the user’s color mode preference (Light Mode, Dark Mode, or system-synced mode). Designers must focus only on providing sufficient contrast for custom text and images. They rely on the system to handle all component-level theming.
Design Tokens Support: No direct support for developers. The application only supplies a JSON structure. Instead, Slack’s internal system manages the color assignments and styles. This shields app builders from managing styling details.