큐레이션 · 오픈 · 무료

n8n

고대비 오렌지 액센트와 깔끔한 산세리프 타이포그래피를 사용하여 AI 워크플로를 선보이는 다크 테마 개발자 도구 랜딩 페이지.

01

디자인 DNA

API와 AI를 연결하기 위한 IDE처럼 스타일링된 고급 개발자 도구.

02

컬러

화려한 오렌지 초점과 엄격하게 절제된 보조 색상을 갖춘 고대비 다크 UI.

03

타이포그래피

geometric-sans · monospace

• display56px · 600
• h240px · 600
• body-lg20px · 400
• body16px · 400
• caption12px · 600

모든 타이포그래피는 기하학적 산세리프 패밀리(Geomanist)를 사용합니다. · 헤드라인은 좁은 자간(-1px)과 세미볼드 웨이트를 사용합니다. · 본문 텍스트는 가독성을 위해 400 웨이트를 유지합니다.

04

여백

주요 섹션을 위한 넉넉한 패딩(48px)을 갖춘 표준 4px 기본 그리드.

05

표면 (라운드 / 그림자 / 경계선)

1px solid rgba(111,111,111,0.3)

0px 1px 0px 0px inset rgba(255,142,93,0.3) · 0px 0px 0px 1px inset rgba(255,255,255,0.1) · 1px 2px 8px 0px rgba(0,0,0,0.35)

06

레이아웃

히어로에 왼쪽 정렬 텍스트와 중앙 정렬 콘텐츠를 갖춘 표준 최대 너비 컨테이너.

07

모션과 인터랙션

hover 시 부드러운 색상 및 배경색 트랜지션(0.2s). · 인터랙티브 상태 변화를 위한 transform 및 불투명도 트랜지션(0.3s). · 모든 UI 요소 상태 변화를 위한 미묘한 이징.

부드러운 색상 및 배경 전환, 버튼의 미묘한 스케일 또는 translate. · 배경색 변화 또는 불투명도를 통한 시각적 피드백.

08

컴포넌트

• button 주요 액션을 위한 단색 오렌지(#ee4f27), 보조 액션을 위한 다크 아웃라인, 필 라디우스.
• card 깊이감을 위한 미묘한 테두리와 box-shadow를 갖춘 다크 배경.
• chip 뚜렷하게 두드러지지 않지만, 체크 표시기에는 깔끔하고 미니멀한 스타일을 사용합니다.
• input 미묘한 테두리를 갖춘 다크 배경.
• hero 중앙 정렬된 대형 헤드라인, 두 개의 CTA 버튼, 그리고 두드러진 3D 그래픽.

09

보이스와 금지 목록

• 톤 직설적이고 전문적이며 개발자 중심적.
• 헤드라인 간결하고 실행 지향적인 문구(예: '빠르게 움직입니다. 아무것도 깨뜨리지 마세요.').
• CTA 명확하고 직접적인 행동 유도('무료로 시작하기', '영업팀에 문의하기').

• 장난스럽거나 둥근 폰트를 사용하지 마세요 — 스크린샷은 깔끔한 기하학적 산세리프를 보여줍니다.
• 밝은 배경을 사용하지 마세요 — 스크린샷은 깊은 다크 네이비(#0e0918) 배경을 보여줍니다.
• 여러 고채도 색상을 사용하지 마세요 — 스크린샷은 오렌지만을 유일한 지배적 액센트로 사용합니다.
• 복잡하거나 소란스러운 배경 패턴을 사용하지 마세요 — 스크린샷은 깔끔한 다크 그라디언트와 미묘한 방사형 글로우를 사용합니다.
• 헤드라인에 넓고 여유로운 자간을 사용하지 마세요 — 스크린샷은 좁고 타이트한 자간을 보여줍니다.
• 무거운 그림자를 사용하지 마세요 — 스크린샷은 깊이감을 위해 미묘한 inset 글로우와 얇은 테두리를 사용합니다.
• 피하기: 지나치게 캐주얼하거나 장난스러운 언어.
• 피하기: 워크플로 자동화와 관련되지 않은 과도한 전문 용어.
• 피하기: 지저분하거나 혼란스러운 레이아웃.
• 피하기: 밝고 다채로운 팔레트.
• 피하기: 무거운 장식용 세리프 폰트.

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko