디자인 시스템은 예쁜 스타일 파일이 아니라, 바뀌는 값과 안 바뀌는 값을 분리하는 규칙이다.
이 사이트에서는 색, 간격, 반경, 그림자, 버튼, 카드 같은 값들을 theme-vars 계층에 모아 두고, 각 페이지는 그 토큰만 소비하게 한다.

장점

  • 페이지별 스타일이 서로 다르게 퍼지는 것을 막는다.
  • 새로운 언어가 추가되어도 같은 컴포넌트를 반복할 수 있다.
  • 메뉴와 본문이 서로 다른 레이아웃처럼 보이지 않는다.

결국 유지보수 관점에서 가장 중요한 것은, 스타일을 고치기 위해 여러 파일을 동시에 뜯지 않아도 되는 구조다.