A design system to keep design consistent and unify Everledger’s multi vertical platforms

With the ambition to unify Everledger’s multi verticals platforms, we created a design system containing three different articulations of the brand. The directions called Focused, Professional and Trusted each express the brand in a unique way and can be used appropriately. The toolkit has 70+ component which have a document page, displays a detailed view of how to use the directions in a number of applications ranging from styling, interaction, varients, accessibility , and marketing. The design system is used for all platforms in Everledger.

What is atomic design methodology

Atomic Design is a visual identity system methodology that separates the entire process when developing visual systems in a more organized way using atoms, molecules, organisms, templates, and pages.

Impact

1. Reduced high-fidelity design working time by 30-40%.

2. The design system has improved consistency and coherence across projects and designs.

3. Design systems with mobile optimization guidelines improved engagement by making the product easily accessible on a variety of devices, allowing users to interact on-the-go.

Component

List of all Components

1. Design Checklist

2. Colour

3. Iconography

4. Grids layout and spacing

5. Language and tone

6. Typography

7. Illustration

8. Avatars

9. Alert

10. Buttons

11. Checkbox

12. Carousel

13. Chips

14. Dropdown button

15. Banner & profile picture

16. Dropdown menu

17. File uploaded

18. Input field

19. Links

20. Loaders

21. Radio button

22. Read-Only Text

23. Sliders

24. Tabs

25. Template dialogue

26. Template button

27. Toggles

28. Toggles buttons

29. Tooltip

30. Provenance page

31. Alerts and Errors rules

32. Accordion

33. Baseball Card

34. Breadcrumbs

35. Button Groups

36. Badges

37. Credentials

38. Data Tables

39. Date Picker & Range

40. Email & Company Tile

41. Header Upload

42. Information Card

43. Input field with button

44. Material Value Cards

45. Modal Window

46. Modules

47. Navigation

48. Pagination

49. Progress bar

50. Stepper

51. Split View Tile-Accordion

52. Search & Filter Bar

53. Supply Chain Cards

54. Tabs Navigation

55. Task Tiles

56. Video Player

57. Wizard

58. Filter drawer

Future updates

• Created a system design for someone who wants to add or update a component in design system.

• Created a list of where all a component is used to consider what will be the affected area from updating a particular component.

Produced at Everledger

Design team: Ankit Jhanwar, Melissanthi Papacharalampous

Collaborator: Samantha Pereira, Kelly Anne Weiss, Bhavin Shiroya, Xin Lin, Jialin wang, Rohan Kacha