厳選・オープン・無料

AREA 17

モノクロのパレットと広大なホワイトスペースを持つ、洗練されたタイプ驱动のエージェンシーポートフォリオ。

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

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

📦 パックの中身を見る →

01

デザイン DNA

パートナーシップインパクト戦略的プレミアムデザイン主導

高級建築ジャーナルとグローバル戦略コンサルティングファームの融合。

02

カラー

#1A1A1AInk
#949495Ink soft
#FFFFFFBG
#F2F2F2BG quiet
#757575Muted
rgba(230, 230, 230, 1)Line

厳密にモノクロ。高コントラストのタイポグラフィと広大なホワイトスペースを用いて、プレミアムでエディトリアルな印象を確立。

03

タイポグラフィ

grotesque-sans

大きなディスプレイサイズでは Tight negative letter-spacing を使用 · Medium weight (500) はロゴマークと特定のUI強調にのみ限定 · 左揃えのタイポグラフィ。ブロック間に豊かな垂直ホワイトスペースを確保

04

余白

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

豊かで非対称なスペーシング。大きな空きセクションとパディング付きテキストブロック。

05

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

sm · 4px
md · 8px
lg · 16px
pill · 9999px

クッキーコンセントのアクションや特定のディバイダーに主に使用される、サブトルな1pxボーダー。

rgb(0, 0, 0) 0px 0px 0px 1px · rgba(0, 0, 0, 0) 0px 0px 0px 0px

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

コンテンツを左に大きく偏らせた非対称グリッド。大きなパディングとホワイトスペースで構造を定義。

07

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

150msmicro
300mssmall
1000msmedium
cubic-bezier(0.33, 1, 0.68, 1)easing

大きな画像やページ読み込み時の表示に、遅く滑らかなopacityとtransformのtransition（1s） · ボタンなどのインタラクティブ要素には、速くサブトルなcolorとbackgroundのtransition（0.3s）

インタラクティブなテキストやボタン上での、サブトルな色の変化やわずかなopacityの変化。 · 攻撃的な視覚フィードバックはなく、落ち着いたエディトリアルな雰囲気を維持。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

This is a premium agency website characterized by an ultra-clean, minimalist aesthetic and expansive whitespace. The primary colors are stark white (#FFFFFF) and near-black ink (#1A1A1A), with light grays (#F2F2F2, #949495) used for subtle background contrast and muted text. The typography is strictly modern grotesque-sans, featuring very large, left-aligned display headings (55px) with tight negative letter-spacing (-0.825px). Critical design rules include: avoid any use of vibrant accent colors (the palette is strictly monochromatic), avoid decorative serifs or playful fonts, avoid cluttered grids or heavy drop shadows, and maintain generous, asymmetric vertical rhythm. Use slow, smooth (1s) opacity transitions for reveals and faster (0.3s) transitions for interactive states.

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

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

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

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