oodot 디자인 시스템
oodot의 모든 서비스가 같이 쓰는 색, 글자, 간격, 부품입니다. 두 줄을 불러오면 바로 쓸 수 있습니다.
<link rel="stylesheet" href="https://design.oodot.top/tokens.css"> <link rel="stylesheet" href="https://design.oodot.top/components.css">
라이트 모드만 있습니다. 글꼴(Pretendard)은 tokens.css 가 함께 불러옵니다.
2. 부품 쓰기
od- 로 시작하는 이름을 붙입니다.
<button class="od-btn od-btn--primary">저장</button>
3. 값만 쓰기
부품 없이 직접 만들 때도 숫자 대신 토큰을 씁니다.
padding: var(--od-space-4); color: var(--od-text-secondary);
4. 모달·시트·메뉴를 쓰면
motion.js 를 불러옵니다. data-open="아이디" 를 단 버튼이 그 창을 열고, .od-sheet[data-draggable] 은 끌어서 닫을 수 있습니다.
<script src="https://design.oodot.top/motion.js"></script>
색
화면의 대부분은 차가운 회색입니다. 파랑은 누르면 무슨 일이 일어나는 것과 내가 넣은 값에만 씁니다. 지금 있는 자리와 고른 것은 검정으로 나타냅니다.
회색
gray-0
#ffffff
gray-25
#fbfbfd
gray-50
#f5f5f7
gray-100
#ededf0
gray-200
#e1e1e6
gray-300
#cfcfd6
gray-400
#8a8a90
gray-500
#6e6e73
gray-600
#5a5a61
gray-700
#4a4a52
gray-800
#2e2e33
gray-900
#1d1d1f
파랑
blue-50
#eef3ff
blue-100
#dde6ff
blue-200
#bccfff
blue-300
#93b0ff
blue-400
#5c88fa
blue-500
#2a64f6
blue-600
#1c4fd8
blue-700
#1740ad
blue-800
#163683
파랑 · 버튼, 링크, 초점, 체크와 스위치
검정 · 지금 자리, 고른 탭, 걸린 조건
상태 색 · 포인트와 같은 무게로 쓰지 않습니다
글자
Pretendard 하나를 크기와 굵기로만 나눕니다. 큰 글씨는 자간을 좁게, 작은 글씨는 넓게 둡니다.
56px
40px
32px
26px
21px
18px
16px
14px
13px
12px
간격과 모서리
간격은 4의 배수, 모서리는 쓰는 곳에 따라 일곱 단계입니다.
xs · 4px
sm · 6px
md · 8px
lg · 12px
xl · 16px
2xl · 22px
full · 999px
그림자
페이지에 붙은 카드는 테두리를 쓰고, 그림자는 메뉴, 토스트, 모달처럼 위에 뜨는 것에만 씁니다.
움직임
색과 투명도는 CSS transition 으로 바꿉니다. 시트, 메뉴, 모달처럼 움직이는 도중에 다시 잡을 수 있는 것은 motion.js 의 스프링을 씁니다.
| 토큰 | 값 | 쓰는 곳 |
|---|---|---|
| --od-duration-instant | 90ms | 눌림 표시 |
| --od-duration-fast | 140ms | 색 · 투명도 |
| --od-duration-base | 220ms | 열고 닫기 |
| --od-duration-slow | 340ms | 큰 면의 이동 |
| --od-ease-out | cubic-bezier(0.32, 0.72, 0, 1) | 들어올 때 |
| --od-ease-in | cubic-bezier(1, 0, 0.68, 0.28) | 나갈 때 |
레이아웃
내용에 맞는 최대 폭을 고릅니다. 화면이 바뀌는 폭은 900px, 600px 두 곳입니다.
버튼
한 화면에 주 버튼은 하나입니다. 지우기처럼 되돌릴 수 없는 일만 빨강을 씁니다.
입력과 고르기
초점이 오면 파란 고리가 생깁니다.
표식
배지는 상태를 알리고 누를 수 없습니다. 칩은 사람이 고른 조건이고 눌러서 빼거나 고를 수 있습니다.
담는 것
카드, 목록, 표. 페이지에 붙은 면은 테두리를, 위에 뜨는 면은 그림자를 씁니다. 표의 숫자는 오른쪽 정렬, 고정폭입니다.
테두리만. 페이지에 붙어 있는 면
마우스를 올리면 1px 떠오름
그림자만. 다른 내용 위에 뜰 때
알림
계속 봐야 하는 내용은 콜아웃, 방금 한 일의 결과는 토스트, 되돌릴 수 없는 일의 확인은 모달을 씁니다. 토스트에는 버튼을 넣지 않습니다.
겹치는 것
모달과 시트는 되돌릴 수 없는 일을 확인하거나, 지금 하던 일을 끝내야 넘어갈 수 있을 때만 씁니다. esc 와 바깥 누르기로 닫힙니다.
지우면 되돌릴 수 없습니다.
기다림
남은 양을 알면 막대, 모르면 동그라미, 나올 화면 모양을 알면 뼈대를 씁니다. 뼈대는 실제 내용과 같은 크기로 그립니다.
막대 · 남은 양을 앎
동그라미 · 모름
뼈대 · 모양을 앎
빈 화면
왜 비었는지와 다음에 할 수 있는 일을 적습니다.
첫 페이지를 만들면 주소가 함께 생깁니다.
페이지 만들기글자를 줄이거나 다른 말로 찾아보세요.
조건 지우기자잘한 것
링크, 사람 표시, 자판 키, 구분선. 구분선은 간격만으로 나뉘지 않을 때 씁니다.
바뀐 것
- v1.2.0준비 중새 oodot.top 홈반투명 상단바와 폰 메뉴, 2 : 1 배너 규격, 아래에서 올라오는 토스트, 5칸 바닥을 공용 부품으로 옮깁니다. 홈에서 파란 면을 넓게 쓰는 것은 아직 쓰는 규칙과 맞추지 않았습니다.
- v1.1.12026.10.07링크 밑줄과 접근성주소로 가는 링크에 옅은 밑줄을 늘 긋습니다. 바닥글 링크는 긋지 않습니다. 세그먼트는 role="group" 안의 aria-pressed 버튼으로 씁니다.
- v1.1.02026.09.30문서 페이지흰 바탕, 넓은 틀, 첫 문장, 공용 상단바와 바닥, 서비스 아이콘, 나가는 링크 표시를 더했습니다.
- v1.0.02026.09.20첫 배포토큰, 부품 24종, 화면 본보기 6가지, 쓰는 규칙.