큐레이션 · 오픈 · 무료

Drawhistory

대지색과 다크 카드의 대비를 통해 회사 합병을 공지하는 이중 칼럼 에디토리얼 레이아웃입니다.

AgencyCase StudyCleanBold TypographyPremium
Drawhistory 스크린샷
↓ 디자인 시스템 다운로드 (16 MB)OpenDesign 에서 열기

원본 사이트: https://drawhistory.com

📦 팩 내용 보기 →

01

디자인 DNA

임팩트디자인전략통합공지

격식 있으면서도 따뜻한 기업 공지 카드

02

컬러

#ff6714Accent
#f2e9e1Ink
#101010BG
#3d3b31BG soft
#808080Muted
rgba(242, 233, 225, 0.4)Line

다크 배경과 따뜻한 밝은 텍스트 사이의 높은 대비, 그리고 단일한 선명한 오렌지 강조색을 사용합니다.

03

타이포그래피

geometric-sans · humanist-sans · monospace

버튼과 공지 배너는 전체 대문자 사용 · 큰 디스플레이 제목은 타이트한 트래킹 적용 · 대문자 UI 레이블에는 모노스페이스 사용

04

여백

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

카드 내부에 일관된 32px 및 24px 패딩

05

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

sm · 8px
md · 16px
lg · 16px
pill · 9999px

내부 요소를 분리하는 미묘한 밝은 테두리

06

레이아웃

1280container
2columns
32pxgutter
768 / 1024breakpoints

다크 배경에 중앙 정렬된 두 개의 긴 카드와 풀宽 상단 배너

07

모션과 인터랙션

150msmicro
300mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

hover 시 부드러운 색상 및 투명도 전환 · 텍스트 장식 전환

상호작용 요소에 미묘한 전환 · 모든 상호작용 요소에 포인터 커서

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

이 사이트는 고표준, 차분한 팔레트를 사용하는 디자인 에이전시 공지 페이지입니다. 레이아웃은 다크 배경에 중앙 정렬된 두 개의 큰 다크 카드(다크 올리브 #3d3b31 및 차콜 #101010)를 특징으로 합니다. 주요 색상은 #f2e9e1(텍스트), #101010(배경), #ff6714(강조)입니다. 타이포그래피는 디스플레이에 기하학적 sans, 레이블에 모노스페이스에 의존합니다. 중요 금지 사항: 절대 볼드 웨이트 사용하지 않음(모두 정규체), 밝거나 네온 색상 피하고, 레이어링을 위해 드롭 섀도우를 사용하지 않습니다.

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

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

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

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