← OpenDesign
큐레이션 · 오픈 · 무료
Firstandforemost
따뜻하고 자연적인 톤 및 유기적인 일러스트레이션과 거대하고 임팩트 있는 타이포그래피의 균형을 맞추는 브랜딩 에이전시 웹사이트.
Editorial Bold Typography Clean Calm Refined
01
디자인 DNA
대담한 자연적인 책임감 있는 집단적인 브랜딩
영향과 자연을 중시하는 디자인 에이전시를 위한 현대적인 에디토리얼 레이아웃.
02
컬러
#FF4501Ink
#FFF7F1BG
rgba(255,69,1,1.0)Line
따뜻하고 부드러운 오프화이트 배경 위에 하나의 생생한 오렌지를 주요 전경색으로 사용하는 절제된 고대비 팔레트로, 자연스럽고 임팩트 있는 외관을 만듭니다.
03
타이포그래피
humanist-sans
display 200px · 900heading 80px · 700title 36px · 400body 16px · 400
04
여백
4px
8px
16px
24px
32px
48px
64px
96px
주요 섹션 사이를 구분하는 넉넉한 수직 패딩(160px)과 내부 좁은 간격을 사용합니다.
05
표면 (라운드 / 그림자 / 경계선)
sm · 0px
md · 8px
lg · 80px
pill · 999px
윤곽선 및 분리선용 1px solid rgba(255,69,1,1.0)
rgba(153, 18, 2, 0.36) -32px 32px 80px 0px
06
레이아웃
1280 container
12 columns
24px gutter
768 / 1024 breakpoints
스티키 헤더와 풀宽度 히어로가 있는 단일 칼럼 레이아웃.
07
모션과 인터랙션
220ms micro
400ms small
800ms medium
cubic-bezier(0.25, 0.1, 0.25, 1.0) easing
불투명도 트랜지션 (1s) · 변환 (0.5s ease-in-out)
인터랙티브 요소에서 커서가 포인터로 변경됨; 미묘한 불투명도 트랜지션. · 표준 포인터 상호작용.
08
컴포넌트
button 단순한 텍스트 링크와 호버 효과, 단색 배경 버튼은 보이지 않음. card 뚜렷한 카드는 보이지 않음; 콘텐츠는 열린 레이아웃으로 제시됨. chip 칩은 보이지 않음. input 입력 필드는 보이지 않음. hero 전체 뷰포트 너비에 걸친 거대하고 과장된 타이포그래피와 하단에 오렌지색 식물 일러스트레이션.
09
보이스와 금지 목록
톤 직설적이고 전문적이며, 사명에 중심을 둔 어조. 헤드라인 거대하고 대담하며 선언적인 스타일. CTA 미니멀하고 절제된 스타일, 단순한 텍스트 링크 사용. 경쟁하는 여러 색상을 사용하지 마세요 — 팔레트는 엄격히 오렌지와 오프화이트입니다. 얇고 섬세한 타이포그래피를 사용하지 마세요 — 디자인은 묵직하고 굵은 웨이트에 의존합니다. 모든 것에 표준 그리드 레이아웃을 사용하지 마세요 — 히어로는 거대한 타이포그래피로 그리드를 깹니다. 어두운 배경을 사용하지 마세요 — 사이트는 엄격히 따뜻한 톤의 밝은색입니다. 복잡하고 바쁜 UI 컴포넌트를 사용하지 마세요 — 디자인은 미니멀하고 열려 있습니다. 좁고 비좁은 간격을 사용하지 마세요 — 레이아웃은 넉넉한 여백과 패딩을 사용합니다. 피하기: 기업 용어 피하기: 공격적인 판매 언어 피하기: 다크 모드
10
팩 안의 실제 스크린샷
桌面首屏(hero) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 桌面滚动分段(90% viewport 步进,作为视觉证据) 移动首屏 실제 페이지에서 캡처 · 실 computed styles
11
System Prompt
이 웹사이트는 First and Foremost라는 브랜딩 에이전시를 위한 것입니다. 따뜻한 오프화이트 배경(#FFF7F1)과 모든 텍스트 및 일러스트레이션에 사용되는 하나의 지배적인 생생한 오렌지(#FF4501)를 특징으로 합니다. 타이포그래피는 거대한 규모로 사용되는 휴머니스트산세리프이며, 히어로 텍스트는 200px에 도달합니다. 레이아웃은 미니멀하고 에디토리얼하며, 섹션 간 넉넉한 패딩과 풀宽度 히어로를 사용합니다. 핵심적인 금지 사항은 다음과 같습니다: 어두운 배경을 절대 사용하지 마세요, 경쟁하는 여러 색상을 절대 사용하지 마세요, 얇고 섬세한 타이포그래피를 절대 사용하지 마세요. 전반적인 느낌은 자연스럽고, 대담하며, 책임감 있습니다.
더 보기
en · zh-CN · zh-TW · ja · ko
OpenDesign · curated web aesthetics for AI-readable design DNA · opendesign.cc
왜 수록: 이 사이트는 시각적 혼란 없이 강력하고 기억에 남는 브랜드 아이덴티티를 만들기 위해 단일 고채도 색상과 거대한 타이포그래피를 사용하는 훌륭한 예시입니다.