큐레이션 · 오픈 · 무료

Madebyon

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

01

디자인 DNA

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

02

컬러

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

03

타이포그래피

geometric-sans

• display56px · 400
• h240px · 400
• body16px · 400
• caption12px · 400

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

04

여백

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

05

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

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

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

레이아웃

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

07

모션과 인터랙션

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

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

08

컴포넌트

• button 선명한 액센트 색상(노란색)과 검정 텍스트가 적용된 고대비 알약 모양 버튼, 또는 흰색 텍스트가 있는 윤곽 알약 버튼.
• card 넉넉한 padding, 미묘한 배경 차이, 부드러운 hover 전환이 있는 콘텐츠 카드.
• chip 자주 테두리나 미묘한 배경을 가지며, 내비게이션이나 태그에 사용되는 미니멀 칩.
• input 미묘한 테두리와 명확한 focus 상태가 있는 깨끗하고 미니멀한 입력 필드.
• hero 대형 타이포그래피와 동적 비주얼 배경(비디오/이미지)이 있는 전체 폭의 몰입감 있는 히어로 섹션.

09

보이스와 금지 목록

• 톤 미래지향적 관점을 가진 자신감 있고 선구적이며 전문적인.
• 헤드라인 크고 영향력 있는 타이포그래피를 사용한 대담하고 선언적인 진술.
• CTA 직접적이고 행동 지향적이며, 높은 참여를 유도하기 위해 고대비 버튼을 사용합니다.

• 장식적 또는 세리프 글꼴을 사용하지 마세요 — 스크린샷은 전체적으로 깨끗한 기하학적 sans-serif를 보여줍니다.
• 여러 액센트 색상을 사용하지 마세요 — 스크린샷은 하나의 지배적인 액센트(노란색-그린)만 보여줍니다.
• 불필요한 요소로 인터페이스를 복잡하게 하지 마세요 — 스크린샷은 넉넉한 여백과 미니멀한 UI를 보여줍니다.
• 작고 비좁은 타이포그래피를 사용하지 마세요 — 스크린샷은 넉넉한 간격으로 크고 읽기 쉬운 텍스트를 보여줍니다.
• 딱딱하고 네모난 레이아웃을 사용하지 마세요 — 스크린샷은 유동적이고 유기적인 요소와 둥근 모서리를 보여줍니다.
• 분리를 위해 두꺼운 테두리에 의존하지 마세요 — 스크린샷은 대신 미묘한 간격과 배경 차이를 보여줍니다.
• 피하기: 기술 용어
• 피하기: 지나치게 비공식적인 언어
• 피하기: 불확실하거나 주저하는 어조

10

팩 안의 실제 스크린샷

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

11

System Prompt

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