Re:ding.com
리딩닷컴 디자인 시스템 v0.1 — 색 전략은 "중립 바탕 + 로고가 유일한 포인트". 바탕·글자는 잉크 중립색, 기능 강조는 파도 블루 단색, 로고 그라데이션은 로고와 워드마크 등 특별한 순간에만 씁니다.
principles
세 가지 원칙
기존 로고(1500×1500, 대각선 파스텔 그라데이션 + 이중 프레임 + 뭉툭한 라운드 글자)에서 따온 규칙입니다.
중립이 기본
ink 90%바탕·테두리·글자는 잉크 중립색. 색은 절제할수록 로고가 살아난다.
파랑은 기능
wave 500버튼·링크·포커스 등 행동을 이끄는 곳에만 파도 블루 단색.
그라데이션은 로고
하늘→페리윙클→연어→골드. 워드마크 등 포인트 전용.
color
컬러
로고(#7aacf7 → #faca7f)에서 추출한 색과 중립 램프.
ink중립 — UI의 90%
wave기능 강조 단색 — 액션·링크·포커스
gold하이라이트 — 아주 절제해서
peach주의
danger경고·금지
brand gradient
linear-gradient(135deg, #7aacf7, #949fd3 38%, #d3a695 68%, #faca7f) — 로고·워드마크 전용
type
타이포
디스플레이 = Baloo 2(라틴·숫자) + Jua(한글), 본문 = Pretendard, 명령어 = JetBrains Mono.
display / 워드마크
Re:ding.com 리딩닷컴
display / 페이지 제목
서버 규칙과 정보
본문 / 리드
리딩닷컴은 더빙을 중심으로 다양한 콘텐츠와 소통을 즐기는 디스코드 커뮤니티입니다.
본문 / 기본
서버를 참가했다면 규칙을 모두 숙지해 주세요. 규칙을 어길 시 관리자가 적절한 경고 및 조치를 취합니다.
mono / 명령어
/자기소개
buttons
버튼
primary는 파도 블루 단색. 그라데이션 버튼은 만들지 않는다.
badges
배지
callouts
콜아웃
기존 문서의 정보/팁/주의/경고 컨테이너를 대체. 예시는 실제 서버 규칙입니다.
정보
/자기소개 명령어로 자기소개를 작성하면 서버 이용 역할이 지급되고, 자기소개 미작성 역할이 제거됩니다.팁
주의
경고
@everyone, @here 사용은 금지입니다. 위반 시 경고 및 차단됩니다.cards
카드
framed는 로고의 파란 프레임을 딴 시그니처 카드. 중요한 콘텐츠에만 쓴다.
정규 더빙 프로젝트
전문 성우와 참여자들이 함께 만들어가는 더빙. 서버원 누구나 참여하거나 감상할 수 있어요.
열린 소통 공간
서버원들과 자유롭게 소통하고 질문·정보를 공유하세요. 이벤트와 친목 활동도 활발해요.
두 가지 인증
검문(운영진 확인) 또는 명령어 인증(/자기소개)으로 안전하게 서버에 참여할 수 있어요.
signature
파형 (Waveform)
더빙 커뮤니티의 목소리를 상징하는 시그니처 모티프. 바 대부분은 잉크색, 파랑·골드 클러스터는 오른쪽 피크에만. 전체 폭 밴드 단일 형태(PC에서 높이 확장)이며, 홈 히어로 아래에 사용한다.
interaction
인터랙션
팝업(모달), 선택 컨트롤, 스크롤바 규격. 모달은 모바일에서 하단 시트로 열립니다.
modal / dialog
selection
스위치
기본 폼 요소에 테마 적용
scrollbar — 사이트 전체 적용
- 서버 에티켓 — 신규 멤버에게 관심 가져주기
- 멘션 금지 — @everyone, @here는 관리자 전용
- 더빙 진행 — READING 카테고리 통화방 사용
- 자기소개 — 가이드를 읽고 정직하게 작성
- 정치·지역 비하 금지
- 사행성 금지 — 실제 돈이 걸린 내기 금지
- 홍보는 #홍보방에서만
- 수면방 — 자거나 끊기면 자동 이동
얇은 잉크색 썸(rounded), 트랙 투명
table
테이블
table-docs 유틸리티. 예시는 실제 매니저 구성입니다.
| 역할 | 닉네임 | 담당 |
|---|---|---|
| 서버장 | 용닝 | 서버 총관리자 |
| 부서버장 | 연랑 | 서버 부관리자 |
| 봇 관리자 | 리시 | 서버 봇·문서 관리 담당 |
tokens
그 외 토큰
곡률은 로고의 라운드 글자에서, 그림자는 잉크색 기반으로.
radius
xl(0.75rem) · card(1.25rem) · frame(1.5rem)
shadow
soft · lift · glow(파랑 전용)
motion
rise — 페이지 로드 시 아래에서 위로 (0.7s)
ease-soft · reduced-motion 지원