厳選・オープン・無料

Cuberto

モノクローム・エージェンシーポートフォリオ。巨大なsans-serif見出しとダークなフォトグラフィック・ヒーローセクションを用い、プレミアムでクラフトマンシップ重視のアイデンティティを確立する。

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

オリジナル: https://cuberto.com

📦 パックの中身を見る →

01

デザイン DNA

プレミアム専門性デジタル・クラフト大胆ミニマル

鮮明なコントラストと自信に満ちたタイポグラフィを通じて語る、ハイエンドなデザイン＆エンジニアリングスタジオ。

02

カラー

#000000Ink
#FFFFFFBG
#161616BG quiet
#888888Muted
rgba(0,0,0,0.1)Line

鮮やかな白黒コントラストによる厳格なモノクローム階層。高品質なフォトグラフィのみが唯一のカラーとなるよう設計。

03

タイポグラフィ

grotesque-sans

大きなディスプレイ・テキストには Tight tracking（例: -1.62px）を適用し、建築的で堅牢な印象を実現。 · 小さなテキストにはゆとりのある tracking（例: 0.468px）を採用し、高い可読性を維持。 · フォント・ウェイトは主に regular（400）に限定し、強調箇所にのみ bold（700）を控えめに使用。

04

余白

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

非対称でゆとりのあるリズム。主要セクション間には大きなギャップ（例: 90px）を設け、コンテンツに呼吸の余地を与える。

05

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

sm · 18px
md · 18px
lg · 72px
pill · 99999px

インタラクティブ要素とセパレーターにのみ使用する、最小限の1px solid ボーダー。

なし

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

フルワイドメディアと中央揃えタイポグラフィを持つ大規模なヒーローセクションから、2カラムのプロジェクトグリッドへと展開。

07

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

300msmicro
400mssmall
1200msmedium
cubic-bezier(0.16, 1, 0.3, 1)easing

ページ遷移や要素の表示に、スムーズで物理ベースのスライディング。 · インタラクティブなプロンプトとしての、永続的で回転する円形テキスト・バッジ。

インタラクティブ要素に、注意を散漫にしない程度の微細なスケールや透過度の変化を提供。 · 微細なモーションを伴う、スムーズで即座の状態変化。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

これは、極度のミニマリズムと大胆なタイポグラフィが特徴のハイエンド・デジタルデザイン・エージェンシーのポートフォリオです。カラーパレットは純白（#FFFFFF）、無彩色の黒（#000000）、および二次テキスト用の淡いグレー（#888888）のみを使用する厳格なモノクロームです。タイポグラフィは、巨大なディスプレイサイズ（81px）と小さなUIスケールの両方で使用される、クリーンで幾何学的な grotesque-sans-serif フォントを特徴とします。レイアウトはゆとりがあり、大きなギャップと丸みのある角（18px）を用いて、鮮明なコントラストを軟化しています。重要な制約事項：明るいアクセントカラーの使用は一切避け、装飾的なフォントやセリフ・フォントは決して使用せず、画面に過剰なUIコンポーネントで埋めない。全体を通して、プレミアムで洗練された、建築的な感覚を維持すること。

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

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

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

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