厳選・オープン・無料

Qatalog

ワークの散らかりを排除し、生産性を統合するエンタープライズグレードのAIワークスペース。

01

デザイン DNA

現代のチーム向けのAIを活用したコマンドセンター。ツールと情報を融合します。

02

カラー

クリーンでハイコントラストなホワイトベースを基調とし、ニュートラルグレーと単一のアクセントカラー（紫）を用いることで、プレミアムで集中度の高い美学を実現します。

03

タイポグラフィ

humanist-sans · monospace

• display60px · 700
• headline18px · 500
• body16px · 400
• caption14px · 400

ディスプレイ見出しには、権威を伝えるためのタイトなトラッキングとボールドウェイトを使用します。 · 本文テキストは、快適な行間を維持し、可読性を確保します。 · モノスペースフォントは、特定の技術ラベルやコード要素に限定して使用します。

04

余白

4pxの倍数を通じて、一貫した垂直および水平のリズムを確立します。

05

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

カードの縁やコンテナを定義するために、ライトグレーの控えめな1pxボーダーを使用します。

0px 4px 12px rgba(0, 0, 0, 0.08)

06

レイアウト

デスクトップではマルチカラムグリッドを、モバイルでは単一カラムのスタックにシフトするレスポンシブレイアウトです。

07

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

インタラクティブ要素への控えめなopacityおよびtransformトランジション。 · UI状態変更のための滑らかなイージング。

インタラクティブ性を示すための、背景色またはテキストウェイトの控えめな変化。 · 色の変化や控えめなスケーリングによる即座の視覚的フィードバック。

08

コンポーネント

• button プライマリボタンはハイコントラストでピル型の角丸形状を採用し、セカンダリボタンはより明るい背景色を使用します。
• card カードは控えめなボーダーと十分な内部パディングで定義され、場合によってはソフトグラデーションや背景画像が適用されます。
• chip ステータス更新やカテゴリマーカーとして使用される、小さな角丸タグまたはラベルです。
• input 検索バーは目立つ角丸と統合されたアイコンを特徴とします。
• hero テキストを多用した大きなセクションで、ダイナミックなAIに焦点を当てたイラストや製品モックアップと組み合わせます。

09

文体と禁止事項

• トーン 自信に満ち、プロフェッショナルで、将来志向。
• 見出し AI統合と統合されたワークを強調する、明確でメリット主導のステートメント。
• CTA 直接的でアクション指向。無料の旅を始める、またはデモを取得することに焦点。

• ダークテーマをプライマリモードとして使用しない — スクリーンショットはライトテーマにダークテキストを採用しています。
• 装飾的なセリフフォントを使用しない — スクリーンショットは全体を通してヒューマニストサンセリフフォントを採用しています。
• 高彩度またはネオンカラーをプライマリアクセントとして使用しない — スクリーンショットは紫のアクセントを伴う抑制されたパレットを採用しています。
• プライマリボタンにシャープで角張った角を使用しない — スクリーンショットは角丸のピル型形状を採用しています。
• 過度のドロップシャドウや重い3D効果を使用しない — スクリーンショットはクリーンでフラット、または控えめにボーダーのあるサーフェスを採用しています。
• モバイルで複雑なマルチカラムグリッドを使用しない — スクリーンショットは小型画面で単一カラムのスタックを採用しています。
• 避ける: 過度に技術的な専門用語
• 避ける: 受動的な言葉遣い
• 避ける: 一般的な企業用語

10

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

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

11

System Prompt

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