厳選・オープン・無料

Pad Dotincorp

触覚式点字ディスプレイデバイスのための、クリーンでプロフェッショナルな製品ショーケース。

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

オリジナル: https://pad.dotincorp.com

📦 パックの中身を見る →

01

デザイン DNA

アクセシビリティ触覚点字補助技術ハードウェア

クリーンでプレミアムなテクノロジー資料サイトのように感じる、スタイリッシュなハードウェア製品ページ。

02

カラー

#FF5A2FAccent
#1F1F1FInk
#333333Ink soft
#FFFFFFBG
#F5F5F5BG soft
#707070Muted
rgba(229, 231, 235, 1)Line

ハードウェア製品を強調するためのハイコントラストとクリーンなホワイトスペース。

03

タイポグラフィ

humanist-sans

すべてのテキストにヒューマニスト・サンセリフを使用。 · 本文テキストの基本サイズを15pxに維持。 · 強調や見出しには太字ウェイト（600-700）を使用。

04

余白

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

主要なレイアウトセクションに、40pxおよび60pxの間隔を一貫して使用。

05

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

sm · 8px
md · 18px
lg · 20px
pill · 100px

1px solid rgba(229, 231, 235, 1)

0px 4px 10px rgba(0, 0, 0, 0.25) · 0px 5.87px 17.6px rgba(25, 33, 61, 0.06)

06

レイアウト

1280container
12columns
24pxgutter
768 / 1024breakpoints

フルワイドのヒーローバナーの後に、マルチカラムのフィーチャーグリッドが続く。

07

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

150msmicro
300mssmall
400msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

コンテンツ遷移のためのopacityフェード · hover状態のためのtransform

インタラクティブ要素の控えめなopacityまたは背景色の変化。 · すべてのインタラクティブ要素における標準的なポインターカーソル。

08

コンポーネント

09

文体と禁止事項

10

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

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

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

11

System Prompt

このデザインは、補助技術デバイスのためのクリーンでプロフェッショナルな製品ショーケースです。白（#FFFFFF）、準ブラック（#1F1F1F）、および単一のハイコロマ・オレンジアクセント（#FF5A2F）からなるハイコントラストパレットを使用。タイポグラフィは基本15pxのヒューマニスト・サンセリフで、見出しやナビゲーションには太字ウェイト（600-700）を使用。主要なインタラクションは控えめで、hover時に0.3秒の遷移があります。重要な制約には、主に白い背景を維持し、主要なサーフェスに丸みのある角（18px-20px）を使用し、装飾フォントや騒がしいレイアウトを避けることが含まれます。

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

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

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

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