큐레이션 · 오픈 · 무료

Soulwire

크리에이티브 코더 및 엔지니어를 위한 미니멀하고 고정폭 기반의 포트폴리오입니다.

DeveloperPortfolioDark ModeMonospaceClean

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

원본 사이트: https://soulwire.co.uk

📦 팩 내용 보기 →

디자인 DNA

creative codergenerative designinteractiveminimal

터미널과 같은 개인 포트폴리오

컬러

#E2E6E8Ink

#16191BBG

rgba(226,230,232,1.0)Line

배경은 거의 검정색, 텍스트는 밝은 회색으로 구성된 엄격한 모노크롬 팔레트

타이포그래피

monospace

display24px · 300

모든 텍스트는 고정폭 · 전체적으로 가벼운 무게감(300) 사용 · 섹션 레이블에는 대문자와 자간 적용

여백

4px

8px

16px

24px

32px

48px

64px

96px

섹션 사이에 넉넉한 여백을 둔 선형적이고 예측 가능한 리듬

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

sm · 0px

md · 0px

lg · 0px

pill · 999px

보이는 테두리 없음

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

전체 너비의 어두운 배경 위에 중앙 정렬된 콘텐츠 컬럼

모션과 인터랙션

220msmicro

400mssmall

800msmedium

cubic-bezier(0.23, 1, 0.32, 1)easing

요소 등장 시 불투명도 전환

인터랙티브 요소에 포인터 커서 · 표준 브라우저 동작

컴포넌트

button 포인터 커서를 사용하는 단순한 고정폭 텍스트 링크
card 없음
chip 없음
input 없음
hero 큰 제목과 간단한 자기소개가 포함된 좌측 정렬 텍스트 블록

보이스와 금지 목록

톤 전문적이고 직접적이며 미니멀한
헤드라인 단순하고 대화적이며 큰
CTA 일반 고정폭 텍스트 링크

세리프 서체를 사용하지 마세요 — 스크린샷에는 오직 고정폭 서체만 표시
밝거나 채도 높은 색상을 사용하지 마세요 — 스크린샷에는 엄격한 흑백 팔레트가 표시
그림자나 깊이를 추가하지 마세요 — 스크린샷에는 완전히 평면적인 표면이 표시
요소에 둥근 모서리를 사용하지 마세요 — 스크린샷에는 날카롭거나 모서리가 없는 형태가 표시
전통적인 내비게이션 바를 사용하지 마세요 — 스크린샷에는 레이아웃에 통합된 링크가 표시
텍스트를 중앙 정렬하지 마세요 — 스크린샷에는 좌측 정렬된 콘텐츠 블록이 표시
피하기: 마케팅 용어
피하기: 과도한 장식
피하기: 대화적 여백

팩 안의 실제 스크린샷

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

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

System Prompt

이것은 크리에이티브 코더를 위한 미니멀 개발자 포트폴리오로, 어두운 모노크롬 색상 스킴(배경 #16191B, 텍스트 #E2E6E8)과 엄격한 고정폭 서체 시스템(Roboto Mono)을 특징으로 합니다. 레이아웃은 넉넉한 여백이 있는 중앙 정렬 단일 컬럼 구조이며 테두리나 그림자가 없습니다. 중요한 금지 사항: 세리프 또는 산세리프 서체를 도입하지 말 것, 채도 높은 악센트 컬러를 사용하지 말 것, 요소에 3D 깊이나 둥근 모서리를 추가하지 말 것.

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

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

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

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