큐레이션 · 오픈 · 무료

Cuberto

대형 세리프 제목과 다크 포토그래피 히어로 섹션을 활용하여 프리미엄, 공예 우선 아이덴티티를 확립하는 단색 에이전시 포트폴리오.

agencymotioninteraction
Cuberto 스크린샷
↓ 디자인 시스템 다운로드 (15 MB)OpenDesign 에서 열기

원본 사이트: https://cuberto.com

📦 팩 내용 보기 →

01

디자인 DNA

프리미엄전문성디지털 공예대담함미니멀

거대한 대비와 자신감 넘치는 타이포그래피로 표현하는 하이엔드 디자인 및 엔지니어링 스튜디오.

02

컬러

#000000Ink
#FFFFFFBG
#161616BG quiet
#888888Muted
rgba(0,0,0,0.1)Line

거대한 흑백 대비를 사용한 엄격한 단색 계층 구조로, 고품질 포토그래피가 유일한 색상을 제공하도록 설정합니다.

03

타이포그래피

grotesque-sans

대형 디스플레이 텍스트에는 단단하고 건축적인 느낌을 주기 위해 타이트한 트래킹 (예: -1.62px)을 사용합니다. · 작은 텍스트에는 높은 가독성을 유지하기 위해 넉넉한 트래킹 (예: 0.468px)을 사용합니다. · 폰트 웨이트는 주로 레귤러 (400)로 제한하고, 강조를 위해 볼드 (700)는 절제하여 사용합니다.

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

비대칭적이고 여유로운 리듬으로, 주요 섹션 간에 큰 간격 (예: 90px)을 사용하여 콘텐츠에 숨을 쉬게 합니다.

05

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

sm · 18px
md · 18px
lg · 72px
pill · 99999px

인터랙티브 요소와 구분선에만 최소한의 1px 실선 테두리를 사용합니다.

없음

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

전체 너비 미디어와 중앙 정렬 타이포그래피를 사용한 대규모 히어로 섹션에서 2열 프로젝트 그리드로 전환되는 구조.

07

모션과 인터랙션

300msmicro
400mssmall
1200msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing

페이지 트랜지션과 요소 표시를 위한 부드러운 물리 기반 슬라이딩. · 인터랙티브 프롬프트를 위한 지속적이고 회전하는 원형 텍스트 배지.

방해 없이 피드백을 제공하기 위한 인터랙티브 요소의 미세한 스케일링 또는 불투명도 변화. · 미세한 모션을 동반한 부드럽고 즉각적인 상태 변화.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

11

System Prompt

이것은 극도의 미니멀리즘과 대담한 타이포그래피가 특징인 하이엔드 디지털 디자인 에이전시 포트폴리오입니다. 색상 팔레트는 순백 (#FFFFFF), 진검정 (#000000), 그리고 보조 텍스트를 위한 연한 회색 (#888888)으로 엄격하게 단색을 따릅니다. 타이포그래피는 기하학적 고딕sans-serif 폰트를 대형 디스플레이 크기 (81px)와 소형 UI 스케일 모두에서 사용합니다. 레이아웃은 여유롭게 설계되어 높은 대비를 완화하기 위해 큰 간격과 둥근 모서리 (18px)를 사용합니다. 핵심 주의 사항: 밝은 강조 색상의 사용을 피하고, 절대 장식적이거나 세리프 폰트를 사용하지 않으며, 과도한 UI 컴포넌트로 화면을 채우지 않습니다. 전체적으로 프리미엄하고 정제되며 건축적인 느낌을 유지합니다.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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