厳選・オープン・無料

Svz

大胆なタイポグラフィとダークな洗練を備えた、プレミアムデジタルエージェンシー。

AgencyPortfolioBold TypographyDark ModePremium
Svz のスクリーンショット
↓ デザインシステムをダウンロード (11 MB)OpenDesign で開く

オリジナル: https://www.svz.io

📦 パックの中身を見る →

01

デザイン DNA

デジタルエージェンシーブランド構築大胆プレミアム

太字のエディトリアル・タイポグラフィと、ダークで洗練された雰囲気を持つ、プレミアムデザインエージェンシーのポートフォリオ。

02

カラー

#FF4D5CAccent
#fcfcfcInk
#f3efefInk soft
#080808BG
#262525BG soft
#0d0d0dBG quiet
rgba(255,255,255,0.1)Line

鮮やかなコーラル色アクセントを用いた高コントラストのダークモード

03

タイポグラフィ

transitional-serif · humanist-sans

ナビゲーションとラベルには大文字を使用 · タイポグラフィの対比をつけるため、セリフ体とサンセリフ体を混在 · 大きなディスプレイテキストには tight letter-spacing を使用

04

余白

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

一貫した4pxベースグリッドと余裕のあるホワイトスペース

05

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

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

1px solid rgba(255,255,255,0.1)

rgba(255, 255, 255, 0.2) 0px 2px 5px 0px inset

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

中央揃えコンテンツコンテナを持つフル幅ダークセクション

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing

滑らかなフェードイントランジション · 背景要素のparallax · hover状態のアニメーション

カラートランジションと不透明度の変化 · 状態変化によるビジュアルフィードバック

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

ダークで洗練された雰囲気を持つ、プレミアムデジタルエージェンシーポートフォリオ。プライマリカラー: #080808背景、#fcfcfc白文字、#FF4D5Cコーラルアクセント。タイポグラフィはトランジショナル・セリフ体のディスプレイとヒューマニスト・サンセリフ体の本文を混在。重要な禁止事項: 明るい背景を絶対に使用せず、本文用の装飾的なフォントを避け、高コントラストを維持し、ナビゲーションは大文字を使用し、ボタンは最小限のradiusを持つ長方形のままに。ポジショニング: 前向きなブランド向けの大胆なエージェンシー。レイアウトは12カラムグリッドと余裕のあるホワイトスペースを使用。

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

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

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

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