큐레이션 · 오픈 · 무료

DIA Studio

고대비의 격자 기반 에디토리얼 인터페이스를 통해 작업을 선보이는 디자인 및 혁신 스튜디오.

01

디자인 DNA

세련되고 서체 중심의 공간에서 큐레이션된 디자인 작업 갤러리.

02

컬러

작업을 위해 최대 대비와 중립적인 표현을 우선시하는 엄격한 모노크롬 팔레트.

03

타이포그래피

transitional-serif

• display56px · 500
• body16px · 450

모든 UI 요소에 세리프 서체(JJannon)를 사용합니다. · 좁은 행간(약 1.1)을 유지하여 밀집된 서체 느낌을 연출합니다. · 액션과 필터의 표준 UI 구분자로 사각 괄호를 사용합니다.

04

여백

최소한의 수직 패딩으로 격자에 맞춰 빡빡하게 배치하여 밀도를 우선시합니다.

05

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

보이는 UI 테두리가 없습니다. 구분은 여백, 색상 대비 및 격자 정렬을 통해 이루어집니다.

06

레이아웃

다양한 종횡비의 이미지를 촘촘하게 배치한 엄격하고 밀집된 메이슨리 그리드 레이아웃.

07

모션과 인터랙션

갤러리 항목의 hover 시 불투명도 페이드

상호작용을 나타내기 위해 이미지 썸네일의 미세한 불투명도 변화. · 프로젝트 페이지 또는 카테고리 뷰로 직접 이동.

08

컴포넌트

• button 전통적인 버튼 없음; 상호작용은 사각 괄호로 감싼 평문 텍스트 링크로 처리됩니다.
• card 프로젝트 카드는 오버레이 없이 밀집된 보더 없는 그리드에 순수 사진 썸네일로 제시됩니다.
• chip 카테고리 필터는 사각 괄호로 감싼 텍스트 기반 목록 항목입니다.
• input 검색은 사각 괄호로 감싼 간단한 텍스트 프롬프트로 표현됩니다.
• hero 히어로 섹션은 단일 큰 이미지가 아니라, 뷰포트 상단부터 연속적이고 끊김 없는 작업 모자이크 그리드입니다.

09

보이스와 금지 목록

• 톤 전문적이고 자신감 있으며 절제된.
• 헤드라인 고전적인 세리프 서체를 사용한 선언적이고 직접적인.
• CTA 전통적인 버튼 대신 사각 괄호를 사용한 미세하고 서체 중심적인.

• 둥근 모서리를 사용하지 마세요 — UI는 엄격하게 날카롭고 직사각형입니다.
• 강한 강조 색상을 사용하지 마세요 — 사이트는 모노크롬 팔레트에만 의존합니다.
• 버튼 컴포넌트를 사용하지 마세요 — 상호작용은 사각 괄호로 감싼 텍스트 링크입니다.
• 드롭 섀도우를 사용하지 마세요 — UI는 완전히 평면적입니다.
• 산세리프 서체를 사용하지 마세요 — 사이트는 엄격히 세리프 기반입니다.
• 큰 수직 간격이 있는 메이슨리 그리드를 만들지 마세요 — 그리드는 촘촘하게 포장됩니다.
• 피하기: 장난스러운 언어
• 피하기: 과장된 마케팅 문구
• 피하기: 과도한 대문자 사용
• 피하기: 이모지 또는 시각적 장식 요소

10

팩 안의 실제 스크린샷

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

11

System Prompt

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