Carrd · デザイン DNA

ワンページサイトビルダーのための、ミニマルでグラデーションベースのランディングページ。

デザイン DNA

デジタルツールキットのための、落ち着いた幾何学的なウェルカムスクリーン。

カラー

#33ada9Accent

#ffffffInk

rgba(255,255,255,0.75)Ink soft

#24252dBG

rgba(255,255,255,0.4)Muted

rgba(255,255,255,0.075)Line

ダークで低彩度のグラデーションの上に、高コントラストのホワイトテキストを配置し、鮮やかなティール色のアクセントを1色使用します。

タイポグラフィ

余白

4px

8px

16px

24px

32px

48px

64px

96px

基本4pxスケールで、大きなセクションには余裕のあるパディング（32-64px）を使用します。

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

不透明度（0.4から0.75）を変化させた、控えめな1-2pxのホワイトボーダー、またはソリッドなホワイトストローク。

レイアウト

ヒーローでは中央揃えの単一カラムレイアウト、機能セクションでは2カラムグリッドに移行します。

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

hover・focus時のカラーと不透明度のトランジション · ページセクションのフェードイン

インタラクティブな要素に、カラーのトランジションと控えめな不透明度の変化を適用します。 · 該当なし

コンポーネント

文体と禁止事項

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

Carrd — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

System Prompt

Carrdは、シンプルなワンページウェブサイトを作成するためのミニマルでユーザーフレンドリーなツールです。デザインは、炭灰色（#24252d）を中心としたダークで低彩度のパレットに、控えめな紫がかった青のグラデーションオーバーレイを用いています。タイポグラフィは厳密に機能的で、すべてのディスプレイおよび本文テキストに標準システムのgrotesque-sansフォント（Arial/Helvetica）に依存しています。単一の鮮やかなアクセントは、控えめなティール色（#33ada9）で、プライマリコール・トゥ・アクションボタンにのみ使用し、明確な視覚的ガイドを提供します。重要なデザイン制約には、複雑なカラースキームの回避、厳密に中央揃えの単一カラムまたはシンプルな2カラムレイアウトの維持、インタラクティブ要素には一貫して6pxの角丸のみを使用することが含まれます。全体的なトーンは落ち着いて抑制されており、明瞭さと使いやすさに完全に焦点を当てています。

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

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

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