厳選・オープン・無料

Qatalog

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

SaaSProductivityAICleanTooling
Qatalog のスクリーンショット
↓ デザインシステムをダウンロード (6 MB)OpenDesign で開く

オリジナル: https://qatalog.com

📦 パックの中身を見る →

01

デザイン DNA

AI生産性ワークスペースエンタープライズ統合

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

02

カラー

#5D5D85Accent
#292D34Ink
#646464Ink soft
#FFFFFFBG
#F0F0F0BG quiet
#838383Muted
rgba(41, 45, 52, 0.1)Line

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

03

タイポグラフィ

humanist-sans · monospace

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

04

余白

4px
8px
16px
24px
32px
48px
64px
96px

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

05

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

sm · 4px
md · 8px
lg · 12px
pill · 30px

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

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

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

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

07

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

200msmicro
250mssmall
800msmedium
cubic-bezier(0.5, 0, 0.5, 1)easing

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

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

08

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

エンタープライズの生産性のためにデザインされたプレミアムAIワークスペースツール。ホワイトベース(#FFFFFF)とニュートラルグレー(#292D34、#646464)を使用したクリーンなライトテーマを採用。タイポグラフィはヒューマニストサンセリフフォントを使用し、ディスプレイ見出しにはタイトなトラッキングを適用。控えめな紫(#5D5D85)をプライマリアクセントとして使用。レイアウトはレスポンシブな12カラムグリッド。重要な禁止事項:ダークテーマ、セリフフォント、ネオンカラー、角張ったボタン、重いシャドウ、複雑なモバイルグリッドの使用を避けること。

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

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

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

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