테마 라이브러리

Toss 웹사이트들에서 추출한 다양한 테마들을 확인하고 적용해보세요.

테마 선택

toss.im

https://toss.im/

www.tossinvest.com

https://www.tossinvest.com/

toss.tech

https://toss.tech/tech

www.tossbank.com

https://www.tossbank.com/

선택된 테마: toss.im

색상 팔레트

테마에서 추출된 주요 색상들입니다.

rgb(0, 0, 0)

rgb(255, 255, 255)

rgb(33, 37, 41)

rgb(0, 123, 255)

rgb(49, 130, 246)

rgb(249, 250, 251)

rgb(176, 184, 193)

rgb(78, 89, 104)

rgb(51, 61, 75)

rgb(209, 214, 219)

rgb(25, 31, 40)

rgba(0, 12, 30, 0.8)

rgb(107, 118, 132)

rgb(139, 149, 161)

rgb(245, 246, 248)

rgb(232, 243, 255)

rgb(27, 100, 218)

타이포그래피

폰트 및 텍스트 스타일 정보입니다.

폰트 패밀리

"Toss Product Sans", Tossface, -apple-system, "system-ui", "Bazier Square", "Noto Sans KR", "Segoe UI", "Apple SD Gothic Neo", Roboto, "Noto Sans KR", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

폰트 크기

16px

폰트 굵기

400

줄 높이

16px

테마 적용 예시

버튼 스타일

현재 테마의 버튼 스타일입니다.

배경색: rgb(49, 130, 246)

텍스트색: rgb(249, 250, 251)

패딩: 11px 16px

카드 스타일

현재 테마의 카드 스타일입니다.

테마 카드 예시

헤더 스타일

현재 테마의 헤더 스타일입니다.

테마 헤더

원본 테마 데이터

JSON 데이터

크롤링된 원본 테마 데이터입니다.

{
  "colors": {
    "color": "rgb(33, 37, 41)",
    "background-color": "rgb(255, 255, 255)",
    "border-color": "rgb(33, 37, 41)",
    "palette": [
      "rgb(0, 0, 0)",
      "rgb(255, 255, 255)",
      "rgb(33, 37, 41)",
      "rgb(0, 123, 255)",
      "rgb(49, 130, 246)",
      "rgb(249, 250, 251)",
      "rgb(176, 184, 193)",
      "rgb(78, 89, 104)",
      "rgb(51, 61, 75)",
      "rgb(209, 214, 219)",
      "rgb(25, 31, 40)",
      "rgba(0, 12, 30, 0.8)",
      "rgb(107, 118, 132)",
      "rgb(139, 149, 161)",
      "rgb(245, 246, 248)",
      "rgb(232, 243, 255)",
      "rgb(27, 100, 218)"
    ]
  },
  "typography": {
    "fontFamily": "\"Toss Product Sans\", Tossface, -apple-system, \"system-ui\", \"Bazier Square\", \"Noto Sans KR\", \"Segoe UI\", \"Apple SD Gothic Neo\", Roboto, \"Noto Sans KR\", \"Helvetica Neue\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
    "fontSize": "16px",
    "fontWeight": "400",
    "lineHeight": "16px"
  },
  "spacing": {},
  "components": {
    "button": {
      "backgroundColor": "rgb(49, 130, 246)",
      "color": "rgb(249, 250, 251)",
      "padding": "11px 16px",
      "borderRadius": "15px",
      "fontSize": "12px",
      "fontWeight": "600"
    }
  },
  "layout": {}
}