厳選・オープン・無料
Gusto
中小企業のためのシンプル化された給与計算、人事、福利厚生プラットフォーム。
fintechsaas
01
デザイン DNA
給与計算人事福利厚生小規模事業者シンプル化
小規模事業者の人事管理におけるオペレーティングシステム
02
カラー
#0A8080Accent
#1C1C1CInk
#535353Ink soft
#FFFFFFBG
#F8F5F2BG soft
#6B6B6BMuted
rgba(28,28,28,0.12)Line
高コントラストでアクセシブルなパレット。支配的なティールアクセントと暖かみのあるニュートラルのバランスで親しみやすさを実現。
03
タイポグラフィ
didone-serif · humanist-sans
- display
56px · 500 - display
42px · 500 - body
18px · 400 - body
16px · 400 - body
14px · 400
見出しには、タイトな字間を備えた高コントラストのセリフフォントを使用。 · 本文には、非常に読みやすいヒューマニストサンセリフを使用。 · すべての本文で一貫して1.5の行間を維持。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
一貫した4pxのベースグリッドと標準的な8px、16px、24px、32pxの段階。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgba(28,28,28,0.12)
0px -2px 16px 0px rgba(28, 28, 28, 0.08) · 0px 12px 24px 0px rgba(28, 28, 28, 0.12) · 0px 8px 16px 0px rgba(28, 28, 28, 0.08)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
中央揃えの最大幅コンテナ。12カラムグリッド上に24pxのガター。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
インタラクティブ要素上の滑らかな0.2sのbackground-colorとcolorのトランジション。 · ホバーステート時の微細な0.1sのease-out transform。
background-colorがわずかに暗くなり、カーソルがポインタに変わる。 · 触覚フィードバックのための微細な0.1sのease-out transform。
08
コンポーネント
- button 8px-12pxのパディングを持つ丸いピル形状。ソリッドティールのプライマリバリアントと、ホワイトオンティールのインバーテッドバリアント。
- card ホワイト背景、8pxのボーダー半径、0.08-0.12の不透明度を持つ微細なドロップシャドウ。
- chip セカンダリタグやステータスのための小さな丸いピル。
- input クリーンなボーダードインプット。フォーカス時に微細なシャドウ。
- hero 中央揃えのタイポグラフィヒーロー。大きなセリフの見出し、サンセリフのサブコピー、およびデュアルアクションボタン。
09
文体と禁止事項
- トーン プロフェッショナル、親しみやすく、安心感を与える。
- 見出し 明確で、便益を駆動するステートメント。クラシックなセリフの権威あるスタイル。
- CTA 直接的で行動志向の動詞。「作成」「比較」「見る」など。
- ネオン色や彩度の高いプライマリカラーを使用しない — スクリーンショットでは落ち着いた、プロフェッショナルなティールが示されている。
- 見出しに超近代的な幾何学的サンセリフを使用しない — スクリーンショットではクラシックなセリフが示されている。
- 角が鋭い四角形を使用しない — スクリーンショットでは一貫した8pxのボーダー半径が示されている。
- 荒いドロップシャドウや3D効果を使用しない — スクリーンショットでは微細で不透明度の低いエレベーションが示されている。
- 行間が詰まったタイポグラフィを使用しない — スクリーンショットでは本文の快適な1.5の比率が示されている。
- 本文に太いフォントウェイトを使用しない — スクリーンショットでは400のウェイトが標準として示されている。
- 避ける: 専門用語を多用した金融用語
- 避ける: 強気すぎる、または過度に切迫したセールス言語
- 避ける: 冷たく、無機質な企業用語
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Gustoは人事と給与計算のためのプレミアムで親しみやすいSaaSプラットフォーム。そのデザインDNAは、見出しのためのクラシックで高コントラストのセリフと、本文のためのクリーンなヒューマニストサンセリフを組み合わせ、鮮明なホワイトと暖かみのあるオフホワイトの背景に配置。プライマリブランドカラーはプロフェッショナルで落ち着いたティール(HEX #0A8080)で、主要なアクションとアクセントに一貫して使用。レイアウトはゆったりとして中央揃えで、24pxのガターを持つ12カラムグリッドと厳格な4pxのスペーシングスケールを活用。主要なデザイン原則には、豊かなホワイトスペース、柔らかなシャドウによる微細なエレベーション、および安心感のあるプロフェッショナルなトーンが含まれる。過度にアグレッシブなネオン色、角が鋭い四角形、または行間の詰まったタイポグラフィは避けること。
en · zh-CN · zh-TW · ja · ko