厳選・オープン・無料

Danielsun

大胆で特大のタイポグラフィと鮮やかな黄色のグラデーションを用いた、表現力豊かなデザインポートフォリオ。

PortfolioBold TypographyExpressiveStudioWeb3
Danielsun のスクリーンショット
↓ デザインシステムをダウンロード (24 MB)OpenDesign で開く

オリジナル: https://danielsun.space

📦 パックの中身を見る →

01

デザイン DNA

大胆表現的親しみやすいモダンハイコントラスト

巨大なタイポグラフィと鮮やかな黄色のグラデーションを用いて、力強くエネルギッシュなプレゼンスを生み出す、大胆でハイコントラストな個人ポートフォリオ。

02

カラー

#000000Ink
#808080Ink soft
#FFFFFFBG
#F5F5F5BG soft
#A6A6A6Muted
rgba(0,0,0,0.12)Line

鮮やかな黒と白を基調とした高コントラストなパレットに、鮮烈な黄色のグラデーションを加えています。

03

タイポグラフィ

grotesque-sans · humanist-sans

大きなディスプレイテキストには、極太(900)のウェイトを使用してください。 · 大きなディスプレイサイズには、tightな文字間隔(ネガティブ)を適用してください。 · 全て大文字は、巨大なディスプレイテキストに限定してください。

04

余白

4px
8px
10px
16px
20px
24px
32px
40px
64px
96px

セクションに十分なパディング(32px、40px)を設定した、4pxベースのグリッド。

05

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

sm · 14px
md · 24px
lg · 80px
pill · 999px

目立つボーダーなし

0px 19px 8px 0px rgba(0, 0, 0, 0.3) · 0px 64px 128px 0px rgba(0, 0, 0, 0.25) · inset 0px 6px 6px 0px rgb(184, 184, 184)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

中央揃えのタイポグラフィと十分な垂直方向の余白を持つ、フル幅のセクション構成。

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

すべてのインタラクティブ要素に適用される滑らかなトランジション(全592要素にtransitionプロパティあり)。

インタラクティブな要素に対して、明るさやスケールの微細な変化。 · 即座の視覚フィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

これは、SaaSおよびWeb3デザインパートナー向けの、大胆で表現力豊かなデザインポートフォリオです。デザインのDNAは、グロテスク・サンス系の巨大で超太字(ウェイト900)のタイポグラフィ、純黒(#000000)と白(#FFFFFF)という鮮明なハイコントラストパレット、そして鮮やかな黄色のグラデーションが特徴です。レイアウトはゆとりのあるパディングと中央揃えのセクションで構成されています。重要な注意点:小さく軽いタイポグラフィは決して使用しないこと;渋い、企業的なカラーパレットは決して使用しないこと;クライアントの作品にフラットな2Dアイコンは決して使用せず、常に光沢のある3Dスタイルの要素を使用すること。堅苦しいフォーマルなレイアウトは避け、巨大なテキストを用いた表現力豊かなフル幅セクションを優先すること。

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

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

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

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