큐레이션 · 오픈 · 무료

Madebyon

대담한 디자인과 기술적 혁신을 통해 디지털 경험의 미래를 만들어가는데 집중하는 프리미엄 디지털 에이전시.

AgencyCleanBold TypographyPremiumDesign Tools
Madebyon 스크린샷
↓ 디자인 시스템 다운로드 (8 MB)OpenDesign 에서 열기

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

📦 팩 내용 보기 →

01

디자인 DNA

디지털 에이전시크리에이티브 스튜디오혁신모던프리미엄

기술적 정밀함과 창의적 대담함을 결합한 디지털 경험을 위한 하이엔드 건축 회사.

02

컬러

#DCFF4FAccent
#FAF9F4Ink
#000000BG
#151515BG soft
#888888Muted
rgba(250,249,244,0.12)Line

단일 선명한 액센트를 CTA에 사용한 고대비 미니멀리즘으로, 대담하고 집중적인 시각적 계층 구조를 만듭니다.

03

타이포그래피

geometric-sans

모든 주요 텍스트에 기하학적 sans-serif를 사용하여 깨끗하고 모던한 미학을 유지합니다. · 제목은 영향력을 위해 크고 굵게, letter-spacing은 좁게 유지합니다. · 무게 변형을 제한하고, 일관되고 세련된 느낌을 위해 주로 무게 400에 의존합니다.

04

여백

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

일관된 8px 기본 단위와 넉넉한 여백으로 여유롭고 프리미엄 느낌을 만듭니다.

05

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

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

미니멀한 테두리로, 분리를 위해 미묘한 불투명도 변화 또는 가느다란 구분선을 사용합니다.

0px 4px 14px rgba(0, 0, 0, 0.12) · 0px 24px 60px rgba(0, 0, 0, 0.35) · 0px 32px 68px rgba(0, 0, 0, 0.3)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

전체 폭의 비주얼 요소 아래에 왼쪽 정렬 히어로 텍스트가 있고, 격자 기반 프로젝트 쇼케이스로 전환됩니다.

07

모션과 인터랙션

220msmicro
400mssmall
900msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing

페이지 요소를 위한 부드러운 페이드인 및 transform 애니메이션. · 실험적 섹션에서 미묘한 파티클 효과가 있는 동적 비디오 배경. · 향상된 피드백을 위한 상호작용 요소의 hover 전환.

색상 변화, 불투명도 조절 또는 약간의 transform을 통한 미묘한 시각적 피드백. · 부드러운 전환 상태와 즉각적인 시각적 반응.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

11

System Prompt

Madebyon용 프리미엄 디지털 에이전시 웹사이트로, 기하학적 sans-serif 타이포그래피와 어둡고 고대비 미학을 특징으로 합니다. 주요 색상은 블랙(#000000)과 오프화이트(#FAF9F4)이며, CTA 요소를 위한 선명한 노란색-그린 액센트(#DCFF4F)가 있습니다. 디자인은 좁은 letter-spacing, 넉넉한 여백, 동적 비디오 배경을 포함한 몰입감 있는 비주얼 콘텐츠와 함께 대담하고 큰 타이포그래피를 강조합니다. 핵심 원칙은 미니멀리즘, 자신감, 기술적 혁신입니다. 중요한 주의사항: 장식적 글꼴, 여러 액센트 색상, 지저분한 레이아웃, 작은 텍스트, 딱딱한 상자, 두꺼운 테두리를 피하세요. 사이트는 야심 차고 영향력 있는 협업을 통해 디지털 경험의 미래를 만들어간다고 포지셔닝합니다.

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

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

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

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