큐레이션 · 오픈 · 무료

Delba de Oliveira

개발자 교육 전문가를 위한 깔끔하고 타이포그래피 중심의 포트폴리오입니다.

portfoliodev

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

원본 사이트: https://delba.dev

📦 팩 내용 보기 →

디자인 DNA

미니멀개발자 교육에디토리얼깔끔텍스트 중심

잘 타이포그래피된 학술 논문

컬러

#2A2A29Ink

#FAF9F7BG

#666666Muted

rgba(0, 0, 0, 0.1)Line

따뜻한 중립 배경 위의 고대비

타이포그래피

transitional-serif · monospace

display40px · 500
headline24px · 600
body18px · 400
small16px · 400

에디토리얼 미학을 유지하기 위해 디스플레이와 본문 모두에 단일 세리프 계열을 사용합니다. · 제목의 시각적 무게감 계층을 강하게 유지합니다. · 텍스트 블록 내의 가독성을 유지하기 위해 인라인 링크에는 밑줄을 사용합니다.

여백

4px

8px

16px

24px

32px

48px

64px

96px

섹션 간에는 넉넉한 수직 간격을, 목록 내에는 타이트한 리듬을 적용합니다.

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

sm · 0px

md · 0px

lg · 0px

pill · 999px

모바일 레이아웃의 상단에 미세한 테두리를 제외하고는 없음.

레이아웃

1200container

12columns

48pxgutter

768 / 1024breakpoints

데스크톱에서는 두 열 비대칭 그리드, 모바일에서는 단일 열.

모션과 인터랙션

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

최소한 또는 눈에 띄는 모션이 관찰되지 않음.

링크는 색상이나 밑줄 스타일이 변경될 가능성이 높습니다. · 표준 링크 내비게이션.

컴포넌트

button 솔리드 블랙 배경, 화이트 텍스트, 약간 둥근 모서리.
card 없음. 콘텐츠는 플랫한 텍스트 기반 목록 형식으로 제시됩니다.
chip 없음.
input 없음.
hero 큰 세리프 제목과 간략한 소개 단락으로 구성된 미니멀한 텍스트 전용 히어로.

보이스와 금지 목록

톤 전문적이고 직접적이며 간결합니다.
헤드라인 명확하고 묘사적인 섹션 제목.
CTA 대화적이고 행동 지향적.

장식용 그라데이션을 사용하지 마세요 — 스크린샷은 플랫하고 솔리드한 배경을 보여줍니다.
둥근 컨테이너 테두리를 사용하지 마세요 — 스크린샷은 날카롭고 사각적인 모서리를 보여줍니다.
밝고 높은 크로마 악센트 색상을 사용하지 마세요 — 스크린샷은 철저한 모노크롬 팔레트를 보여줍니다.
본문 텍스트에 산세리프를 사용하지 마세요 — 스크린샷은 디스플레이와 본문 모두에 세리프를 보여줍니다.
복잡한 카드나 패널을 사용하지 마세요 — 스크린샷은 단순하고 박스 없는 콘텐츠 블록을 보여줍니다.
UI 요소에 드롭 섀도우를 사용하지 마세요 — 스크린샷은 완전히 플랫한 디자인을 보여줍니다.
피하기: 전문 용어가 많거나 지나치게 복잡한 언어를 피합니다.
피하기: 콘텐츠에서 주의를 산만하게 하는 장식 요소를 피합니다.
피하기: 캐주얼한 속어나 지나치게 열정적인 어조를 피합니다.

팩 안의 실제 스크린샷

Delba de Oliveira — 桌面首屏（hero） — 桌面首屏（hero）

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

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

System Prompt

이 디자인은 개발자 교육 전문가를 위한 정제된 에디토리얼 스타일 포트폴리오입니다. 따뜻한 오프화이트(#FAF9F7) 배경에 블랙과 다크 그레이의 모노크롬 팔레트를 활용합니다. 타이포그래피는 핵심 요소로, 제목과 본문 텍스트 모두에 트지션션 세리프를 사용합니다. 레이아웃은 데스크톱에서 깔끔한 두 열 비대칭 그리드로, 가독성에 초점을 맞춥니다. 중요하지 않은 사항으로는: 장식용 그라데이션 피하기, 둥근 컨테이너 테두리 피하기, 그리고 높은 크로마 악센트 색상을 사용하지 않는 것이 포함됩니다.

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

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

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

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