厳選・オープン・無料

Basement Studio

クールなものを生み出すデジタルスタジオ＆ブランディングパワーハウス。

01

デザイン DNA

ハイエンドのクリエイティブワークを展示する、ダークで没入感のあるデジタルワークショップまたはギャラリー。

02

カラー

深い黒と明るい白によるハイコントラストのモノクロームを基調とし、プロジェクトイメージのみでアクセントを加える。

03

タイポグラフィ

geometric-sans · monospace

• display76px · 600
• h138px · 600
• body16px · 400
• caption13px · 600

04

余白

グリッドベースのレイアウトで、16pxまたは24pxの余裕のあるpaddingとグッターを採用。

05

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

rgba(230, 230, 230, 0.3)の1px幅の水平区切り線を使用。

06

レイアウト

フルワイドのヒーロー画像に続き、大きなタイトルと説明を伴うグリッドベースのプロジェクトショーケース。

07

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

色とbackground-colorの変化に対するスムーズなトランジション。 · インタラクティブ要素に対するTransformベースのアニメーション。

カーソルがpointerまたはaliasに変化し、微細な色やbackgroundのトランジションが発生。 · リンクナビゲーションによる即座のフィードバックが一般的。

08

コンポーネント

• button 太字のウェイトを持つテキストベースのナビゲーションリンクで、目立つ背景やボーダーはなし。
• card 大きなイメージと説明テキストを伴い、細い線で区切られたプロジェクトエントリー。
• chip 未確認。
• input 未確認。
• hero オーバーレイテキストと「Scroll to Explore」のプロンプトを伴う、没入感のあるフルワイド画像またはビデオ背景。

09

文体と禁止事項

• トーン 自信に満ち、大胆で、やや無遠慮なトーン。
• 見出し 高コントラストの、トラッキングを詰めた幾何学的sans-serif。
• CTA 直接的でアクションを重視し、ブランドのトーンに合わせて小文字表記やスタイルが統一される。

• セリフフォントを使用しない — スクリーンショットではすべてのテキストに幾何学的sans-serifが使われている。
• ボタンに背景色を追加しない — スクリーンショットではテキストのみのナビゲーションリンクが使われている。
• 重いドロップシャドウを使用しない — スクリーンショットでは完全にフラットな表面が使われている。
• カードやコンテナに角丸を使用しない — スクリーンショットでは鋭く四角いエッジが使われている。
• 複数のアクセントカラーを使用しない — スクリーンショットでは厳密なモノクロームパレットが使われ、プロジェクトイメージのみがカラーを提供している。
• ボーダーでレイアウトを雑然とさせない — スクリーンショットでは最小限の水平区切り線が使われている。
• 避ける: フォーマルな企業言語
• 避ける: 雑然としたインタフェース
• 避ける: 低コントラストのテキスト

10

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

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

11

System Prompt

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