큐레이션 · 오픈 · 무료

Gt Maru

친근한 성격을 가진, 장난스럽고 따뜻하며 둥근 타이포그래피 샘플입니다.

TypographyPlayfulConsumerWarmCalm
Gt Maru 스크린샷
↓ 디자인 시스템 다운로드 (3 MB)OpenDesign 에서 열기

원본 사이트: https://gt-maru.com

📦 팩 내용 보기 →

01

디자인 DNA

친근한장난스러운둥근일본풍타이포그래피

따뜻하고 친근하며 장난스러운 타이포그래피 샘플로, 부드럽고 둥근 캐릭터 같은 느낌을 줍니다.

02

컬러

#FFC800Accent
#000000Ink
#0068FFBG
#B3D9FFBG quiet
#83BBFFMuted
rgba(0,104,255,1.0)Line

대비가 높은 주요 파란색과 노란색에 장난스러운 핑크 포인트와 뚜렷한 검은색 윤곽선을 사용합니다.

03

타이포그래피

rounded-sans · rounded-mono

모든 타이포그래피는 둥근 단자와 친근하고 캐주얼한 톤이 특징인 GT Maru 폰트 패밀리로 설정합니다. · 큰 디스플레이 텍스트의 자간은 타이트하고 응집력 있는 단어 형태를 유지하기 위해 음수 값으로 설정합니다. · 본문 텍스트의 행간은 가독성을 위해 넉넉하게 설정합니다(약 1.15-1.2).

04

여백

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

여유롭고 자연스러우며, 콘텐츠 블록 주변에 넉넉한 패딩(30px)을 둡니다.

05

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

sm · 5px
md · 10px
lg · 30px
pill · 999px

모양과 텍스트를 정의하는 주요 디자인 요소로 두꺼운 검은색 윤곽선(2px-3px)을 사용합니다.

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

타이포그래피가 숨쉴 수 있도록 상당한 여백을 둔 넉넉하고 개방적인 레이아웃입니다.

07

모션과 인터랙션

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

레이아웃 전환을 위한 부드러운 margin-top 트랜지션. · UI 요소를 위한 미세한 불투명도 및 변환 트랜지션.

상호작용을 나타내는 표준 포인터 커서입니다. · 표준 포인터 인터랙션입니다.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

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

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

11

System Prompt

GT Maru 타이포그래피 샘플에서 영감을 받은 장난스럽고 따뜻하며 친근한 인터페이스를 디자인하세요. 밝은 노란색(#FFC800) 포인트와 함께 활기찬 주요 파란색(#0068FF) 배경을 사용하세요. 타이포그래피는 두꺼운 검은색 윤곽선과 넉넉한 자간을 가진 둥근 고딕 서체로 전용 사용해야 합니다. 레이아웃은 상당한 여백을 가진 개방적이고 여유로워야 합니다. 중요 금지 사항: 날카롭고 기하학적인 고딕 서체, 얇거나 미세한 테두리, 어둡거나 무채색 팔레트, 밀집된 레이아웃, 드롭 섀도우, 세리프 서체를 피하세요. 전반적인 느낌은 캐주얼하고 접근하기 쉬우며 시각적으로 부드러워야 마치 친근한 캐릭터와 같습니다.

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

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

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

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