Best Practices
1. Fundamentals
Frames
Always initiate your designs using frames. This promotes clarity and ensures consistent spacing and layout across all design components.
Grid System and Mobile First Approach
Incorporate the grid system presets and adopt a mobile-first approach when applicable. This ensures that your designs are structured for optimal usability and responsiveness, starting from smaller screens and scaling up to larger ones.
Auto-layout
Always utilize the auto-layout feature. It aids in creating responsive designs and ensures consistency across various screen sizes, making your components more flexible and maintainable.
Measurement System
Utilize Tailwind CSS preset values for measurements whenever possible. This approach simplifies design consistency and aligns with industry standards, ensuring seamless integration with development processes.
Design Tokens
Implement design tokens for spacing, typography, colors, and other design properties. This creates a single source of truth that bridges design and development, making updates more efficient and consistent.
2. Keep it Consistent
Colors
All color selections should be made from the established color library. This guarantees brand consistency and prevents the inadvertent use of non-compliant or off-brand colors.
Fonts
Only use fonts from the organization's library. This ensures brand consistency and readability across all designs.
Component States
Design and document all component states (default, hover, focus, active, disabled, loading) to ensure consistent user interactions across the system.
Naming Conventions
Establish and follow clear naming conventions for components, variants, and properties. Use descriptive, consistent names that make the system easy to navigate and understand.
3. Reduce, Reuse, Recycle
Reuse Over Redundancy
Before creating a new component, check for existing ones. Reusing components maintains design consistency and reduces design debt.
Custom Components
If a specific requirement cannot be met using existing components, you may design a custom one:
Construct custom components using the existing atomic structure (atoms, molecules, etc.)
Always notify the universal design team of any new components you introduce. This aids in the component's documentation and ensures it's potentially integrated into our design system
Submit a new Component Proposal for review and approval
Component Variants
Create meaningful variants that cover common use cases while avoiding over-engineering. Focus on flexibility without complexity.
Documentation
Maintain comprehensive documentation for each component including:
Usage guidelines
Do's and don'ts
Code examples
Accessibility notes
4. Be Inclusive
WCAG Standards
All designs should, at the very least, meet the A level of WCAG standards. However, we aim for the AA level whenever feasible.
Accessibility Assessment
Before finalizing any design:
Conduct a thorough accessibility review
Ensure that elements such as color contrast, font sizes, and interactive components are compliant and user-friendly for all, including those with disabilities
Test with screen readers and keyboard navigation
Consider users with cognitive disabilities in your design decisions
Only after the accessibility criteria are met should the design be integrated into the style guide or passed on to developers
Inclusive Language
Use inclusive, clear, and simple language in all UI copy and documentation. Avoid jargon, idioms, or culturally specific references that may not translate across diverse user groups.
International Considerations
Design with internationalization in mind:
Allow for text expansion in different languages
Consider right-to-left reading patterns
Use universally understood icons and symbols
5. Collaborate & Document
Peer Reviews
Before finalizing a design, seek feedback from peers. Collaborative reviews often bring to light potential improvements and help in maintaining design cohesion.
Document Rationale
Always provide a brief rationale for your design choices. This makes it easier for others to understand your design decisions and ensures a smoother hand-off process.
Version Control
Maintain clear version history and document changes made to components or the system itself. This helps track evolution and reasoning behind updates.
Cross-functional Collaboration
Include developers in design reviews to ensure feasibility
Work closely with product managers to align on user needs
Collaborate with content strategists on messaging and tone
6. Maintain & Evolve
Regular Audits
Conduct periodic audits of the design system to:
Identify unused or outdated components
Ensure consistency across all touchpoints
Validate that components still meet user needs
Feedback Loops
Establish channels for collecting feedback from:
Designers using the system
Developers implementing components
End users through usability testing
Stakeholders across the organization
Performance Considerations
Monitor and optimize for:
Component load times
File sizes and asset optimization
Development efficiency and implementation speed
Governance
Assign clear ownership and maintenance responsibilities
Establish processes for requesting changes or additions
Create guidelines for deprecating outdated components
Set up regular review cycles for system health
7. Quality Assurance
Testing Strategy
Implement automated testing for design tokens and component consistency
Conduct regular cross-browser and cross-device testing
Validate components work correctly in different contexts
Error Handling
Design and document error states for all interactive components, ensuring users receive clear feedback when things don't work as expected.
Performance Monitoring
Track key metrics such as:
System adoption rates
Component usage patterns
Development velocity improvements
User satisfaction scores
Quick Reference Checklist
Before submitting any design work, ensure you've:
Last updated: [Date] | For questions or suggestions, contact the Design Systems Team
Last updated
Was this helpful?