厳選・オープン・無料

Wearemotto

巨大なディスプレイフォントと広大な余白を通じて、注目を集める、タイポグラフィ主導の大胆なエージェンシーサイト。

AgencyBold TypographyCleanPremiumCase Study
Wearemotto のスクリーンショット
↓ デザインシステムをダウンロード (16 MB)OpenDesign で開く

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

📦 パックの中身を見る →

01

デザイン DNA

戦略デザインコンサルタントイノベーションフューチャリズム

ブランド戦略におけるハイエンド建築事務所のような存在

02

カラー

#1B1B1CInk
#717476Ink soft
#F4F3F0BG
#848484Muted
rgba(0, 0, 0, 1)Line

温かみのあるニュートラルをベースとした、ハイコントラストのモノクローム

03

タイポグラフィ

geometric-sans · humanist-sans

巨大な全大文字のディスプレイタイポがレイアウトを支配 · 大きな表示テキストにはタイトな行高（1.0）を使用 · 全テキストにおいて、中程度のウェイト（500）を統一的に使用

04

余白

4px
8px
16px
19px
24px
32px
38px
48px
67px
77px
99px
158px

主要セクションに158pxのトップパディングを設けるなど、豊かな垂直方向の余白

05

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

sm · 0px
md · 9px
lg · 9999px
pill · 9999px

アクティブなCTAの下線には1px solid black

06

レイアウト

1440container
12columns
23pxgutter
768 / 1024breakpoints

フルブリードのヒーローセクションと、ポートフォリオアイテム向けの広いマルチカラングリッド

07

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

350msmicro
400mssmall
750msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing

コンテンツ表示のためのスムーズな high-out イージング · ホバー時の繊細な不透明度トランジション · ポートフォリオ要素の複雑なトランスフォームアニメーション

リンクやボタンにおける、控えめなカラーまたは不透明度の変化 · 新しい状態への移行において、スムーズなイージングを伴う即時応答

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

これは、巨大で大胆なディスプレイタイポグラフィと広大な余白が特徴のハイエンドなエージェンシーおよびコンサルティングサイトです。プライマリカラーは、温かみのあるオフホワイト背景（#F4F3F0）と深い黒のテキスト（#1B1B1C）で、洗練されたハイコントラストの美学を創り出しています。タイポグラフィには幾何学およびヒューマニストサンセリフカテゴリを使用し、ディスプレイヘッドラインは150px以上の極端なサイズで、タイトな1.0の行高と中程度のウェイトで設定されています。インタラクションは繊細で洗練されており、控えめな不透明度やカラーの変化に依存します。最も重要な点として、角丸、ドロップシャドウ、明るいアクセントカラーは使用しないでください。デザインは純粋にタイポグラフィのスケールと空間のリズムに依存します。散らかったレイアウトは避け、すべてのヘッドラインは最大のインパクトを得るために左揃えのまま全大文字にしてください。

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

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

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

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