개요
Ruda는 기업 세일즈·마케팅 팀을 위한 문서 추적 및 리드 수집 도구로, CRM이 내장되어 있습니다.
- 제품
- Ruda
- 운영
- Rexplore Inc.
- 디자인 시스템
- Vercel Geist
- 서체
- Geist Sans, Geist Mono
Ruda 화면은 Vercel Geist 디자인 시스템을 기반으로 만들었습니다. 색, 글자 크기 체계, 모서리, 모션은 Geist 원전을 따르고, 우리 구현과 원전이 다르면 원전이 기준입니다.
Vercel 의 Geist Sans 와 Geist Mono, SIL Open Font License 1.1.
로고
로고는 Geist Sans 로 쓴 워드마크 RUDA 입니다. 심볼과 이니셜 상자는 없습니다.
규정
- 항상 대문자 RUDA 로 씁니다. 문장 속 제품명은 Ruda 로 적습니다.
- 굵기 600(SemiBold). 더 굵게 쓰지 않습니다.
- 자간은 모든 크기에서 0.64px 로 고정합니다. 그래서 크기가 커질수록 비율은 줄어듭니다.
- 최소 크기 12px.
- 여백: 사방으로 대문자 높이(0.71 × 글자 크기) 이상을 비워 둡니다.
- 색: 밝은 면에는 #171717, 어두운 면에는 흰색. 그 밖의 색은 쓰지 않습니다.
- 스크린리더는 한 글자씩 끊지 않고 Ruda 로 읽습니다. 대체 텍스트, 캡션, 문서에는 Ruda 로 적습니다.
- 워드마크는 아랍어 페이지에서도 왼쪽에서 오른쪽으로 읽히며, 번역하거나 음역하지 않습니다.
크기
| 크기 | 자간 | 비율 | 견본 |
|---|---|---|---|
| 12px | 0.64px | 0.053em | Ruda |
| 14px | 0.64px | 0.046em | Ruda |
| 16px | 0.64px | 0.040em | Ruda |
| 24px | 0.64px | 0.027em | Ruda |
| 32px | 0.64px | 0.020em | Ruda |
하지 말 것
잘못된 예소문자
잘못된 예대소문자 혼용
잘못된 예자간 변경
잘못된 예기울임
잘못된 예외곽선
잘못된 예그림자
잘못된 예그라데이션
잘못된 예브랜드 외 색
잘못된 예이니셜 상자나 심볼
컬러
무채색이 먼저입니다. 검정이 브랜드 색이고 파랑은 링크와 상태에만 씁니다. 대비비는 각 토큰 값을 흰색과 검정에 대어 계산했습니다.
AA 는 4.5:1 이상으로 본문 글자에 충분합니다. AA 큰 글자는 3:1 이상으로 큰 글자와 UI 요소에만 씁니다.
| 토큰 | HEX | 흰 배경 (#ffffff) | 검정 배경 (#000000) | |
|---|---|---|---|---|
| 브랜드 | ||||
| primary메인: 버튼, 워드마크, 본문 글자 | #171717 | 17.93:1AA | 1.17:1AA 미달 | |
| primary (dark)다크 모드의 메인 채움 | #2e2e2e | 13.58:1AA | 1.55:1AA 미달 | |
| cta (dark)다크 모드의 주 버튼 | #ededed | 1.17:1AA 미달 | 17.94:1AA | |
| 파랑 | ||||
| link링크 글자 | #0068d6 | 5.31:1AA | 3.95:1AA 큰 글자 | |
| link-dark다크 모드의 링크 글자 | #52a8ff | 2.50:1AA 미달 | 8.40:1AA | |
| toggle-on · toast-success · info토글 켬, 성공 토스트, 정보 채움 | #0070f3 | 4.55:1AA | 4.61:1AA | |
| 베타 | ||||
| badge-pink베타 배지, 흰 글자 | #bd2864 | 5.75:1AA | 3.65:1AA 큰 글자 | |
| badge-pink-dark다크 모드의 베타 배지 | #b31a57 | 6.56:1AA | 3.20:1AA 큰 글자 | |
| 비활성 | ||||
| disabled-bg비활성 면 | #f2f2f2 | 1.12:1AA 미달 | 18.76:1AA | |
| disabled-fg비활성 글자 | #8f8f8f | 3.23:1AA 큰 글자 | 6.49:1AA | |
| 회색 | ||||
| gray-50배경 | #f2f2f2 | 1.12:1AA 미달 | 18.76:1AA | |
| gray-100호버 배경 | #ebebeb | 1.19:1AA 미달 | 17.62:1AA | |
| gray-200눌림 배경 | #e6e6e6 | 1.25:1AA 미달 | 16.83:1AA | |
| gray-300테두리 | #ebebeb | 1.19:1AA 미달 | 17.62:1AA | |
| gray-800보조 글자 | #4d4d4d | 8.45:1AA | 2.48:1AA 미달 | |
| gray-900본문 글자 | #171717 | 17.93:1AA | 1.17:1AA 미달 | |
| gray-500 (dark)다크 모드의 보조 글자 | #a0a0a0 | 2.61:1AA 미달 | 8.03:1AA | |
| 상태 | ||||
| success성공 점과 배지 | #45a557 | 3.10:1AA 큰 글자 | 6.77:1AA | |
| warning경고 | #f5a623 | 2.03:1AA 미달 | 10.36:1AA | |
| error오류와 삭제 동작 | #e5484d | 3.91:1AA 큰 글자 | 5.37:1AA | |
비활성 컨트롤은 대비 최소 기준(WCAG 1.4.3)의 예외이며, 항상 disabled 또는 aria-disabled 를 함께 붙입니다. #8f8f8f / #f2f2f2 = 2.89:1
타이포그래피
화면과 마케팅의 모든 글자는 Geist Sans 로 씁니다. Geist Mono 는 코드와 HEX 같은 값에 씁니다.
Geist Sans Aa Bb 0123
Geist Mono Aa Bb 0123
제목
| 토큰 | 크기 | 줄 높이 | 굵기 | 자간 |
|---|---|---|---|---|
| text-heading-56 | 56px | 56px | 600 | -3.36px |
| text-heading-48 | 48px | 56px | 600 | -2.88px |
| text-heading-40 | 40px | 48px | 600 | -2.4px |
| text-heading-32 | 32px | 40px | 600 | -1.28px |
| text-heading-24 | 24px | 32px | 600 | -0.96px |
| text-heading-20 | 20px | 26px | 600 | -0.4px |
| text-heading-16 | 16px | 24px | 600 | -0.32px |
| text-heading-14 | 14px | 20px | 600 | -0.28px |
본문
| 토큰 | 크기 | 줄 높이 |
|---|---|---|
| text-2xs | 12px | 16px |
| text-xs | 13px | 18px |
| text-sm | 14px | 20px |
| text-base | 16px | 24px |
| text-xl | 20px | 28px |
| text-2xl | 24px | 32px |
| text-3xl | 32px | 40px |
굵기
굵기: 본문 400, 버튼 500, 강조 550, 제목과 워드마크 600. 700 이상은 쓰지 않으며 빌드 검사가 막습니다.
다른 문자
- 한국어, 일본어, 중국어는 Geist 다음에 각 언어의 시스템 서체를 씁니다(한국어는 Pretendard). 24px 이상 제목은 자간을 -0.02em, 20px 이하는 0 으로 둡니다.
- 태국어와 아랍어 제목은 성조 부호와 글자 연결이 깨지지 않도록 자간 0 을 유지합니다. 태국어 48px, 56px 제목은 줄 높이 1.2 입니다.
- 아랍어 페이지는 오른쪽에서 왼쪽으로 흐릅니다. 워드마크, HEX 값, 코드는 왼쪽에서 오른쪽을 유지합니다.
형태와 간격
모서리
- 6px컨트롤과 입력
- 8px카드, 팝오버, 메뉴
- 12px모달
그림자
카드는 그림자 대신 1px 선을 쓰고, 표에는 그림자를 넣지 않습니다. 그림자는 떠 있는 층에만 씁니다:
- 팝오버와 메뉴0 8px 24px rgba(0,0,0,.12)
- 모달0 16px 48px rgba(0,0,0,.16)
간격
간격은 4px 배수로만 씁니다.
모션
- 피드백은 색, 불투명도, 그림자만 바꿉니다. 누르거나 올려도 크기나 위치가 변하지 않습니다.
- 전환은 Geist 감속 곡선으로 150~200ms 입니다.
- 팝오버와 모달은 서서히 나타나고 사라집니다. 배경을 흐리게 하지 않습니다.
- 동작 줄이기를 켜면 움직임은 단순한 페이드로 바뀝니다.
cubic-bezier(0, 0, 0.2, 1)
문의
Ruda 이름이나 워드마크 사용에 관한 문의는 help@rexplore.xyz 로 보내 주세요.