큐레이션 · 오픈 · 무료

Cognition

인간의 역량을 확장하는 자율 소프트웨어 엔지니어.

01

디자인 DNA

소프트웨어 개발의 미래를 위한 건축 설계도.

02

컬러

주요 인터랙션을 위한 단 하나의 굵은 일렉트릭 블루 악센트가 포함된 고대비 모노크롬.

03

타이포그래피

transitional-serif · geometric-sans · monospace

• display56px · 400
• heading20px · 400
• body16px · 400
• caption12px · 400

크고 임팩트 있는 헤드라인에는 트랜지션 세리프를 사용합니다. · 본문 및 UI 요소에는 기하학산스를 사용합니다. · 모든 요소에서 일관된 폰트 웨이트 400을 유지합니다.

04

여백

메인 컨테이너에 64px 수평 패딩을 적용한 넉넉한 여백.

05

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

rgba(0,0,0,0.1)를 사용한 은은한 1px 테두리

06

레이아웃

데스크톱에서 왼쪽에 고정된 내비게이션 바를 갖춘 깔끔한 12열 그리드.

07

모션과 인터랙션

요소 등장 시 부드러운 불투명도 전환. · 인터랙티브 요소를 위한 은은한 hover 상태.

은은한 색상 변화 또는 불투명도 변경. · 최소한의 지연으로 즉각적인 피드백.

08

컴포넌트

• button 주요 액션에는 흰색 텍스트가 포함된 블랙 채우기, 보조 액션에는 아웃라인 또는 텍스트 기반 스타일.
• card 기사용 깔끔한 레이아웃으로, 일반적으로 제목과 날짜를 포함합니다.
• chip 작은 모노스페이스 폰트를 사용한 단순한 태그 또는 메타데이터 레이블.
• input 단순 폼을 위한 미니멀하고 테두리 없는 텍스트 입력.
• hero 넓은 마진과 보조 배경 블록을 갖춘 크고 중앙 정렬된 텍스트 블록.

09

보이스와 금지 목록

• 톤 엔지니어링의 미래에 초점을 맞춘 권위 있으면서도 협력적인 어조.
• 헤드라인 제품의 핵심 역량에 대한 굵고 직접적인 진술.
• CTA '역할 탐색'과 같은 명확하고 실행 지향적인 문구.

• 여러 고채도 색상을 사용하지 마세요 — 스크린샷은 파란색 악센트 하나가 포함된 주로 흑백 팔레트를 보여줍니다.
• 주요 요소에 둥근 모서리를 사용하지 마세요 — 스크린샷은 버튼과 카드의 날카롭고 사각적인 모서리를 보여줍니다.
• 무거운 드롭 섀도우를 사용하지 마세요 — 스크린샷은 최소한의 깊이를 가진 플랫하고 깔끔한 디자인을 보여줍니다.
• 복잡한 배경을 사용하지 마세요 — 스크린샷은 단색의 밝은 중립 배경(#F7F6F5)을 보여줍니다.
• 굵은 폰트 웨이트를 사용하지 마세요 — 스크린샷은 모든 텍스트에 일관된 400 폰트 웨이트를 보여줍니다.
• 헤드라인에 산세리프를 사용하지 마세요 — 스크린샷은 메인 히어로 텍스트에 트랜지션 세리프가 사용됨을 보여줍니다.
• 피하기: 지나치게 기술적인 전문 용어
• 피하기: 과장된 마케팅 언어
• 피하기: 성가신 팝업

10

팩 안의 실제 스크린샷

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

11

System Prompt

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