큐레이션 · 오픈 · 무료

Super

Notion 문서를 전문 웹사이트로 변환하는 깔끔하고 고대비 SaaS 도구입니다.

nocodetool
Super 스크린샷
↓ 디자인 시스템 다운로드 (18 MB)OpenDesign 에서 열기

원본 사이트: https://super.so

📦 팩 내용 보기 →

01

디자인 DNA

심플효율적Notion 기반전문적웹 구축

메모를 순식간에 세련된 공개 웹사이트로 변환하는 깔끔하고 전문적인 작업 공간입니다.

02

컬러

#FFBE3CAccent
#262A2EInk
#66707AInk soft
#FFFFFFBG
#F9F9F8BG soft
#FDFDFCBG quiet
#808C99Muted
rgba(204, 209, 214, 1)Line

활기찬 악센트를 하나 사용하는 고대비 기반입니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

큰 디스플레이 텍스트에는 타이트한 자간을 사용합니다. · 흰색 배경에 대한 본문 텍스트의 고대비를 유지합니다.

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

섹션에 넉넉한 수직 간격을 사용하는 일관된 4px 기본 그리드입니다.

05

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

sm · 4px
md · 8px
lg · 16px
pill · 999px

1px solid rgba(204, 209, 214, 1)

rgba(0, 0, 0, 0.008) 2.6px 4px 2.6px 0px · rgba(0, 0, 0, 0.01) 7.3px 11px 7.1px 0px · rgba(0, 0, 0, 0.02) 58px 88px 57px 0px

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

표준 상단 내비게이션 바를 갖춘 중앙 정렬 컬럼 히어로 레이아웃입니다.

07

모션과 인터랙션

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

UI 전환을 위한 opacity 페이드 · 인터랙티브 요소에 대한 빠른 transform 스케일

주요 버튼에 섬세한 배경색 변화 또는 약간의 스케일 확대 효과입니다. · 최소한의 전환 지연으로 즉각적인 상태 변경이 일어납니다.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Super — 桌面首屏（hero）
桌面首屏（hero）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Super — 移动首屏
移动首屏

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

11

System Prompt

Super는 Notion 문서를 전문 웹사이트로 변환하는 깔끔하고 고대비 SaaS 도구입니다. 시각적 아이덴티티는 흰색과 밝은 오프화이트 배경, 다크 그레이(#262A2E) 텍스트를 기반으로 선명하고 전문적인 느낌을 만듭니다. 활기찬 악센트 컬러(옐로우, #FFBE3C)는 주요 CTA에만 독점적으로 사용됩니다. 타이포그래피는 표시용으로 볼드하고 기하학적인 산세리프를, 본문으로는 깔끔한 휴머니스트 산세리프를 사용하며, 큰 크기에서는 종종 타이트한 자간을 적용합니다. 레이아웃은 중앙 정렬되고 미니멀하며, 시각적 혼잡함을 피합니다. 매우 중요하게도, 메인 랜딩 페이지에 다크 모드를 사용하지 않으며, 경쟁하는 밝은 악센트 컬러를 절대 사용하지 않으며, 항상 히어로 섹션의 레이아웃은 단일 컬럼에 집중시켜야 합니다. 모든 섀도우는 미세하고 큰 반지름으로 유지하고, UI는 4px 기본 그리드와 넉넉한 수직 간격으로 안정감을 부여합니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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