04 · Graphic Language
그래픽 언어: 마침표의 확장
모든 브랜드 그래픽은 「정산점」에서 자라납니다: Dot Path(이동 중인 자금) — 점점 빨라지는 점들이 마침내 하나의 단단한 블루 점으로 정산되는, 한 건의 송금 이야기; Dot Grid(원장) — 계좌와 네트워크 노드를 뜻하는 정렬된 점 배열; Aperture — 심벌의 클로즈업 크롭. 세 모티프가 구분선부터 키 비주얼까지 모든 그래픽 수요를 감당합니다.
Dot Path · 이동 중인 자금구분선, 프로세스 도해, 로딩 모션의 모티프
간격은 넓어지고 점은 커지고 색은 뉴트럴에서 레일 틸을 거쳐 브랜드 블루로 — 종점은 언제나 단단한 Omninal Blue 점입니다. 메시지: 경로는 복잡할 수 있어도, 정산은 한 번입니다.
Dot Grid · 원장배경 텍스처, 커버 패턴, 데이터 시각화 앵커
뉴트럴 점 배열을 바탕으로, 소수의 컬러 점이 「활성 계좌 / 이동 중 거래」를 표시합니다. 액센트 밀도는 8% 미만 — 절제가 곧 전문성입니다.
모티프 변형 · 멀티 레일 수렴복수형의 Dot Path — 세 개의 레일, 하나의 정산점
세 레일의 점들이 나란히 나아가다 중간에 모여들고, 마침내 하나의 단단한 블루 점을 공유합니다 — 스마트 라우팅의 그래픽화: 레일은 여러 개일 수 있어도 정산은 하나뿐입니다. 멀티 레일 비교, 라우팅 설명, 프로세스 커버에 사용하며, 변형도 모티프 규율을 지킵니다: 점만 사용, 종점은 유일, 액센트 밀도 초과 금지.
Aperture · 심벌의 크롭프레임을 넘어 확대된 심벌 — 커버와 레이아웃의 세 번째 모티프 (v2.0 신규)
다크 커버 · 꽃잎 하나가 블리드, 낮은 대비
라이트 레이아웃 · 코너 워터마크 처리
규칙: 확대 배율 ≥ 3× (작은 로고가 아니라 그래픽으로 읽히도록), 반드시 블리드 크롭, 단색 저대비 (다크 위 Sky ≤ 14%, 라이트 위 브랜드 블루 ≤ 8%); 레이아웃당 최대 한 번, Dot Grid와 같은 화면 금지; 중앙의 사각별은 완전한 형태로 나타날 수 없습니다 — 완전한 심벌은 아이덴티티의 것이지 장식의 것이 아닙니다.
금지: 동전, 돈주머니, 지구본, 로켓 같은 구상적 금융 심벌 불가; 육각형·체인 같은 Web3 시각 잔재 불가; 곡선과 화살표는 차트 안에서만 존재합니다. 브랜드 그래픽은 「점」과 심벌의 Aperture 크롭만 사용합니다.
아이콘 시스템24px 그리드 · 2px 라운드 캡 스트로크 · 기하 우선 — 아이콘은 그래픽 언어의 기능화입니다
계좌 Account
지급 Pay-out
환전 FX
승인 Approve
원장 Ledger
Agent
공식 아이콘 라이브러리 = Lucide (shadcn/ui의 기본 오픈소스 세트, ISC 라이선스, 이 사이트는 lucide-react로 직접 사용). 단색 라인, currentColor로 일괄 착색: 기본 Ink, 활성/선택 상태는 Blue (마침표의 「단일 블루 포인트」 논리의 연장). 24px 그리드, 2px 라운드 캡 스트로크, 스큐어모피즘·그라디언트 금지. 전체 컴포넌트 스위트는 06 · UI 킷에.
일러스트와 사진 원칙드물게 쓰기 때문에, 더 정확히 써야 합니다
일러스트 Illustration
기하학적 추상만: 점, 원, 직선, 라운드 사각형의 구성 — 곧 「확대된 아이콘 시스템」입니다. 캐릭터 카툰, 3D 렌더, 아이소메트릭 피규어 금지. 일러스트의 기능은 구조 설명(예: 자금 흐름)이지 분위기 장식이 아닙니다. 색은 데이터 시각화 시퀀스에서 취합니다.
사진 Photography
브랜드 스토리텔링 전용(채용, 회사 소개): 실제 업무 현장, 자연광, 차분한 뉴트럴 톤, 텍스트가 앉을 넉넉한 여백. 악수, 지구본, 금화, 뛰어가는 정장 차림 같은 스톡 클리셰 금지. 프로덕트 자료에는 사진을 아예 쓰지 않습니다 — 인터페이스 스크린샷이 우리의 「사진」입니다.
모션 원칙 Motion모션 = 자금이 정산되는 순간. 빠르게 나가, 느리게 안착합니다 — 튕김은 없습니다
Dot Path 로딩 애니메이션 (라이브)
점이 차례로 켜지고, 종점이 한 번 부풀었다 정산됩니다 — 이동 중인 송금의 표준 로딩 메타포입니다.
인터랙션 이징 (버튼에 호버해 보세요)
새 결제| 단계 | 용도 |
|---|---|
| Instant 100ms | 호버 피드백, 토글 |
| Quick 180ms | 버튼, 카드 리프트 |
| Standard 240ms | 패널 확장, 페이지 전환 |
| Settle 400ms | 금액 변화, 성공 정산 |
이징은 하나로 통일: cubic-bezier(0.2, 0.8, 0.2, 1) — 빠르게 나가 느리게 안착, 자금이 입금되듯. 바운스·엘라스틱 금지; prefers-reduced-motion을 항상 존중합니다.
마이크로 모션 라이브러리네 가지 표준 애니메이션 — 전부 같은 이야기를 합니다: 수렴과 정산 (라이브)
① 컨버지 로더 · 전역 로딩
네 점이 네 모서리에서 중앙으로 모여 하나로 정산됩니다 — 심벌의 의미를 애니메이션으로. 전역 로딩, 앱 시작에 사용. 1.8초 루프.
② 정산 체크 · 결제 성공
링이 먼저 그려지고(이동 중), 체크가 내려앉고(정산), 리플이 마무리합니다(확인). 결제 성공, 승인 완료에 사용. Settle 400ms 리듬.
③ 금액 정산 · 숫자 롤링
$0.··
숫자가 이징 롤링으로 최종값에 도달하고, 소수 자리가 마지막에 나타나 Mist로 낮아지며, 블루 점이 마무리합니다 — 금액은 언제나 「정산」으로 끝납니다. 깜빡임도, 점프도 없습니다.
④ 진행 정산 · 이동 중에서 정산으로
USDC 레일 · 이동 중settled.
진행 바가 빠르게 나가 느리게 채워지고, 끝점이 한 번 부풀어 점으로 정산됩니다 — Dot Path의 종점 의미와 동일합니다. 송금 상세, 배치 작업에 사용.
마이크로 모션 규율: 모든 애니메이션은 네 메타포(수렴, 링 그리기, 롤링, 점 안착) 중 하나만 사용합니다. 지속 시간은 모션 사다리(100/180/240/400ms, 루프 데모 제외)에서 취합니다. 화면당 루프 애니메이션은 최대 하나. 전부 prefers-reduced-motion을 존중합니다(정적 완료 상태로 대체). 심벌 본체는 절대 회전하지 않습니다 — 컨버지 로더가 네 꽃잎이 아니라 「네 점」을 쓰는 이유가 바로 회전 금지입니다.