SPIDesign System

Foundation Overview

SPI 디자인 시스템의 기초를 이루는 시각적, 구조적 토큰 가이드입니다.

Foundation

Foundation은 SPI(Seoul Property Insight) 디자인 시스템의 근간이 되는 핵심 토큰들의 모음입니다. 제품 전체에 걸쳐 일관된 브랜드 정체성과 사용자 경험을 제공하기 위해 모든 UI 컴포넌트는 이곳에 정의된 Foundation 토큰을 기반으로 제작됩니다.

포함된 디자인 기초

  • Colors: 브랜드 정체성을 표현하는 색상 팔레트와 쓰임새에 맞게 추상화된 시맨틱 컬러 매핑
  • Typography: Pretendard 폰트를 기반으로 한 타입 스케일 및 재사용 가능한 합성 프리셋
  • Spacing: 레이아웃과 컴포넌트 간의 공백을 제어하는 간격 시스템
  • Radius: 인터랙티브 요소와 컨테이너의 모서리 둥글기 일관성
  • Elevation: UI 요소의 계층을 시각적으로 띄워서 분리하는 그림자 체계
  • Animation: 부드러운 전환과 사용자 피드백을 위한 시간 스케일 및 모션 프리셋
  • Dark Mode: 어두운 환경에서도 가독성과 심미성을 잃지 않는 다크 모드 테마 전략 및 적용 방법

자세한 토큰 값과 사용 가이드는 왼쪽 사이드바의 하위 메뉴를 통해 하나씩 확인하실 수 있습니다.

On this page