큐레이션 · 오픈 · 무료

Novu

깔끔한 타이포그래피와 세련된 심층 우주에서 영감을 받은 컬러 팔레트를 결합한, 개발자 중심 다크 모드 알림 인프라 플랫폼입니다.

01

디자인 DNA

세련된 다크 미학과 깔끔한 기술 인터페이스를 결합한, 알림을 위한 개발자 중심 명령 센터입니다.

02

컬러

깊은 블루와 그레이를 활용하여 깊이감과 레이어링을 형성하는, 고대비 다크 모드 베이스와 시안 포인트입니다.

03

타이포그래피

geometric-sans · monospace

• display64px · 500
• body16px · 400

04

여백

4px 기반 그리드와 일관된 수직 간격입니다.

05

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

1px solid rgba(255,255,255,0.1)

0 0 100px rgba(0, 213, 255, 0.15)

06

레이아웃

중앙 정렬된 히어로 섹션 다음에 다중 컬럼 기능 그리드와 복잡한 겹치는 UI 데모가 옵니다.

07

모션과 인터랙션

부드러운 배경 전환 · Hover 시 색상 변화 · 인터랙티브 요소의 Transform 스케일링

네비게이션과 버튼에 미세한 색상 변화 또는 배경 변경. · 인터랙티브 요소의 Scale transform.

08

컴포넌트

• button 알약 형태의 솔리드 기본 버튼(화이트 배경에 블랙 텍스트)과 아웃라인된 보조 버튼입니다.
• card 미세한 테두리와 부드러운 방사형 그라디언트로 깊이감을 준 다크 테마 카드입니다.
• chip 카운트용(예: 노란색/주황색 '18') 솔리드 배경의 작은 알약 형태 배지입니다.
• input 미세한 테두리가 있는 다크 테마 인풋 필드입니다.
• hero 겹치는 플로팅 인터페이스 컴포넌트가 있는 거대한 중앙 정렬 타이포그래피입니다.

09

보이스와 금지 목록

• 톤 기술적이고 자신감 있으며 개발자 지향적입니다.
• 헤드라인 간결하고 굵으며, 종종 코드 구문(예: '<Inbox />')을 포함합니다.
• CTA 명확하고 대문자화된 행동 지향적 텍스트(예: 'START FOR FREE').

• 라이트 배경을 사용하지 마세요 — 스크린샷은 딥 다크 모드 베이스(#111018)를 보여줍니다.
• 장식적 세리프 폰트를 사용하지 마세요 — 스크린샷은 깔끔한 기하학적 산세리프 타이포그래피를 보여줍니다.
• 제목에서 코드 구문을 피하지 마세요 — 스크린샷은 히어로에서 '<Inbox />'를 두드러지게 사용하는 것을 보여줍니다.
• 흐릿하고 저대비 색상을 사용하지 마세요 — 스크린샷은 다크 배경 위의 고대비 화이트 텍스트와 밝은 시안 포인트를 보여줍니다.
• 복잡하고 다채로운 그라디언트를 곳곳에 사용하지 마세요 — 스크린샷은 깊이감을 위한 미세하고 어두운 방사형 그라디언트를 보여줍니다.
• 날카롭고 각진 코너를 사용하지 마세요 — 스크린샷은 광범위하게 사용된 알약 형태(9999px)와 12px 둥근 코너를 보여줍니다.
• 피하기: 장황한 표현
• 피하기: 마케팅 용어
• 피하기: 장식적 은유
• 피하기: 지나치게 복잡한 문장

10

팩 안의 실제 스크린샷

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

11

System Prompt

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