큐레이션 · 오픈 · 무료

Dogstudio

Dogstudio는 예술, 디자인, 기술의 교차점에 위치한 다学科적 창의 스튜디오입니다.

agencycreative

↓ 디자인 시스템 다운로드 (30 MB)OpenDesign 에서 열기

원본 사이트: https://dogstudio.co

📦 팩 내용 보기 →

디자인 DNA

다学科적창의적대담한실험적인아트-테크

디지털 아트 갤러리와 하이엔드 디자인 스튜디오가 만나는 곳.

컬러

#E43333Accent

#FFFFFFInk

#A0A8DCInk soft

#131419BG

#0E101ABG soft

#1E1F26BG quiet

#A0A8DCB3Muted

rgba(255, 255, 255, 0.1)Line

깊은 블루 톤을 품은 고대비 다크 캔버스에 날카로운 단일 레드 액센트가 역동적인 에너지를 더합니다.

타이포그래피

didone-serif · humanist-sans · monospace

display120px · 500
heading50px · 500
body14px · 400
small11px · 400

헤드라인에 최대 임팩트를 위해 고대비 디도네 세리프를 사용합니다. · 본문 및 UI에는 깔끔한 기하학적 휴머니스트 산스세리프를 페어링합니다. · 고급스러운 느낌을 위해 대문자 메타데이터에 넓은 자간을 적용합니다. · 시각적 위계 유지를 위해 세리프는 주요 디스플레이 순간에만 제한적으로 사용합니다.

여백

4px

8px

16px

24px

32px

48px

64px

96px

넓은 타이포그래피와 3D 비주얼이 뷰포트를 지배할 수 있도록 개방적이고 숨 쉬는 간격입니다.

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

sm · 3px

md · 4px

lg · 20px

pill · 100px

최소화된, 얇은 1px 테두리를 절제된 방식으로 사용하여 미세한 구분을 만듭니다.

0px 1px 1px 0px rgba(0,0,0,0.15) · 0px 1px 2px 0px rgba(0,0,0,0.15) · 0px 0px 2px 0px rgba(0,0,0,0.4) · 0px 0px 5px 0px rgba(0,0,0,0.2)

레이아웃

1440container

12columns

24pxgutter

768 / 1024breakpoints

풀블리드 히어로 섹션과 떠다니는 3D 요소를 갖춘 비대칭 에디토리얼 레이아웃입니다.

모션과 인터랙션

220msmicro

400mssmall

800msmedium

cubic-bezier(0.165, 0.84, 0.44, 1)easing

색상 및 transform 속성을 위한 부드럽고 유동적인 전환. · 콘텐츠를 노출하기 위한 스태거드 페이드인 및 슬라이드업 애니메이션. · 커서 움직임에 미세하게 반응하는 인터랙티브 3D 모델.

미세한 색상 전환과 스케일 변환, 종종 레드 액센트 요소의 출현을 동반합니다. · 부드러운 transform 전환을 통한 즉각적이고 촉각적인 피드백.

컴포넌트

button 투명 배경, 흰색 텍스트, 그리고 인터랙티브 상태를 위한 작은 레드 액센트 표시기가 있는 알약 형태의 컨테이너입니다.
card 미니멀하며 종종 투명하여, 3D 모델이나 큰 타이포그래피가 주요 비주얼 역할을 합니다.
chip 대문자 텍스트와 넓은 자간이 적용된 작은 알약 형태의 레이블입니다.
input 미니멀한 장식의 깔끔하고 절제된 텍스트 필드입니다.
hero 큰 3D 모델과 대담한, 중앙 정렬 또는 비대칭 타이포그래피를 특징으로 하는 몰입형 풀 뷰포트 섹션입니다.

보이스와 금지 목록

톤 대담하고 거침없으며, 지적 세련미가 은은히 감도는 창의적인 어조입니다.
헤드라인 선언적이고 임팩트가 강하며, 종종 단 하나의 큰 디도네 세리프 단어 또는 구절을 사용합니다.
CTA 직설적이고 자신감 넘치며, 보통 작은 유색 화살표나 표시기가 동반됩니다.

복잡한 레이아웃을 사용하지 마세요 — 스크린샷은 큰 요소에 숨 쉴 공간을 주는 깔끔한 에디토리얼 그리드를 보여줍니다.
다양한 밝은 색상을 사용하지 마세요 — 스크린샷은 날카로운 레드 액센트만으로 지배적인 다크 팔레트를 보여줍니다.
헤드라인에 산스세리프만 사용하지 마세요 — 스크린샷은 최대 디스플레이 임팩트를 위해 고대비 디도네 세리프를 보여줍니다.
메타데이터에 좁은 자간을 사용하지 마세요 — 스크린샷은 날짜와 레이블을 위해 넓고 트래킹된 대문자 텍스트를 보여줍니다.
모든 섹션에 무겁고 단색 배경을 사용하지 마세요 — 스크린샷은 미세한 그라데이션이 있는 깊고 어둡고 분위기 있는 배경을 보여줍니다.
작고 비좁은 UI 요소를 사용하지 마세요 — 스크린샷은 크고 넉넉한 터치 타겟과 명확한 인터랙티브 영역을 보여줍니다.
피하기: 기업 전문 용어
피하기: 수동적인 언어
피하기: 복잡한 인터페이스

팩 안의 실제 스크린샷

Dogstudio — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

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

System Prompt

Dogstudio는 예술, 디자인, 기술에 초점을 맞춘 다学科적 창의 스튜디오입니다. 디자인 언어는 대담하고 실험적이며, 깊은 차콜/네이비 배경(#131419)과 날카로운 단일 레드 액센트(#E43333)로 특징지어지는 몰입형 다크 모드 미학이 특징입니다. 타이포그래피는 핵심 기둥으로, 거대한 디스플레이 텍스트에는 고대비 디도네 세리프를, UI 및 본문 카피에는 깔끔한 휴머니스트 산스세리프를 사용합니다. 주요 헥스 색상은 기본 잉크 #FFFFFF, 소프트 잉크 #A0A8DC, 액센트 #E43333입니다. 핵심 금지 사항: 복잡한 레이아웃 사용 금지, 다양한 밝은 색상 도입 금지, 헤드라인에 산스세리프만 사용 금지, 메타데이터에 좁은 자간 사용 금지, 무겁고 단색 배경 사용 금지, 작고 비좁은 UI 요소 사용 금지.

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

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

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

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