큐레이션 · 오픈 · 무료

Dyotanya

표현력 있는 세리프 타이포그래피와 유동적 레이아웃을 활용하여 크리에이티브함을 전달하는 공감력 있는 웹 디자이너의 개인 포트폴리오입니다.

PortfolioStudioRefinedTypographyWarm
Dyotanya 스크린샷
↓ 디자인 시스템 다운로드 (13 MB)OpenDesign 에서 열기

원본 사이트: https://dyotanya.com/en

📦 팩 내용 보기 →

01

디자인 DNA

크리에이티브공감력독창적개인적아티스틱

정제된 타이포그래피와 아티스틱한 장식이 결합된 표현력 있는 크리에이티브 포트폴리오.

02

컬러

#81aed9Accent
#000000Ink
#333333Ink soft
#f5f5f3BG
#4f4f4fMuted
rgba(0, 0, 0, 0.1)Line

오프화이트와 검정의 절제된 팔레트가 세련된 캔버스를 만들고, 블루 악센트와 표현력 있는 타이포그래피가 주목받을 수 있도록 합니다.

03

타이포그래피

didone-serif · humanist-sans

04

여백

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

여유로운 4px 기본 격자가 넉넉한 간격을 제공하여 숨 쉬는 듯한 편집 레이아웃을 지원합니다.

05

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

sm · 1px
md · 20px
lg · 30px
pill · 999px

버튼과 같은 요소를 돋보이게 하기 위해 얇고 미세한 테두리나 깔끔한 솔리드 box-shadow가 사용됩니다.

5px -5px 0px 0px #333333 · 4px -4px 0px 0px #333333

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

큰 타입 블록과 비대칭 격자를 사용하여 시선을 유도하는 비대칭적이고 자유로운 레이아웃입니다.

07

모션과 인터랙션

100msmicro
250mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

background-color 및 box-shadow와 같은 인터랙티브 요소에서의 미세한 전환. · 포커스된 텍스트 요소를 위한 부드러운 letter-spacing 애니메이션.

인터랙티브 요소에서의 미세한 background-color 및 box-shadow 전환. · 누를 때 약간의 촉각적 감소 또는 색상 변화.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

이것은 공감력 있는 웹 디자이너의 개인 포트폴리오로, 아티스틱하고 정제되며 따뜻한 포지셔닝을 하고 있습니다. 주요 hex 색상은 오프화이트 배경(#f5f5f3), 거의 검은 잉크(#000000, #333333), 그리고 라이트 블루 악센트(#81aed9)를 포함합니다. 타이포그래피는 디스플레이 텍스트용 우아한 디도네 세리프와 본문용 깔끔한 휴머니스트 산세리프를 페어링하여, 표현력 있는 헤드라인과 읽기 좋은 세부 사항 간의 강한 대조를 만듭니다. 레이아웃은 비대칭적이며 유동적이고, 큰 타이포그래피 블록과 넉넉한 여백을 사용합니다. 중요한 지침: 격자에 고정된 레이아웃을 사용하지 마세요, 밝은 색상을 과도하게 사용하지 마세요, 헤드라인에 기하학적 산세리프를 사용하지 마세요, 표준적이고 평평한 버튼을 사용하지 마세요, 솔리드 블랙 배경을 사용하지 마세요, 그리고 불필요한 요소로 인터페이스를 복잡하게 만들지 마세요.

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

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

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

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