厳選・オープン・無料

Howmanyplants

大胆なタイポグラフィとハンドクラフトなグラフィックを融合した、植物愛好家向けの温かみのあるイラストエディトリアルプラットフォーム。

01

デザイン DNA

植物愛好家のための、手作りのイラストと個性豊かなタイポグラフィに満ちた、不思議でキュレーションされた書店。

02

カラー

近白のキャンバスに根ざした大地色の温かみに、エネルギッシュなシャルトルーズゴールドと遊び心のあるパステルアクセントを加えたもの。

03

タイポグラフィ

geometric-sans · humanist-sans · transitional-serif

• display96px · 400
• heading36px · 400
• body14px · 400

大文字のナビゲーションとサイドバーラベルが、強力な幾何学的リズムを生み出します。 · 巨大な表示テキストが、重なるイラストと物理的に相互作用します。 · 幾何学的なサンセリフとタイプライター風セリフを混ぜることで、エディトリアルの個性を加えます。

04

余白

エディトリアルコンテンツをフレーミングするための、ゆったりとしたサイドパディング（64px）を備えた、寛裕で広々としたリズム。

05

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

濃いインクやオリーブゴールドの、硬く固体のボーダー（2px から 4px）。遊び心のあるオフセットドロップシャドウとしてよく使用されます。

rgb(191, 179, 59) 6px 6px 0px 0px

06

レイアウト

テキストとカスタムイラストが物理的に重なり、標準的なグリッドの境界を打ち破る、モルタライクなコラージュ。

07

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

基本的なインタラクティビティのための、標準的な 220ms の状態遷移。

グローバルにカスタム watering-can カーソルが表示され、デフォルトのポインタを置き換えます。 · インタラクティブ要素の標準的なポインタ状態。

08

コンポーネント

• button 太い固体ボーダーでスタイル設定されたテキストリンクと、オフセット背景ドロップシャドウによる、質感のある 3D ボタン効果。
• card 目立つ背景色の長方形やアウトラインフレームで定義されたコンテンツブロック。しばしば切り抜きイラストとレイヤードされます。
• chip 分類やナビゲーションに使用される、パッドコンテナではなくタイポグラフィに依存した、小さく大文字のテキストラベル。
• input プライマリナビゲーションヘッダーに統合された、ミニマルでボーダーレスな検索インタラクション。
• hero イラストレーションされた棚にブランド名をスペルアウトする、ダイナミックで巨大なタイポグラフィ構成。

09

文体と禁止事項

• トーン 遊び心があり、励ましになり、温かみのある権威。
• 見出し 大胆で会話的、タイポグラフィ的に表現力豊か。
• CTA 固体ボーダーでフレームされ、物理的なボタンを模した質感のあるドロップシャドウ。

• クリーンで空のミニマルism を使用しない — スクリーンショットはイラストとテキストが重なり合う、密度の高いコラージュを示しています。
• 微細なドロップシャドウに依存しない — スクリーンショットは太く固体の 6px オフセットブロックシャドウを示しています。
• ダークモードや重いグラデーションを使用しない — スクリーンショットはライトで近白のキャンバスに、固体のパステルアクセントを示しています。
• 標準的な UI グリッドレイアウトを使用しない — スクリーンショットはテキストと画像が物理的に重なり、境界を打ち破っていることを示しています。
• グローバルに標準的なシステムカーソルを使用しない — スクリーンショットはカスタム watering-can カーソルを示しています。
• 純粋にタイポグラフィ的な CTA ボタンを使用しない — スクリーンショットは固体オフセット背景フィルを持つアウトラインボックスを示しています。
• 避ける: クリニカルな無機質さ
• 避ける: 過度にフォーマルな企業言語
• 避ける: ミニマルな空のスペース
• 避ける: 標準的な UI コンポーネントパターン

10

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

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

11

System Prompt

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