Designers
Design consistent, scalable, and delightful user experiences with Dew. From wireframes to high-fidelity mockups—everything you need to create world-class interfaces for Freshworks products.
Why Dew Makes You a More Effective Designer
Dew isn't just a component library—it's a complete design ecosystem that lets you focus on solving user problems instead of recreating UI patterns.
Design 3x Faster
Pre-built components and patterns accelerate your workflow
Accessibility Built-In
WCAG 2.2 AA compliant from day one—no retrofitting needed
Design-Dev Sync
Figma variants map directly to code props—zero guesswork
Cross-Product Consistency
Same patterns across all Freshworks products build user trust
Dew Design Principles
These four principles guide every design decision in Dew. When in doubt, return to these foundations.
Clarity First
Every element should have a clear purpose. Remove the unnecessary.
Effortless Flow
Design paths that feel natural. Minimize cognitive load at every step.
Human-Centered
Empathize with real user needs. Design for diverse abilities and contexts.
Systematic Consistency
Use the system. Don't reinvent patterns that already exist in Dew.
Your Design Workflow with Dew
From ideation to handoff, Dew integrates seamlessly into every stage of your design process.
Discovery & Ideation
Design & Iteration
Collaboration & Handoff
What's Inside Dew
Dew provides everything you need to design production-ready interfaces—from foundational tokens to complex interaction patterns.
Foundations
The visual DNA of Dew. Design tokens for color, typography, spacing, elevation, and motion—all synced between Figma and code.
Components
50+ production-ready components covering everything from buttons to data tables. Each includes variants, states, and usage documentation.
Patterns & Templates
Complex interaction patterns and page templates for common use cases. Save hours by starting with proven solutions.
Accessibility Guidelines
All Dew components meet WCAG 2.2 AA standards. Learn how to design inclusive experiences that work for everyone.
- ✓Keyboard navigation support
- ✓Screen reader optimization
- ✓Color contrast validation
- ✓Focus indicators on all interactive elements
Figma Libraries & Assets
Everything you need to design in Figma—from component libraries to icon sets and starter templates.
Dew for Figma
Our Figma library is the single source of truth for all Dew components. Enable the library in your file to access 50+ components with full variant support, auto-layout, and design tokens that sync with production code.
Starter Templates
Pre-built pages and flows for common use cases—login, dashboards, settings
Illustration Library
Empty states, onboarding graphics, and spot illustrations
Design Guidelines
Best practices, do's and don'ts, and usage examples for every component
Design Best Practices
Tips from the Dew team to help you design faster and avoid common pitfalls.
Start with existing patterns
Before designing a new component, search the library. Someone may have already solved this problem.
- • Search components first
- • Reference Storybook docs
- • Ask in design community
- • Create one-off solutions
- • Ignore existing patterns
Use design tokens, not hard-coded values
Always use Dew's color and spacing tokens. This ensures your designs stay consistent and update automatically.
- • Apply Figma styles
- • Use token variables
- • Match production tokens
- • Type hex codes manually
- • Use custom spacing values
Design for edge cases
Consider long text, empty states, loading states, and errors. Don't just design the happy path.
- • Show loading states
- • Handle overflow
- • Include error messages
- • Only design success states
- • Ignore edge cases
Validate accessibility early
Check color contrast, keyboard navigation, and screen reader support as you design—not after.
- • Run contrast checks
- • Test keyboard flow
- • Add ARIA labels
- • Retrofit accessibility later
- • Rely only on color
Get Help & Connect
Join the Dew design community for support, feedback, and collaboration.
Design Community
Connect with other designers using Dew. Share feedback, ask questions, and showcase your work.
- Weekly design critique sessions
- Slack channel: #dew-design
- Monthly office hours with design system team
Documentation & Tutorials
Step-by-step guides, video tutorials, and detailed documentation for every Dew component and pattern.
Ready to Design with Dew?
Access the Figma library, browse components, or connect with the design community to get started.