EOND UI 디자인 시스템
이온디의 모든 웹 프로젝트가 공유하는 하나의 디자인 언어입니다. el_imin 레이아웃의 타이포그래피·스페이싱 리듬을 계승하고, 컬러와 컴포넌트를 표준화했습니다. eondui.css 한 파일로 어떤 CMS에서든 동일한 UI를 만들 수 있습니다.
디자인 원칙
01
하나의 팔레트
오렌지(#FF6B35)와 딥네이비(#0B1120), 그리고 뉴트럴. 섹션마다 새 색을 만들지 않습니다.
02
한국어 조판 우선
word-break: keep-all, 어절 단위 줄바꿈. 제목은 균형 잡힌 줄로.
03
절제된 모션
떠오르는 리빌과 호버 리프트, 두 가지만. prefers-reduced-motion을 존중합니다.
04
복사해서 쓰는 컴포넌트
모든 컴포넌트는 클래스 하나로 재사용. 화면마다 CSS를 새로 짜지 않습니다.
시작하기
eondui.css를 프로젝트에 로드하세요.
<link rel="stylesheet" href="/static/el_design/eondui.css">이후 모든 컴포넌트는 e- 접두사 클래스로 사용합니다. 토큰은 --e-* CSS 변수로 노출되어 있어 커스터마이징도 변수 재정의로 끝납니다.
어디서 왔나
EOND UI의 뼈대는 el_imin(2023~, Rhymix)입니다. 뉴트럴 3단계 위계, 4px 스페이싱 리듬, pill 버튼, 카드 리프트, 이중 소프트 섀도우, 롤링 텍스트를 계승했습니다.
여기에 el_main(2025~, 마켓)의 커머스 컴포넌트 — 상태 배지, 가격 표기, 썸네일 비율, 탭 카운트 — 와 el_axai(2026~, AX 랜딩)의 브랜드 컬러(오렌지+딥네이비), 다크 섹션 키트, 스크롤 리빌을 통합했습니다. 세 레이아웃의 디자인 언어가 이 한 파일로 수렴합니다.
마이그레이션 가이드 보기