foundations — EOND UI

스페이싱

4px 베이스 스케일입니다. 임의 여백값을 만들지 마세요.

--e-sp-1 4px

--e-sp-2 8px

--e-sp-3 12px

--e-sp-4 16px

--e-sp-5 20px

--e-sp-6 24px

--e-sp-8 32px

--e-sp-10 40px

--e-sp-12 48px

--e-sp-16 64px

--e-sp-20 80px

라운딩

인풋·작은 버튼은 sm~기본, 카드는 xl, 히어로 컨테이너는 2xl입니다.

--e-radius-sm

4px

--e-radius

8px

--e-radius-lg

10px

--e-radius-xl

16px

--e-radius-2xl

24px

--e-radius-full

9999px

그림자

el_imin의 이중 레이어 소프트 섀도우를 표준으로 계승했습니다.

--e-shadow-sm

버튼·작은 요소

--e-shadow-md

카드·드롭다운

--e-shadow-lg

호버 리프트·모달

--e-shadow-accent

주 CTA 호버

모션

리빌(등장)과 리프트(호버), 두 가지가 전부입니다. prefers-reduced-motion에서 모두 꺼집니다.

지속시간 · 이징

속성	값	용도
--e-dur-fast	0.15s	색·보더 전환
--e-dur	0.25s	일반 전환
--e-dur-slow	0.35s	카드 리프트
--e-ease	cubic-bezier(0.16, 1, 0.3, 1)	기본 (= ease-out)
--e-ease-linear	linear	일정 — 같은 속도
--e-ease-in	cubic-bezier(0.4, 0, 1, 1)	천천히 → 빠르게 (퇴장)
--e-ease-out	cubic-bezier(0.16, 1, 0.3, 1)	빠르게 → 천천히 (등장)
--e-ease-in-out	cubic-bezier(0.65, 0, 0.35, 1)	느림 → 빠름 → 느림 (이동)
--e-ease-spring	cubic-bezier(0.34, 1.56, 0.64, 1)	끝에서 튕김 (강조)

이징 곡선 비교

거리·시간은 같고 곡선만 다릅니다. 점이 어떻게 출발하고 멈추는지 비교해 보세요. (1.5초마다 자동 왕복)

일정linear

천천히 → 빠르게--e-ease-in

빠르게 → 천천히--e-ease-out

느림 → 빠름 → 느림--e-ease-in-out

튕김--e-ease-spring

세로 이징

같은 곡선을 세로(낙하)로. 위에서 아래로 떨어질 때의 감속·가속을 봅니다.

일정

천천히→빠르게

빠르게→천천히

느림→빠름→느림

튕김

텍스트에 적용해 보기

곡선을 고르면 실제 텍스트가 그 곡선으로 아래에서 위로 나타납니다.

Extension ON your Daily life

호버 리프트 라이브 데모

카드를 올려보세요

e-card-hover — 떠오르며 1.02배 확대됩니다.

스크롤 리빌 라이브 데모

스크롤 리빌

e-reveal — 뷰포트 진입 시 떠오릅니다. --d 변수로 스태거합니다.

레이아웃

브레이크포인트는 768px에서 모바일과 데스크탑을 분기합니다.

구성	값	용도
--e-inner	1200px	기본 컨테이너 최대폭
--e-content	980px	본문 최대폭
breakpoint	768px	모바일/데스크탑 분기점

다크 모드

html이나 임의 래퍼에 data-theme="dark"만 붙이면 토큰이 통째로 전환됩니다 (el_imin_ui의 변수 스왑 구조 계승). 컴포넌트는 전부 토큰 참조라 추가 코드가 없습니다. 아래 박스가 실제 전환 데모입니다.

DARK

다크 모드 카드

같은 마크업, 토큰만 전환된 상태입니다.

토큰 스왑만으로 전환됩니다.

간격 · 라운딩 · 그림자 · 모션