厳選・オープン・無料
Airstudios
プロフェッショナルなレコーディングスタジオのための、大胆でアーティスティックなウェブサイト
EditorialExperimentalStudioTypographyPhotographic
01
デザイン DNA
レコーディングスタジオ音楽クリエイティブサウンド
ハイエンドのレコーディングスタジオのデジタルプレゼンス
02
カラー
#1A1B1BInk
#FA516ABG
#4A4A44BG quiet
rgba(26,27,27,1.0)Line
高コントラストを実現する、鮮やかなプライマリ背景色とダークテキスト
03
タイポグラフィ
grotesque-sans
- display
56px · 300 - body
14px · 300
ライトウェイト（300）が多用される · ナビゲーションや強調には大文字テキストを使用
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
一貫したパディングとマージン
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
構造のために控えめに使用される1pxのソリッドライン
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
フッターがカラム形式で配置された、センタードレイアウト
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
ヒーローグラフィックのためのジェネラティブアニメーション · スムーズな背景色のトランジション
微細な変化 · 即座の応答
08
コンポーネント
- button スクリーンショット上では最小限、あるいは存在しない
- card カードは見当たらない
- chip チップは見当たらない
- input 入力フィールドは見当たらない
- hero アニメーションされた抽象的なジェネラティブアートと最小限のテキストを備えた、フルスクリーンのヒーロー
09
文体と禁止事項
- トーン プロフェッショナルでアーティスティック
- 見出し ミニマルで大胆
- CTA 控えめで機能的
- 太いフォントウェイトを使用しない — スクリーンショットではほぼ専らライトウェイト（300）が使用されている
- 複雑なドロップシャドウを使用しない — スクリーンショットではフラットでクリーンなサーフェスが示されている
- ボタンやカードに角丸を使用しない — スクリーンショットではシャープで直線的なエッジが示されている
- 本文テキストをセンタリングしない — スクリーンショットでは左揃えのテキストが示されている
- 過度なパディングを使用しない — スクリーンショットではタイトで効率的な間隔が示されている
- セリフフォントを使用しない — スクリーンショットではゴロテスクサンセリフが一貫して使用されている
- 避ける: ごちゃごちゃしたデザイン
- 避ける: バランスのない明るいプライマリカラー
- 避ける: 太字フォント
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Airstudiosは、大胆で鮮やかな美学を採用したハイエンドのレコーディングスタジオのウェブサイトです。プライマリの背景色はコーラルピンク（#FA516A）で、モバイルや代替状態にはダークオリーブ（#4A4A44）が使用されます。テキスト色は非常にダークなグレー／ブラック（#1A1B1B）です。タイポグラフィはライトウェイト（300）のゴロテスクサンセリフ（Akzidenz-Groteskと特定）です。サイトでは、焦点となるジェネラティブな抽象ラインアートが多用されています。重要な禁止事項：1) 設計が軽くエアリーなタイポグラフィに依存しているため、太いまたはボールドなフォントウェイトを使用しないこと。2) コンテナやボタンに角丸を追加しないこと。美学はシャープで幾何学的です。3) 複雑なシャドウやグラデーションを使用しないこと。サーフェスはフラットでクリーンに保つこと。
en · zh-CN · zh-TW · ja · ko