큐레이션 · 오픈 · 무료

Atlason

가구 및 제품 작업을 선보이는 하이엔드 디자인 스튜디오 포트폴리오입니다.

01

디자인 DNA

작품이 스스로 말하게 하는 고급 디자인 갤러리입니다.

02

컬러

고대비 사진에 의존하는 엄격한 흑백 기반 원칙입니다.

03

타이포그래피

grotesque-sans

• display230px · 400
• heading106px · 500
• body16px · 400

대형 디스플레이 제목에는 타이트한 letterSpacing을 사용합니다 · 모든 텍스트 블록은 엄격하게 좌측 정렬을 유지합니다 · 텍스트에 그림자나 장식적 효과를 사용하지 않습니다

04

여백

주요 섹션 사이에는 큰 간격을, 콘텐츠 블록 내부에는 더 타이트한 그룹핑을 적용하는 비대칭 리듬입니다.

05

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

메인 인터페이스 요소에는 보이는 테두리가 없습니다. 구분을 위해 여백에 의존합니다.

06

레이아웃

데스크톱에서는 비대칭 다중 칼럼 격자, 모바일에서는 단일 칼럼 스택 배치입니다.

07

모션과 인터랙션

스크롤 시 이미지와 요소의 매끄러운 불투명도 페이드 · hover 시 미묘한 스케일 및 translate 변환

인터랙티브 요소에 미묘한 불투명도 감소 또는 약간의 스케일 증가를 적용합니다. · 즉시 내비게이션 또는 전환을 실행합니다.

08

컴포넌트

• button hover 시 미묘한 불투명도 전환이 있는 텍스트 전용 링크입니다.
• card 최소한 또는 테두리가 없는 이미지 격자로, 캡션과의 근접성에 의존합니다.
• hero 대형 풀블리드 또는 분할 화면 이미지와 결합된 대규모 타이포그래피입니다.

09

보이스와 금지 목록

• 톤 자신감 있고 절제되며 전문적인 어조입니다.
• 헤드라인 대규모 타이포그래피의 굵고 선언적인 문구입니다.
• CTA 간단한 화살표 아이콘을 동반하는 미니멀리스트 텍스트 링크입니다.

• 밝은 강조색을 사용하지 마세요 — 스크린샷은 엄격한 흑백 팔레트를 보여줍니다
• 이미지에 그림자를 추가하지 마세요 — 스크린샷은 깔끔하고 플랫한 프레젠테이션을 보여줍니다
• 텍스트를 중앙 정렬하지 마세요 — 스크린샷은 강한 좌측 정렬 타이포그래피를 보여줍니다
• 컨테이너에 둥근 모서리를 사용하지 마세요 — 스크린샷은 날카롭고 직사각형 모서리를 보여줍니다
• 헤더에 세리프 폰트를 사용하지 마세요 — 스크린샷은 굵고 현대적인 grotesque sans-serif를 보여줍니다
• 아이콘으로 UI를 혼잡하게 만들지 마세요 — 스크린샷은 내비게이션에 텍스트와 이미지에 의존합니다
• 피하기: 지나친 형용사나 마케팅성 표현
• 피하기: 밝고 대비되는 색상 팔레트
• 피하기: 그림자나 둥근 모서리 같은 장식적 UI 요소
• 피하기: 빽빽한 본문 텍스트 블록

10

팩 안의 실제 스크린샷

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

11

System Prompt

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