厳選・オープン・無料

Custo

スマートレターボックスのプレミアムでミニマリストなランディングページ。大胆なタイポグラフィと抑制された美的感覚を通じて、実体ハードウェアとコンパニオンアプリを強調します。

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

オリジナル: https://custo.io

📦 パックの中身を見る →

01

デザイン DNA

スマートセキュアプレミアムミニマリストハードウェア

ハイエンドのコンシューマー・エレクトロニクスとセキュアなホームインフラの融合。

02

カラー

#000000Ink
#8e9194BG
#ffffffBG soft
#a7aaadMuted
rgba(167,170,173,1.0)Line

ミッドトーンのグレーに Anchored された、抑制された洗練されたモノクローム・パレット。コントラストと階層性には純粋な黒と白を用います。

03

タイポグラフィ

geometric-sans · monospace

テキストにはすべて geometric-sans カテゴリを使用します。 · 大きなディスプレイ・タイプにはタイトなラインハイツを維持します。

04

余白

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

ゆったりとしたパディングとギャップが、プレミアムな空間感を創出します。

05

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

sm · 4px
md · 8px
lg · 12px
pill · 999px

最小限。区切りには微妙なボトムボーダーに依存します。

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

センタリングされたコンテナを持つフルブリード・ヒーローを先頭に、スタックされたコンテンツセクションが続きます。

07

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

225msmicro
400mssmall
800msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing

clip-path を用いたリビールアニメーション · 滑らかな色と透明度のトランジション

インタラクティブな要素の微妙なステート変化。 · クリック可能な要素には標準のポインターカーソル。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

プレミアムでミニマリストなスマートホーム・ハードウェア製品のデザインを生成します。ミッドトーンのグレー（#8e9194）、純粋な黒（#000000）、白（#ffffff）を基調とする抑制されたモノクローム・パレットを使用します。タイポグラフィはクリーンで幾何学的なサンセリフを用い、大胆でインパクトのある見出しとタイトなラインハイツを採用します。レイアウトはゆったりとしたパディングを備え、フルブリードのイメージと大きなウォーターマーク・タイポグラフィでビジュアル・インテレストを高めます。ハイエンドで建築的な美的感覚を維持するため、雑然とした要素、ドロップシャドウ、複数の競合するアクセントカラーは避けます。重要：遊び心のある装飾的な要素は決して使用せず、実体の製品とその核心的な利益に焦点を合わせてください。

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

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

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

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