厳選・オープン・無料

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

広々とした有機的なリズム。コンテンツブロックの周りに余裕のあるpadding（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要素のための繊細なopacityとtransformトランジション。

インタラクティブであることを示す標準的なポインターカーソル。 · 標準的なポインターアクション。

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タイプスペシメンにインスパイアされた、遊び心と温かみのあるフレンドリーなインターフェースをデザインしてください。鮮やかなプライマリーブルー（#0068FF）を背景に、明るいイエロー（#FFC800）をアクセントとして使用します。タイポグラフィは角丸サンセリフのみとし、太い黒のアウトラインと十分な文字間隔を確保します。レイアウトはオープンで広々としており、多量のネガティブスペースを確保します。重要な禁止事項：鋭角的で幾何学的なサンセリフフォント、細く控えめなボーダー、暗いまたは控えめなカラーパレット、密集したレイアウト、影、セリフ体のタイポグラフィは避けてください。全体的な雰囲気はカジュアルで親しみやすく、ビジュアル的には柔らかく、フレンドリーなキャラクターのようです。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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