デザインの力を
証明する

Goodpatch のデザインシステムをカタログ化したプレビューです。コーポレートサイトの computed style 実測値に基づき、カラー、タイポグラフィ、コンポーネント、レイアウトトークンを可視化しています。

共創パートナーに相談する 事例を見る 採用情報 →

01 / Colors

カラーパレット

Brand
Brand Blue
#096fc8
主要 CTA・サブヘッド・セクションラベル
Orange Gradient
#f4963d → #f2d040
ヒーローアクセント・ビジュアルエフェクト
Text
Text Primary
#333333
主要テキスト・見出し
Text Muted
#6e6e6e
補助テキスト・本文サブ
Subtitle Muted
#8f95a1
セクションラベル・メタ情報
Badges
Badge Red
#ff7669
"受付中" バッジ
Badge Blue
#76b7ed
"ケーススタディ" バッジ
Badge Gray
#96a0a6
"開催終了" バッジ
Surface & Background
Surface White
#ffffff
カード・ナビ背景
Background Light
#f6f6f6
ページ背景・セクション背景
Footer Dark
#191b1f
フッター背景
Semantic
Danger
#dc2626
エラー・削除
Success
#16a34a
成功・完了
Warning
#d97706
警告・注意

02 / Typography

タイポグラフィ階層

Design — Hero H1
72px / 700 / line-height 1.1 / letter-spacing -0.035em / font-family: Galano Grotesque (→ Inter)ヒーロー
共創で実現するデザインパートナーシップ — H3 Work Title
40px / 600 / line-height 1.2 / letter-spacing -0.025em / font-feature-settings: "palt"実績
デザイン組織の構築支援 — Subhead (Blue)
24px / 600 / line-height 1.4 / letter-spacing -0.02em / color #096fc8 / font-feature-settings: "halt"セクション
UX デザイン・プロダクト開発・ブランディング — Card Title
20px / 600 / line-height 1.5 / letter-spacing -0.015em / font-feature-settings: "palt"カード
本文テキスト — Goodpatch は、デザインの力でビジネスを前進させるデザインカンパニーです。UIデザイン、UX リサーチ、ブランド戦略を起点に、クライアントのプロダクトやサービスの体験価値を最大化します。line-height: 2.0 のゆとりある組版が日本語本文の可読性を高めています。
16px / 400 / line-height 2.0 / font-feature-settings: normal本文
補助テキスト — 14px のキャプション。デザインパートナーとして、構想からリリースまで伴走。色は #6e6e6e。
14px / 400 / line-height 2.0 / color #6e6e6eキャプション
Section Label — Mono
12px / 600 / letter-spacing 0.06em / font-family: JetBrains Monoラベル

本文組版サンプル

デザインの力を
ビジネスに。

Goodpatch は、デザインの力でビジネスを前進させるデザインカンパニーです。UI/UXデザインからブランド戦略、組織デザインまで、包括的なデザインパートナーシップを提供しています。

デザインパートナーシップ

クライアントのチームに入り込み、共にプロダクトをつくる共創型のアプローチ。構想段階からリリース後の改善まで、一貫した体験設計で事業成長を支えます。戦略・デザイン・エンジニアリングが三位一体で動くことで、意思決定のスピードと品質を両立させます。

デザイン組織の構築支援

デザインの価値を組織に根付かせるため、デザインプロセスの導入やチームビルディング、評価制度の設計など、組織そのものの変革を支援します。

Goodpatch のミッション:ハートを揺さぶるデザインで世界を前進させる。デザインの力を証明することで、デザインの価値を高めつづけます。

※ プロジェクト規模やスコープに応じて、最適なチーム体制をご提案いたします。まずはお気軽にご相談ください。


04 / Buttons — Pill が基本

ボタンバリエーション

共創パートナーに相談する
Primary CTA — Pill / #096fc8 / 16px 24px
事例を見る
Secondary — White Pill + Blue Text
採用情報 →
Text Link — #096fc8
お問い合わせ
Footer CTA — White / radius 8px / #096fc8 text
Badges
受付中 ケーススタディ 開催終了 NEW

ワークカード

Case Study Image
ケーススタディ

金融アプリのUXリデザイン

ユーザーリサーチからプロトタイピング、実装フェーズまでの共創プロジェクト。KPI 達成率 150% を実現。

詳しく見る →
Case Study Image
受付中

デザイン組織構築ワークショップ

デザイン思考を組織に導入するための2日間の集中ワークショップ。経営層から現場まで一体となって取り組む。

詳しく見る →
Case Study Image
開催終了

ヘルスケア SaaS のブランディング

ブランド戦略の策定からビジュアルアイデンティティ、UIガイドラインの構築までを一貫して支援。

詳しく見る →

06 / Forms

フォーム要素

Default — border #e0e0e0 / radius 8px
Focus — border #096fc8 / shadow 3px
Error — border #dc2626 / shadow 3px
正しい電話番号を入力してください

Depth & Elevation

Level 0: Flat
影なし — 基本
Elevation 1
0 2px 8px rgba(0,0,0,0.06)
Elevation 2
0 8px 24px rgba(0,0,0,0.08)
Elevation 3
0 16px 40px rgba(0,0,0,0.12)

08 / Layout — Spacing & Radius

スペーシング & ラディウス

Spacing Scale(8px ベース)
XS
4px
S
8px
M
16px
L
24px
XL
48px
XXL
80px
Border Radius Scale
Small
4px
Medium
8px
Large
16px
Pill
9999px