Proportio.app은 디자이너들이 디자인 시스템의 기초를 만들 수 있는 웹 애플리케이션 서비스

타이포그래피 스케일과 아이콘, 사이즈, 간격, 컴포넌트의 구성에 적용할 수 있는 방법을 탐색할 수 있습니다. 비례적인 디자인 시스템을 사용하면 컴포넌트의 사이즈와 밀도를 쉽게 조절할 수 있습니다.

Proportio.app은 기본 폰트 사이즈와 스케일 인자(예: 미네르바 삼등분(1:1.125))를 사용하여 타입 스케일을 정의합니다. 다른 폰트 사이즈는 이 비율에 기반하여 생성됩니다. 타입 스케일은 디자인 시스템의 중요한 요소인 타이포그래피와 아이콘 페어링에도 자동으로 적용됩니다. 텍스트와 아이콘 사이의 간격도 비례적으로 조정되어 균형감 있게 보입니다. 또한 비례적인 사이징 스케일, 반경 스케일, 그리고 그림자 스케일도 만들 수 있습니다.

컴포넌트 시스템에서는 가장 흥미로운 부분입니다. 기본 시스템을 만든 후에는 타입 스케일 또는 간격 스케일 중 하나를 선택하여 컴포넌트의 패딩과 높이를 조절할 수 있습니다. 기본(디폴트) 사이즈의 컴포넌트는 기본 타입 사이즈(기본값은 16px)를 사용합니다. 작거나 큰 사이즈를 추가할 수 있으며, 이들은 UI에서 선택한 스케일에 따라 생성됩니다. 밀도 옵션도 추가할 수 있습니다. 밀도는 사이즈와 비슷하지만 텍스트와 아이콘의 사이즈는 동일하게 유지되고 패딩과 높이만 변경됩니다. 이들도 스케일에 따라 생성되며, 밀도가 증가하거나 감소하는 비율을 수정할 수 있습니다.