큐레이션 · 오픈 · 무료

ABC Dinamo

대담한 타이포그래피, 에디토리얼 이미지, 미니멀한 여백 중심 레이아웃을 강조하는 현대적이고 세련된 타입 파운드리 웹사이트입니다.

typefoundry
ABC Dinamo 스크린샷
↓ 디자인 시스템 다운로드 (24 MB)OpenDesign 에서 열기

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

📦 팩 내용 보기 →

01

디자인 DNA

타이포그래피파운드리타입페이스디자인커스텀

디지털 타입을 위한 프리미엄 부티크로, 폰트를 하이엔드 수집 가능한 도구로 취급합니다.

02

컬러

#FEE905Accent
#000000Ink
#FFFFFFBG
#F0F4F6BG quiet
#EBEBEBMuted
rgba(0,0,0,0.1)Line

강렬한 흰색 캔버스, 흑색 타이포그래피, 단일 선명한 노란색 악센트를 갖춘 미니멀한 고대비 팔레트입니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

모든 텍스트는 두께 400을 사용합니다. · 대형 헤드라인은 좁은 자간을 사용합니다. · 라벨용으로 대문자 변환을 절제적으로 사용합니다.

04

여백

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

섹션 간 넉넉한 여백을 두되, 탐색 및 UI 컴포넌트 내부는 타이트하고 구조화된 간격을 유지합니다.

05

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

sm · 4px
md · 12px
lg · 30px
pill · 999px

최소한의 테두리를 사용하며, 경우에 따라 UI 구분을 위해 1px solid black을 적용합니다.

rgb(255, 249, 0) 0px 0px 0px 1px

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

지속적으로 왼쪽 정렬된 탐색 사이드바와 히어로 이미지 및 기능을 위한 중앙/오른쪽 콘텐츠 영역을 갖춘 비대칭 분할 레이아웃입니다.

07

모션과 인터랙션

250msmicro
400mssmall
800msmedium
cubic-bezier(0.1, 0.6, 0.4, 1)easing

페이지 전환을 위한 매끄러운 불투명도 및 배경 페이드. · 마이크로 인터랙션을 위한 cubic-bezier 트랜스폼. · 순차적 요소 로딩을 위한 선형 딜레이.

탐색 및 UI 요소에서 미세한 색상 변화 또는 배경 변경. · 액티브 상태를 통한 즉각적인 피드백.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

ABC Dinamo — 桌面首屏（hero）
桌面首屏（hero）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
ABC Dinamo — 移动首屏
移动首屏

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

11

System Prompt

대담한 타이포그래피, 에디토리얼 이미지, 미니멀한 여백 중심 레이아웃을 강조하는 현대적이고 세련된 타입 파운드리 웹사이트입니다. 최대 대비를 위해 강렬한 흰색 배경과 단색 흑색 텍스트를 사용하며, 경우에 따라 선명한 노란색으로 악센트를 더합니다. 타이포그래피는 주로 깔끔한 기하학적 및 휴머니스트 고딕 카테고리로, 대형 스케일에 좁은 자간의 헤드라인으로 제시됩니다. 지속적으로 왼쪽 정렬된 탐색 사이드바가 인터페이스를 고정합니다. 핵심 헥스 컬러는 #FFFFFF, #000000, #FEE905입니다. 핵심 금지사항: 절대로 볼드 폰트 두께를 사용하지 말고, 다크 모드를 완전히 피하고, 복잡한 그래디언트를 도입하지 말며, 고딕 카테고리로 고수하고, 색상 사용을 철저히 최소로 유지하며, 항상 카드와 칩에는 강하게 둥근 모서리를 사용해야 합니다.

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

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

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

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