큐레이션 · 오픈 · 무료

Awwwards

수상작 웹 디자인을 선보이는 큐레이션 갤러리 및 디렉토리.

designgallery

Awwwards 스크린샷

↓ 디자인 시스템 다운로드 (17 MB)OpenDesign 에서 열기

원본 사이트: https://www.awwwards.com

📦 팩 내용 보기 →

01

디자인 DNA

큐레이션디자인 어워즈프리미엄갤러리

하이엔드 디지털 디자인 갤러리 및 어워즈 플랫폼.

02

컬러

#222222Ink

#ffffffBG

#f8f8f8BG soft

#a7a7a7Muted

rgba(222,222,222,1)Line

중립적인 회색 악센트를 사용한 고대비 흑백 기반.

03

타이포그래피

grotesque-sans

display80px · 300
heading20px · 600
body14px · 300

04

여백

4px

8px

16px

24px

32px

48px

64px

96px

8px 기본 그리드

05

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

sm · 2px

md · 8px

lg · 14px

pill · 999px

1px solid

rgb(128,128,128) 0px 0px 5px 0px

06

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

엣지 투 엣지 히어로 이미지가 있는 중앙 정렬 단일 칼럼 콘텐츠.

07

모션과 인터랙션

220msmicro

300mssmall

600msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

색상, 배경 및 불투명도에 대한 부드러운 전환. · 인터랙티브 요소의 hover 상태.

미세한 배경 또는 색상 전환. · 즉각적인 시각적 피드백.

08

컴포넌트

button 1px 테두리와 투명 배경을 가진 미니멀리스트 알약 모양 버튼.
card 최소한 또는 보이지 않는 테두리를 가진 깔끔한 이미지 중심 카드.
chip 얇은 테두리가 있는 작은 둥근 태그.
input 밝은 회색 배경과 둥근 모서리를 가진 검색 바.
hero 전체 너비 사진 위에 뷰포트를 지배하는 거대한 전체 너비 타이포그래피.

09

보이스와 금지 목록

톤 전문적이고, 권위적이며, 깔끔한 어조.
헤드라인 굵고, 과장되며, 초경량 웨이트.
CTA 간단한 텍스트 또는 최소한의 아웃라인 버튼.

선명하고 채도 높은 색상을 사용하지 마세요 — 스크린샷은 엄격히 단색 팔레트를 보여줍니다.
무거운 드롭 쉐도우를 적용하지 마세요 — 스크린샷은 거의 상승이나 그림자가 없음을 보여줍니다.
장식적이거나 세리프 폰트를 사용하지 마세요 — 스크린샷은 독점적으로 깔끔한 고트릭산스 세리프를 보여줍니다.
둥글고 통통한 인터페이스를 만들지 마세요 — 스크린샷은 날카롭거나 적당히 둥근 모서리를 보여줍니다.
여러 색상이 경쟁하는 레이아웃으로 채우지 마세요 — 스크린샷은 검정, 흰색, 회색에 의존합니다.
복잡하고 지저분한 배경을 사용하지 마세요 — 스크린샷은 단색 플랫 컬러나 단일 히어로 사진에 의존합니다.
피하기: 장식적이거나 화려한 타이포그래피
피하기: 크고 화려한 컬러 악센트
피하기: 지저분한 레이아웃

10

팩 안의 실제 스크린샷

Awwwards — 桌面首屏（hero） — 桌面首屏（hero）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Awwwards — 移动首屏 — 移动首屏

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

11

System Prompt

이것은 큐레이션된 디자인 어워즈 플랫폼을 위한 미니멀리스트, 갤러리 스타일 디자인 시스템입니다. #ffffff 배경, #222222 잉크, #a7a7a7 텍스트를 사용하는 엄격한 단색 팔레트를 사용합니다. 타이포그래피는 대형 전시용 텍스트를 위해 초경량 웨이트(300)의 고트릭산스 폰트에 크게 의존하며, 더 작은 제목을 위해 600 웨이트를 사용합니다. 레이아웃은 넉넉하며, 12칼럼 그리드와 여유로운 여백을 활용합니다. 중요 금지 사항: 채도 높은 악센트 컬러를 사용하지 마세요; 무거운 그림자를 사용하지 마세요; 세리프 폰트를 사용하지 마세요; 시각적 노이즈로 레이아웃을 지저분하게 하지 마세요. 전반적인 톤은 세련되고, 전문적이며, 매우 큐레이션된 것입니다.

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

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

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

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