厳選・オープン・無料

Datalands

ブランディングとデータを融合させるビジュアルコミュニケーションおよび情報デザインスタジオ。

StudioData VisualizationBold TypographyDark ModeClean
Datalands のスクリーンショット
↓ デザインシステムをダウンロード (10 MB)OpenDesign で開く

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

📦 パックの中身を見る →

01

デザイン DNA

ビジュアルコミュニケーション情報デザインデータビジュアライゼーションブランディングスタジオ

データのための大胆なモノクローム建築事務所。

02

カラー

#FFFFFFInk
#000000BG
#3D3D3DMuted
rgba(255, 255, 255, 0.2)Line

深い黒のキャンバス上にくっきりとした白のタイポグラフィーを使用する、高コントラストのモノクローム。

03

タイポグラフィ

geometric-sans · grotesque-sans · monospace

UIラベルと小さなタグにはmonospaceを使用する。 · メインのロゴタイプには太いウェイトを維持する。 · 本文はクリーンで非常に読みやすいgrotesque-sansを維持する。

04

余白

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

ゆとりのある

05

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

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

プライマリアウトラインには1px solid white、バッジには2pxのボーダー

06

レイアウト

1440container
12columns
24pxgutter
768 / 1024breakpoints

コンテンツ用の分割レイアウトを持つフルワイドヒーローセクション

07

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

220msmicro
400mssmall
800msmedium
cubic-bezier(0.44, 0, 0.56, 1)easing

インタラクティブ要素のsubtleなhoverトランジション

subtleな色調や不透明度の変化 · subtleな圧縮や状態の変化

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

Datalandsは、データビジュアライゼーションとブランディングを専門とするビジュアルコミュニケーションおよび情報デザインスタジオです。デザインは、背景に純黒(#000000)、テキストに白(#FFFFFF)を使用し、特定のタグにオレンジ(#FF7400)などの極めて控えめなアクセントを加えた、鮮明で高コントラストのモノクロームパレットによって定義されます。タイポグラフィーは、巨大なロゴタイプにはboldなカスタム幾何学的sans-serif、本文にはクリーンなgrotesque-sans、小さなラベルにはmonospaceに依存します。重要な禁止事項には、カラフルなグラデーションの使用禁止、装飾的なセリフの回避、不要なUI要素でレイアウトを詰めることの禁止が含まれます。

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

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

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

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