Dew Design System
Design Systems
for every craft
Select · Open
Dropdown
Radio Button
Dropdown
Input
Spinner · Loading
000°045°090°
Palette · 4 chips
PRIMARY
dew/500
#276CF0
SUCCESS
fw/teal
#19BB7D
WARNING
fw/orange
#FFA800
DANGER
fw/pink
#DA3757
Button · Primary
Start building
120+
Components
50+
Design Tokens
100%
Accessible
The systemLive

Every state.
Already designed.

Components ship with variants, focus rings, error states, and a11y wired in. Hover, click, or tab through. They behave here exactly as they do in production.

01·button · 4 variants
02·input · 4 states
03·select · single · live
04·badge · 4 semantics
InfoSuccessWarningError
See all 120+ components
Freshworks Design Summit 2025 group photo
Design Summit · Chennai · Mar 2025
Maintainers40+ humans

Built and maintained by the Freshworks design team.

Designers, engineers, and content folks across seven timezones keep Dew shipping.

Pick your pathFour surfaces

Start where you work.

Dew ships in the surfaces you already live in.

BUTTON / PRIMARY
FOR DESIGNERS

Open the source

120+ components with variants, auto-layout, and tokens synced to production code.

Open Figma library
$ pnpm add @freshworks/dew
Added 1 package in 2.4s
▌
FOR DEVELOPERS

Install the package

TypeScript-ready, tree-shakeable, ~12kb gzipped. Works with React, Vue, and plain CSS.

View on GitHub
BEFORE
An error occurred during authentication.
AFTER
Wrong password. Try again.
FOR CONTENTS

Write in the Dew voice

Specific over generic, human over corporate. With patterns for every state you'll hit.

Read voice & tone
PIPELINE4 STAGES
Figma→spec→build→ship
tokens-only · WCAG 2.2
FOR AI BUILDERS

Build with Dew × AI

An agentic pipeline for new components, MCP for AI builders, and a Claude skill for Dew-native copy.

Explore Dew × AI