厳選・オープン・無料

Jams Basicagency

積層されたアルバムアートと大胆なタイポグラフィを特徴とする、ビジュアル音楽コレクションインターフェース。

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

オリジナル: https://jams.basicagency.com

📦 パックの中身を見る →

01

デザイン DNA

レコード音楽コレクションレコード diggingビジュアル

ノスタルジックで触感的なUIを持つ、デジタルレコードの倉庫。

02

カラー

#FFF8F1Ink
#8FCEEEBG
#E5E7EBMuted
rgba(255, 248, 241, 0.15)Line

明るいブルーの背景を主軸とし、暖かいオフホワイトのテキストを用いた、高コントラストのソフトパレット。

03

タイポグラフィ

grotesque-sans

テキストは大文字変換に重点を置く。 · タイトルは極めて字間を詰め、太くモダンな印象を。 · 巨大なタイポグラフィは、単なるコンテンツではなく、構造的なグラフィック要素として機能する。

04

余白

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

不規則な間隔。大きなドラマチックなpaddingを重視し、写真コンテンツに息を吹き込む。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 999px

暖かいオフホワイトとニュートラルグレーの実線ボーダーで、レイヤーを定義。

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

非対称で多層的な構図。画像を積層・オフセットさせ、物理的な倉庫のような奥行きを生み出す。

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

状態変化のための、0.5秒の滑らかなopacityとtransform遷移。 · grabカーソルが示唆する、ドラッグインタラクションを含む可能性。

インタラクティブな要素ではpointerカーソルに、ドラッグ可能な画像ではgrabカーソルに変化。 · コレクションビューワーのインタラクティブな要素を起動。

08

コンポーネント

09

文体と禁止事項

10

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

Jams Basicagency — 桌面首屏（hero）
桌面首屏（hero）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Jams Basicagency — 移动首屏
移动首屏

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

11

System Prompt

音楽や写真のコレクションのための、大胆でキュレーションされたインターフェース。物理的なレコード diggingを彷彿とさせるデザイン。明るいブルーの背景と暖かいオフホワイトのテキストに大きく依存し、巨大で字間を詰めたタイトルにはクリーンなグロテスクサンセリフを使用。写真は、奥行きを生み出し探索を促すため、積層されたオフセットレイヤーとして提示。重要な禁忌：ダークモードを避け、メインコンテナの丸い角を避け、標準的な文頭大文字のヘッダーを避け、標準的なボタンコンポーネントを避ける。レイアウトは意図的に非対称で、構造要素として大きなタイポグラフィを使用し、プレミアムでキュレーションされた印象を維持するために、十分なpaddingと厳密な大文字テキスト変換が必要。

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

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

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

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