DJI

難度:
行業風格
DJI 效果預覽

效果預覽

設計規範

由官方品牌資料與該風格提示詞推導出的關鍵 token,可複製或搭配下方 DESIGN.md 使用。

顏色

  • primary品牌色

    主要操作與強調

  • on-primary推導

    主色上的文字

  • secondary推導

    標籤、徽章與次要強調

  • on-secondary推導

    輔色上的文字

  • neutral提示詞

    頁面底色

  • on-neutral推導

    底色上的文字

  • surface推導

    卡片、面板與浮層

  • on-surface推導

    表面上的文字

  • border推導

    邊框與分隔線

圓角與形狀

提示詞
sm · 4px
md · 8px
lg · 12px
full

互動元件使用全圓角膠囊形狀。

間距

推導
  • sm8px
  • md12px
  • lg24px

陰影與層級

推導

層級以細邊框與色調分層表達。

字型

提示詞
  • Ag

    標題 32px · 粗體

    Open Sans

  • Ag

    內文 16px · 一般

    Open Sans

  • Ag

    標籤 13px · 中等

    Open Sans

白色攝影棚是 DJI 頁面的底色:全幅產品渲染嵌在等寬白縫分隔的方角圖塊裡,介面元素退到攝影之後。品牌站只用一種工程藍(#0070d5)承擔主操作,商店切換為略亮的 #0060ef,膠囊按鈕配 1px 墨色描邊次按鈕,橙褐色(#be4e04)僅以小號字標提示產品等級。Open Sans 以 -0.02em 至 -0.03em 的負字距和 600/400 的窄字重區間,塑造緊湊而工程化的閱讀節奏;商店再疊加 8px 選項卡、2px 藍色選取環與吸底購買列。

DJI媒體與消費

提示詞範本

基礎範本
Design a DJI-inspired interface. - Photography-first showroom: full-bleed studio renders in square, gutter-separated tiles on a white canvas; - One engineering blue for every primary action -- #0070d5 on the brand site, #0060ef in the store -- always expressed as a pill, with 1px ink-outline pills for secondary actions; - Open Sans throughout with negative tracking (-0.02em body, -0.03em headings) and a narrow 600/400 weight range; - Burnt-orange (#be4e04) eyebrow labels marking product tier, never used as a button fill; - Store surfaces built from 8px option cards with a 2px #0060ef selection ring and a sticky white purchase bar. Colors: #0070d5, #0060ef, #be4e04, #262626, #ffffff, #f5f5f5 with #0070d5 accent. Typography: Open Sans.

變體提示詞

📱 行動裝置
Design a mobile app with DJI aesthetics. Use DJI color identity with #0070d5 accents. Photography-led cards, pill actions, and a compact sticky purchase bar.
💻 Web 端
Design a web application with DJI style. Use DJI color identity with #0070d5 accents. Square studio tiles, white gutters, and restrained engineering-blue actions.
📊 儀表板
Design a dashboard with DJI design language. Use DJI color identity with #0070d5 accents. Telemetry cards, clear spec hierarchy, and pill-shaped filters.
📄 到達頁
Design a landing page with DJI visual identity. Use DJI color identity with #0070d5 accents. Full-bleed product hero, square tiles, and a single blue conversion path.

使用範例

DJI 產品商店

Web 端
Build a DJI-style product store page with a full-bleed hero carousel, square studio tiles, and #0070d5 pill CTAs.

DJI 飛行資料儀表板

儀表板
Create a drone fleet dashboard using DJI's restrained system: white canvas, Open Sans, spec cards, and #0070d5 status pills.

✅ 適用情境

  • 無人機與相機產品頁
  • 攝影棚式硬體展示
  • 消費電子商店

❌ 不適用情境

  • 高密度後台表格
  • 柔軟生活風格品牌

DESIGN.md 檔案

符合 design.md 開放格式的設計系統描述,可複製或下載後交給 AI 程式設計工具使用。

下載