厳選・オープン・無料

ToyFight

レトロゲーム風の美学を持つ、遊び心がありながらもプレミアムなクリエイティブエージェンシーのウェブサイト。

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

オリジナル: https://toyfight.co

📦 パックの中身を見る →

01

デザイン DNA

PlayfulRetro-FuturisticStudioCreativeOriginal

8ビットゲームのノスタルジーとハイエンドなクリエイティブサービスを融合するデザインスタジオ。

02

カラー

#0D0D0EInk
#FAF6EFInk soft
#F1E7E7BG
#E9E3F3BG quiet
rgba(13,13,14,1)Line

温かみのある柔らかいニュートラル背景と、高コントラストのダークインクの対比。

03

タイポグラフィ

monospaced · condensed-sans

レトロなテクノロジー感を強調するため、主要見出しにmonospacedフォントを使用します。 · 本文およびUIテキストにはcondensed sans-serifを使用します。 · 幅広いtrackingのuppercase small labelsを使用します。

04

余白

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

太字のタイポグラフィや3D要素が息をつくための、豊かな余白。

05

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

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

1px solid #0D0D0E

0 4px 12px rgba(0,0,0,0.05)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

オーバーラップする要素と豊かなpaddingを持つ、非対称で散りばめられたレイアウト。

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.19, 1, 0.22, 1)easing

色や背景の変更にsmooth transitionを適用。 · 3Dオブジェクトにはcomplex transformアニメーションを適用。 · scrollでトリガーされるentranceアニメーション。

インタラクティブ要素上の微妙な色の変化とtransform。 · active状態による即座の視覚的フィードバック。

08

コンポーネント

09

文体と禁止事項

10

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

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

11

System Prompt

これはレトロゲームのノスタルジーとハイエンドデザインサービスを融合したプレミアムなクリエイティブエージェンシーのウェブサイトです。カラーパレットは温かみのある柔らかいニュートラル(#F1E7E7、#FAF6EF)とダークインク(#0D0D0E)の対比を中心とします。タイポグラフィはディスプレイ見出しにmonospaced書体、本文にcondensed sans-serifを使用し、独自のレトロテクノロジー感を生み出しています。レイアウトは非対称で遊び心があり、散りばめられたテキストブロック、3Dインタラクティブ要素、豊かな余白を特徴とします。重要な制約:ディスプレイテキストに決して一般的なsans-serifフォントを使用しない;厳格なグリッドの代わりに常に散りばめられた、オーバーラップするレイアウトを採用する;温かみのある柔らかいカラーパレットを維持し、冷たく臨床的なトーンを避ける。デザインは遊び心とプレミアムな技術のバランスを保っています。

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

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

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

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