厳選・オープン・無料

Danielaandmoe

ウェディングお祝いのための、エレガントで温かみのある、イラストベースのエディトリアルウェブサイト。

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

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

📦 パックの中身を見る →

01

デザイン DNA

ウェディングお祝いエディトリアル温かみ招待状

高級な印刷物のウェディング招待状セットを、デジタルのエディトリアル形式に翻訳したもの。

02

カラー

#11223FInk
#F7BCA5Ink soft
#FEF1ECBG
#FF5734Muted
rgba(255,87,52,1.0)Line

柔らかなピーチ色の背景と深いネイビーのテキストを軸にした、温かみのある大地色のパレット。テラコッタのアクセントが点在しています。

03

タイポグラフィ

didone-serif · humanist-sans

主要な表示テキストや見出しにはすべて didone-serif を使用し、優雅さを表現します。 · 本文テキストや小さなラベルには humanist-sans を使用し、可読性を維持します。 · すべての大文字ラベルには多めの字間を設定し、洗練された、開放感のある雰囲気を作ります。

04

余白

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

柔軟でゆったりとしたリズム。イラストレーションに余裕を持たせるため、十分なパディングとマージンを優先します。

05

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

sm · 0px
md · 0px
lg · 0px
pill · 200px

主にボタンのアウトラインに1pxの实線ネイビーのボーダーを使用し、細いテラコッタの線は装飾的な区切り線として機能します。

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

コンテンツ用の、整然と中央揃えのシングルカラムレイアウト。浮遊する非対称なオーガニックなイラストレーションが、大胆に装飾を加えています。

07

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

125msmicro
275mssmall
750msmedium
cubic-bezier(0.52, 0.12, 0.46, 1.1)easing

ボタンなどのインタラクティブ要素に適用する、弾みのある転換。 · 背景と transform プロパティに対して適用する、滑らかで緩やかな ease-out トランジション。

カスタムの cubic-bezier イージングカーブを用いた、繊細な背景と色の変化。 · 高速なトランジションによる、即座のフィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

エレガントなタイポグラフィとオーガニックな手描き風のイラストレーションを融合させた、温かみのあるエディトリアルなウェディングウェブサイト。デザインでは、洗練されたコントラストのために柔らかなピーチ色（#FEF1EC）の背景と深いネイビー（#11223F）のテキストを使用しています。タイポグラフィは見出し用の洗練された didone セリフと本文用のクリーンな humanist sans-serif を組み合わせ、どちらも十分な字間で設定されています。主要なインタラクションにはカスタムの弾むようなイージングカーブが特徴です。白一色、硬い幾何学模様、太い太字フォントは使用しないこと。装飾的なイラストレーションがコンテンツを雑然とさせずに際立つ、ゆったりとした呼吸ができるレイアウトを維持すること。

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

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

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

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