This describes what “AbemaTV”, the Internet TV service in Japan, has been practicing and building as a design system at each phase of its development history.

2. YUSUKE GOTO

4. What Design System is
A design system unites product teams around a common
visual language. It reduces design debt, accelerates the
design process, and builds bridges between teams working in
concert to bring products to life. Learn how you can create
your design system and help your team improve product
quality while reducing design debt.

5. What Design System is

6. Questions

7. Conclusion

9. 5 Phases

10. Phase 0

19.
Phase 1
Phase
Motivation
Context

20. Atomic Design

21. Atomic Design

22. Atomic Design

23. Atomic Design

24. Atomic Design

27. Styleguide

28.
Styleguide

31. Phase 1

35. Phase 1

38.
Phase 2
Phase
Motivation
Context

39.
Phase 2
Engineers’ Motivation
Designers’ Motivation

40.
Phase 2
Engineers’ Motivation
Designers’ Motivation

41.
Designers’ Output Efficiency

43. Atomic Design
Making Design Comp More Atomic Designable

45. Phase 2

46. Phase 2

47.
Phase 3
Phase
Motivation
Context

48. Interface Inventory

51.
Phase 4
Phase
Motivation
Context

56. Information Accessibility

57. Color Contrast

58. Color Contrast

59. Color Contrast

60. Color Contrast

61. Color Management

62. Color Management

64.
Phase 5
Phase
Motivation
Context

65. to be continued…

66. Conclusion

67. Atomic Design

68. YUSUKE GOTO