The comprehensive design system foundation for Freshworks Dew 2.0. Beautiful colors, typography, spacing, and more for consistent UI development.
Comprehensive color palettes with semantic tokens for light and dark themes.
Consistent spacing, typography, and numerical values for scalable design systems.
SCSS variables, CSS custom properties, and web components support.
Dew 2.0 comprehensive color system with semantic meanings
Inter font family with consistent weights and sizes
Consistent numerical values for spacing, border radius, and more
How to integrate Dew Styles in your projects
Import specific modules or everything
// Import all styles
@use '@freshworks/dew-styles';
// Or import specific modules
@use '@freshworks/dew-styles/colors' as colors;
@use '@freshworks/dew-styles/numbers' as numbers;
@use '@freshworks/dew-styles/fonts' as fonts;
// Use color variables
.my-component {
background-color: colors.$A500; // Azure 500
color: colors.$S800; // Smoke 800
padding: numbers.$number-16; // 16px
border-radius: numbers.$number-br-m; // 8px
}Use with CSS custom properties
/* Available as CSS custom properties */
.my-component {
background-color: var(--color-azure-500);
color: var(--color-smoke-800);
padding: var(--number-16);
border-radius: var(--number-br-m);
box-shadow: var(--box-shadow-md);
}
/* Theme-aware colors */
.dew-light-theme .card {
background-color: var(--color-neutral-1);
}
.dew-dark-theme .card {
background-color: var(--color-dark-neutral-1);
}Add to your project
# Install the package
npm install @freshworks/dew-styles
# Or with pnpm
pnpm add @freshworks/dew-styles
# Or with yarn
yarn add @freshworks/dew-styles