厳選・オープン・無料

Rebeccaatwood

ボタニカルな写真と洗練されたタイポグラフィを融合した職人テキスタイルブランド。

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

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

📦 パックの中身を見る →

01

デザイン DNA

職人ボタニカル洗練されたオーガニックスタジオ

陽光に包まれた職人のスタジオ。オーガニックな質感とエディトリアルなタイポグラフィが出会う場所。

02

カラー

#F5A73CAccent
#000000Ink
#F5F5F5BG
#F1F1F0BG soft
#6084B5Muted
rgba(0,0,0,1)Line

ホワイトと温かみのあるアーストーンからなる抑制された中立的なパレット。鮮やかで高彩度のオレンジアクセントが、オーガニックな写真に対して一点のエネルギーある焦点として機能します。

03

タイポグラフィ

transitional-serif · monospace

すべてのプライマリ見出しとブランドアイデンティティにSignifierを使用します。 · ナビゲーションリンク、ボタンテキスト、ラベルなどの機能的なUI要素にmonospaceを使用します。

04

余白

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

セクション間に十分なパディングと大きな隙間を設け、イメージが余裕を持って表示されるようにします。

05

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

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

最小限、または存在しません。区切りにはスペースと背景色の変化に依存します。

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

オーバーレイのタイポグラフィを伴うフルブリード写真から、製品表示のためのクリーンなホワイトグリッドへと移行します。

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing

0.5秒の滑らかな透明度と背景色のトランジション。 · アニメーション表示のための繊細な高さの変化。

透明度や色の変化の可能性を伴う、繊細なカーソルポインターステート。 · 標準のポインターステート。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

このサイトは、高級感のある職人テキスタイルブランドのeコマースプラットフォームです。デザインDNAは、高品質なボタニカル写真が存分に活きる、抑制された温かみの中立的なパレット（#F1F1F0、#F5F5F5）で定義されます。タイポグラフィは、ディスプレイと本文に洗練されたトランジショナルセリフ（Signifier）、ナビゲーションやボタンなどの機能的なUI要素にはクリーンなmonospace（SohneMono）を組み合わせています。一点の高彩度のオレンジアクセント（#F5A73C）は、ニュースレターポップアップに控えめに使用されます。重要な制約：攻撃的またはネオンカラーは決して使用せず、角丸やドロップシャドウは決して使用せず、常に散らかったレイアウトよりも豊かなスペースを優先します。全体的な美学はエディトリアルで洗練されており、写真によるストーリーテリングに大きく依拠しています。

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

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

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

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