厳選・オープン・無料

Ilovecreatives

クリエイティブプロフェッショナルのためのデジタルトレイドスクール兼コミュニティとして機能する、スタイリッシュなエディトリアルプラットフォーム。

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

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

📦 パックの中身を見る →

01

デザイン DNA

クリエイティブ教育コミュニティスラッシャーズトレイドスクール

多分野に情熱を持つクリエイターのための、モダンでスタイリッシュなコミュニティハブおよびデジタルトレイドスクール。

02

カラー

#489442Accent
#222222Ink
#FFFFFFBG
#757575Muted
rgba(34,34,34,0.2)Line

ハイコントラストなモノクロームをベースとし、プロモーションバナーには単一のマットなグリーンのアクセントカラーを使用します。

03

タイポグラフィ

transitional-serif · humanist-sans · geometric-sans

ディスプレイ用タイポグラフィは、 tighten されたトラッキングのハイコントラストなトランジショナルセリフフォントを採用します。 · 本文テキストは、ライトウェイトのヒューマニスト・サンセリフを採用します。 · ボタンは、大文字または頭文字を揃えたスタイルのピル（カプセル）形状を採用します。

04

余白

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

一貫した4pxのベースグリッドを採用し、大きなコンテナブロックには広いpaddingを設けます。

05

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

sm · 4px
md · 8px
lg · 20px
pill · 450px

1px solid #222222

rgba(121,121,121,0.17) 2px 2px 20px 0px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

フルブリードのヒーローセクションから、製品やコミュニティリストのための構造化されたマルチカラムグリッドに移行します。

07

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

100msmicro
170mssmall
600msmedium
cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

ボタンやリンクのhover時に、不透明度や色が微細に遷移します。 · 標準的なインタラクティブ要素には、0.1秒の速いリニア遷移を採用します。

ボタンの背景がソリッドに塗りつぶされたり、テキスト色が反転します。 · 状態の変化やリンクのナビゲーションによる即時フィードバックを提供します。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

このサイトは、クリエイティブコミュニティプラットフォームであり、「スラッシャーズ」（多分野に情熱を持つクリエイター）のためのデジタルトレイドスクールです。ビジュアルアイデンティティは、#FFFFFF背景に#222222のインクを使用したクリーンなモノクロームをベースとし、特にプロモーションバナーにはマットな#489442のグリーンをアクセントとして使用しています。タイポグラフィは、巨大なディスプレイヘッドラインに太字でハイコントラストなトランジショナルセリフフォントを、本文にはライトウェイトのヒューマニスト・サンセリフ（Suisse Regular、ウェイト100）を使用し、洗練されたエディトリアル感を演出しています。重要な禁止事項：彩度の高いネオンカラーの使用、本文テキストの太字ウェイトの使用は絶対に避け、プライマリボタンやタグには常に丸みのあるピル形状を使用してください。レイアウトは、フルブリードの写真ヒーローセクションと、製品やコミュニティリストのためのカードベースの構造化グリッドを組み合わせ、すべてtightな文字間隔と広いpaddingを使用しています。

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

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

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

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