Principle:Langgenius Dify DesignSystem
| Knowledge Sources | Dify |
|---|---|
| Domains | Frontend, Design, UI |
| Last Updated | 2026-02-12 07:00 GMT |
Overview
Design System establishes the shared Tailwind theme configuration, CSS variable definitions, and typography scales that form the visual foundation of the Dify frontend.
Description
The Design System principle defines the visual language and styling infrastructure that ensures consistency across all Dify frontend surfaces. At its core is a shared Tailwind CSS configuration that extends the default theme with custom color palettes, spacing scales, border radii, shadow definitions, and breakpoint values specific to the Dify design language. This configuration is shared across the main application and any sub-packages to guarantee visual coherence.
CSS custom properties (variables) provide the runtime layer of the design system, enabling dynamic theme switching between light and dark modes without rebuilding the application. The variable definitions establish a comprehensive token system covering colors, spacing, typography, and elevation. These tokens serve as the single source of truth for visual values, and components reference tokens rather than raw values, ensuring that theme changes propagate consistently throughout the interface.
Typography scales define a harmonious set of font sizes, line heights, and font weights that maintain readability and visual hierarchy across the application. The scales are designed to work with the spatial grid defined in the Tailwind configuration, ensuring that text elements align properly with surrounding layout components. The typography system accounts for different content contexts, providing distinct scales for application UI, documentation content, and marketing pages.
Usage
Use this principle when:
- Extending the shared Tailwind configuration with new design tokens or utility classes
- Defining or modifying CSS custom property values for theme tokens
- Establishing typography scales for new content contexts or responsive breakpoints
Theoretical Basis
The Design System principle is grounded in the design token methodology pioneered by Salesforce's Lightning Design System, where visual decisions are abstracted into semantic tokens that can be consumed by multiple platforms. The typography scale follows modular scale theory, where font sizes relate to each other through a consistent mathematical ratio. The CSS custom property approach implements the Strategy pattern, allowing the visual presentation to be swapped at runtime without changing component structure.