厳選・オープン・無料

Gusto

中小企業のためのシンプル化された給与計算、人事、福利厚生プラットフォーム。

01

デザイン DNA

小規模事業者の人事管理におけるオペレーティングシステム

02

カラー

高コントラストでアクセシブルなパレット。支配的なティールアクセントと暖かみのあるニュートラルのバランスで親しみやすさを実現。

03

タイポグラフィ

didone-serif · humanist-sans

• display56px · 500
• display42px · 500
• body18px · 400
• body16px · 400
• body14px · 400

見出しには、タイトな字間を備えた高コントラストのセリフフォントを使用。 · 本文には、非常に読みやすいヒューマニストサンセリフを使用。 · すべての本文で一貫して1.5の行間を維持。

04

余白

一貫した4pxのベースグリッドと標準的な8px、16px、24px、32pxの段階。

05

サーフェス (角丸 / 影 / 罫線)

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

レイアウト

中央揃えの最大幅コンテナ。12カラムグリッド上に24pxのガター。

07

モーションとインタラクション

インタラクティブ要素上の滑らかな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

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

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