큐레이션 · 오픈 · 무료

Firstandforemost

따뜻하고 자연적인 톤 및 유기적인 일러스트레이션과 거대하고 임팩트 있는 타이포그래피의 균형을 맞추는 브랜딩 에이전시 웹사이트.

01

디자인 DNA

영향과 자연을 중시하는 디자인 에이전시를 위한 현대적인 에디토리얼 레이아웃.

02

컬러

따뜻하고 부드러운 오프화이트 배경 위에 하나의 생생한 오렌지를 주요 전경색으로 사용하는 절제된 고대비 팔레트로, 자연스럽고 임팩트 있는 외관을 만듭니다.

03

타이포그래피

humanist-sans

• display200px · 900
• heading80px · 700
• title36px · 400
• body16px · 400

04

여백

주요 섹션 사이를 구분하는 넉넉한 수직 패딩(160px)과 내부 좁은 간격을 사용합니다.

05

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

윤곽선 및 분리선용 1px solid rgba(255,69,1,1.0)

rgba(153, 18, 2, 0.36) -32px 32px 80px 0px

06

레이아웃

스티키 헤더와 풀宽度 히어로가 있는 단일 칼럼 레이아웃.

07

모션과 인터랙션

불투명도 트랜지션 (1s) · 변환 (0.5s ease-in-out)

인터랙티브 요소에서 커서가 포인터로 변경됨; 미묘한 불투명도 트랜지션. · 표준 포인터 상호작용.

08

컴포넌트

• button 단순한 텍스트 링크와 호버 효과, 단색 배경 버튼은 보이지 않음.
• card 뚜렷한 카드는 보이지 않음; 콘텐츠는 열린 레이아웃으로 제시됨.
• chip 칩은 보이지 않음.
• input 입력 필드는 보이지 않음.
• hero 전체 뷰포트 너비에 걸친 거대하고 과장된 타이포그래피와 하단에 오렌지색 식물 일러스트레이션.

09

보이스와 금지 목록

• 톤 직설적이고 전문적이며, 사명에 중심을 둔 어조.
• 헤드라인 거대하고 대담하며 선언적인 스타일.
• CTA 미니멀하고 절제된 스타일, 단순한 텍스트 링크 사용.

• 경쟁하는 여러 색상을 사용하지 마세요 — 팔레트는 엄격히 오렌지와 오프화이트입니다.
• 얇고 섬세한 타이포그래피를 사용하지 마세요 — 디자인은 묵직하고 굵은 웨이트에 의존합니다.
• 모든 것에 표준 그리드 레이아웃을 사용하지 마세요 — 히어로는 거대한 타이포그래피로 그리드를 깹니다.
• 어두운 배경을 사용하지 마세요 — 사이트는 엄격히 따뜻한 톤의 밝은색입니다.
• 복잡하고 바쁜 UI 컴포넌트를 사용하지 마세요 — 디자인은 미니멀하고 열려 있습니다.
• 좁고 비좁은 간격을 사용하지 마세요 — 레이아웃은 넉넉한 여백과 패딩을 사용합니다.
• 피하기: 기업 용어
• 피하기: 공격적인 판매 언어
• 피하기: 다크 모드

10

팩 안의 실제 스크린샷

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

11

System Prompt

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