큐레이션 · 오픈 · 무료

Superhi

대담하고 다채롭고 친근한 시각적 언어를 사용하는 창의적 기술 스킬 온라인 학습 플랫폼.

EducationCreativeBold TypographyPlayfulConsumer
Superhi 스크린샷
↓ 디자인 시스템 다운로드 (12 MB)OpenDesign 에서 열기

원본 사이트: https://superhi.com

📦 팩 내용 보기 →

01

디자인 DNA

창의적 커리어학습장난기커뮤니티실용적 기술

창의적 놀이터 같은 다채롭고 접근 가능한 학습 스튜디오.

02

컬러

#2727E6Accent
#111118Ink
#F0F6FFBG
rgba(17, 17, 24, 0.1)Line

생동감 있는 노란색과 파란색의 주요 팔레트가 디자인을 지탱하며, 부드러운 파란색 배경이 대담한 기하학적 형태를 위한 깨끗한 캔버스를 제공합니다.

03

타이포그래피

grotesque-sans · monospace

모든 텍스트 레벨에 깨끗하고 중립적인 grotesque를 사용합니다 · 큰 디스플레이 텍스트에는 타이트한 네거티브 트래킹을 유지합니다 · 기술적이거나 보조 악센트에는 monospace를 사용합니다

04

여백

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

일관된 4px 그리드 시스템을 사용하며, 개방감을 위해 충분한 패딩과 간격을 둡니다.

05

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

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

rgba(18, 18, 151, 0.133) 0px 3.2px 4px 0px

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

중심 정렬된 수직 스택 구조로, 넓고 여유로운 영역과 겹쳐진 기하학적 배경 요소를 사용합니다.

07

모션과 인터랙션

200msmicro
400mssmall
800msmedium
cubic-bezier(0.37, 0, 0.63, 1)easing

인터랙티브 상태에 대한 부드러운 전환 · 변환 기반 애니메이션을 위한 스프링과 같은 easing

링크와 버튼에 은은한 색상 또는 불투명도 변화. · 즉각적인 시각적 피드백, 약간의 크기 또는 색상 변화.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

Superhi는 창의적 기술 스킬을 위한 온라인 학습 플랫폼입니다. 그 디자인 DNA는 장난스럽고, 친근하며, 대담한 시각적 언어로 특징지어집니다. 핵심 팔레트는 부드러운 파란색 배경(#F0F6FF)에 깊은 파란색(#2727E6)과 밝은 노란색(#FFE600)의 생동감 있는 포인트를 사용합니다. 타이포그래피는 큰 디스플레이 텍스트에 타이트한 트래킹을 적용한 깨끗하고 중립적인 grotesque sans-serif입니다. 핵심 주의 사항: 절대로 어두운 모드 배경을 사용하지 말 것, 세리프 서체를 완전히 피할 것, 버튼을 직사각형으로 만들지 말 것. 레이아웃은 여유롭고 중심 정렬되며, 장난스러운 배경 요소로 대담한 기하학적 형태를 사용합니다.

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

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

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

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