Branding 品牌指南
歡迎使用 ExpTech Studio 品牌資源。本頁面提供品牌識別元素的使用指南，幫助您正確使用我們的品牌資產。
Logo
主要 Logo
ExpTech Studio 的主要 Logo 可在以下位置找到：
- PNG 格式：
/img/exptech.png - 白色背景版本：
/img/ExpTech_Studio_white.png
Logo 使用規範
-
✅ 正確使用：
- 保持 Logo 的原始比例
- 確保 Logo 周圍有足夠的留白空間（建議至少 Logo 高度的 20%）
- 在淺色背景上使用深色 Logo，在深色背景上使用淺色 Logo
-
❌ 避免：
- 不要拉伸或變形 Logo
- 不要改變 Logo 的顏色
- 不要在 Logo 上添加效果（陰影、描邊等）
- 不要將 Logo 放在複雜的背景上
顏色
主要顏色
ExpTech Studio 使用 Docusaurus 主題顏色系統，支援深色和淺色模式。
主要顏色變數：
--ifm-color-primary：主要品牌色--ifm-color-primary-dark：深色模式下的主要色--ifm-color-emphasis-*：強調色系列
顏色使用建議
- 使用主題顏色變數以確保在不同模式下的一致性
- 避免使用硬編碼的顏色值
- 確保文字與背景有足夠的對比度（符合 WCAG 無障礙標準）
字體
字體系統
ExpTech Studio 使用 Docusaurus 預設字體系統：
- 正文字體： 系統預設字體堆疊
- 程式碼字體：
var(--ifm-font-family-monospace) - 標題字體：
var(--ifm-heading-font-family)
字體使用建議
- 保持一致的層級結構（H1, H2, H3 等）
- 程式碼使用等寬字體
- 確保字體大小符合可讀性標準
品牌元素
圖標
- 使用 SVG 格式的圖標以確保清晰度
- 圖標應與整體設計風格一致
- 保持圖標的簡潔性
圖片
- 使用高解析度圖片（建議至少 2x 解析度）
- 優化圖片大小以提升載入速度
- 使用適當的圖片格式（PNG、JPG、WebP）
使用範例
在文件中引用 Logo
在 React 組件中使用
import useBaseUrl from "@docusaurus/useBaseUrl";
function MyComponent() {
const logoUrl = useBaseUrl("/img/exptech.png");
return <img src={logoUrl} alt="ExpTech Studio Logo" />;
}
下載資源
Logo 檔案
其他資源
如需其他品牌資源或使用許可，請聯繫 ExpTech Studio 團隊。
品牌授權
所有 ExpTech Studio 品牌資產僅供以下用途使用：
- ✅ 官方文件與網站
- ✅ 社群專案與教學
- ✅ 非商業用途的展示
如需商業用途或特殊授權，請聯繫我們。
聯絡我們
如有任何品牌使用相關問題，歡迎透過以下方式聯繫：
- GitHub： ExpTechTW
- Discord： ExpTech Discord
最後更新： 2025-12-16