Foundation/ColorColor PaletteGray 01002003004005006007008009001000Gray Chromatic 0100200300400500600700800900CarrotBlueGreenYellowRedPurple Tokens 이름값$color.palette.blue-100 #eff6ff$color.palette.blue-200 #e2edfc$color.palette.blue-300 #cbdffa$color.palette.blue-400 #aacefd$color.palette.blue-500 #85b8fd$color.palette.blue-600 #5e98fe$color.palette.blue-700 #217cf9$color.palette.blue-800 #135fcd$color.palette.blue-900 #0b4596$color.palette.blue-1000 #032451$color.palette.carrot-100 #fff2ec$color.palette.carrot-200 #ffe8db$color.palette.carrot-300 #ffd5c0$color.palette.carrot-400 #ffb999$color.palette.carrot-500 #ff9364$color.palette.carrot-600 #ff6600$color.palette.carrot-700 #e04f00$color.palette.carrot-800 #b93901$color.palette.carrot-900 #862b00$color.palette.carrot-1000 #471601$color.palette.gray-00 #ffffff$color.palette.gray-100 #f7f8f9$color.palette.gray-200 #f3f4f5$color.palette.gray-300 #eeeff1$color.palette.gray-400 #dcdee3$color.palette.gray-500 #d1d3d8$color.palette.gray-600 #b0b3ba$color.palette.gray-700 #868b94$color.palette.gray-800 #555d6d$color.palette.gray-900 #2a3038$color.palette.gray-1000 #1a1c20$color.palette.green-100 #edfaf6$color.palette.green-200 #d9f6e9$color.palette.green-300 #b9e9d2$color.palette.green-400 #7ddcb3$color.palette.green-500 #42c593$color.palette.green-600 #10ab7d$color.palette.green-700 #079171$color.palette.green-800 #00745f$color.palette.green-900 #075445$color.palette.green-1000 #0a2b24$color.palette.purple-100 #f5f3fe$color.palette.purple-200 #efeafe$color.palette.purple-300 #e1d8ff$color.palette.purple-400 #d0c0ff$color.palette.purple-500 #b8a1ff$color.palette.purple-600 #9f84fb$color.palette.purple-700 #8969ea$color.palette.purple-800 #6d50cb$color.palette.purple-900 #50379b$color.palette.purple-1000 #29175d$color.palette.red-100 #fdf0f0$color.palette.red-200 #fde7e7$color.palette.red-300 #fed4d2$color.palette.red-400 #feb7b3$color.palette.red-500 #fe928d$color.palette.red-600 #fc6a66$color.palette.red-700 #fa342c$color.palette.red-800 #ca1d13$color.palette.red-900 #921708$color.palette.red-1000 #4a1209$color.palette.static-black #000000$color.palette.static-white #ffffff$color.palette.static-black-alpha-50 #0000000d$color.palette.static-black-alpha-200 #00000033$color.palette.static-black-alpha-500 #00000080$color.palette.static-white-alpha-200 #ffffff33$color.palette.static-white-alpha-800 #ffffffcc$color.palette.yellow-100 #fff7de$color.palette.yellow-200 #fdefb9$color.palette.yellow-300 #fbdc65$color.palette.yellow-400 #e9c647$color.palette.yellow-500 #d4ab28$color.palette.yellow-600 #c49725$color.palette.yellow-700 #9b7821$color.palette.yellow-800 #755b22$color.palette.yellow-900 #4f3e1f$color.palette.yellow-1000 #2c2512Color Roles역할이 부여된 색상은 색상에 특정 기능적 역할(주요 액션, 오류, 정보 등)을 할당하여 사용자 인터페이스 전반에 걸쳐 일관성, 명확성, 접근성을 보장합니다.Overview타이포그래피는 콘텐츠를 명확하고 효율적으로 표현하기 위한 디자인 요소입니다.