큐레이션 · 오픈 · 무료

Svz

프리미엄 디지털 에이전시를 위한 대담한 타이포그래피와 다크한 정교함.

AgencyPortfolioBold TypographyDark ModePremium

Svz 스크린샷

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

원본 사이트: https://www.svz.io

📦 팩 내용 보기 →

01

디자인 DNA

디지털 에이전시브랜드 구축대담한프리미엄

대담한 편집 스타일 타이포그래피와 어둡고 정교한 분위기를 갖춘 프리미엄 디자인 에이전시 포트폴리오입니다.

02

컬러

#FF4D5CAccent

#fcfcfcInk

#f3efefInk soft

#080808BG

#262525BG soft

#0d0d0dBG quiet

rgba(255,255,255,0.1)Line

생생한 코랄 악센트가 있는 고대비 다크 모드

03

타이포그래피

transitional-serif · humanist-sans

display64px · 700
display32px · 400
body14px · 400

내비게이션과 레이블에는 대문자 사용 · 타이포그래피 대비를 위해 세리프와 산세리프 혼합 · 큰 디스플레이 텍스트에는 타이트한 letter-spacing

04

여백

4px

8px

12px

16px

24px

32px

48px

64px

96px

넉넉한 여백을 가진 일관된 4px 기본 그리드

05

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

sm · 2px

md · 4px

lg · 8px

pill · 999px

1px solid rgba(255,255,255,0.1)

rgba(255, 255, 255, 0.2) 0px 2px 5px 0px inset

06

레이아웃

1280container

12columns

24pxgutter

768 / 1024breakpoints

중앙 정렬된 콘텐츠 컨테이너가 있는 전체 폭의 다크 섹션

07

모션과 인터랙션

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

부드러운 페이드인 전환 · 배경 요소 parallax · hover 상태 애니메이션

색상 전환과 불투명도 변화 · 상태 변화를 통한 시각적 피드백

08

컴포넌트

button 대문자 텍스트와 화살표 아이콘이 있는 테두리 버튼
card 섬세한 테두리와 hover 상태가 있는 다크 카드
chip 작은 대문자 태그 또는 레이블
input 미니멀한 테두리 없는 입력 필드
hero 큰 타이포그래피 헤드라인과 기하학적 배경 요소가 있는 전체 화면 다크 섹션

09

보이스와 금지 목록

톤 자신감 있는, 프리미엄, 약간 도발적인
헤드라인 대담하고 모두 대문자인 디스플레이 타입, 세리프/산세리프 혼합
CTA 직관적이고 행동 지향적이며 화살표 표시 포함

밝은 배경을 사용하지 마세요 — 스크린샷은 주로 다크(#080808) 테마를 보여줍니다
본문 텍스트에 장식 폰트를 사용하지 마세요 — 스크린샷은 UI 요소에 깔끔한 산세리프를 보여줍니다
버튼에 둥근 모서리를 추가하지 마세요 — 스크린샷은 미니멀한 반지름의 직사각형 버튼을 보여줍니다
강조를 위해 흐린 색상을 사용하지 마세요 — 스크린샷은 다크 배경 위의 고대비 흰 텍스트를 보여줍니다
헤드라인에 작은 글꼴 크기를 사용하지 마세요 — 스크린샷은 큰 64px 디스플레이 텍스트를 보여줍니다
대문자 내비게이션을 피하지 마세요 — 스크린샷은 모두 대문자 내비게이션 항목을 보여줍니다
피하기: 캐주얼한 언어
피하기: 지나치게 전문적인 전문 용어
피하기: 일반적인 기업 표현

10

팩 안의 실제 스크린샷

Svz — 桌面首屏（hero） — 桌面首屏（hero）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Svz — 移动首屏 — 移动首屏

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

11

System Prompt

어둡고 정교한 분위기를 가진 프리미엄 디지털 에이전시 포트폴리오입니다. 주요 색상: #080808 배경, #fcfcfc 흰 텍스트, #FF4D5C 코랄 악센트. 타이포그래피는 전환형 세리프 디스플레이와 휴머니스트 산세리프 본문을 혼합합니다. 중요한 주의사항: 밝은 배경은 절대 사용하지 마세요, 장식적인 본문 폰트를 피하세요, 고대비를 유지하세요, 대문자 내비게이션을 사용하세요, 버튼은 미니멀한 반지름의 직사각형으로 유지하세요. 포지셔닝: 미래 지향적 브랜드를 위한 대담한 에이전시. 레이아웃은 넉넉한 여백을 가진 12열 그리드를 사용합니다.

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

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

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

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