# 官網v2 Style Guide
:::info
與以往專案不同之處在於需邊設計邊研究gs是否能實現
:::

## Theme
* 貼上文案時，文字樣式會跟著複製源的樣式走，導致無法跟隨自訂theme且需一個一個修改。
* 貼上後先選擇任意文字樣式，再點選回目標的文字樣式即可。
* 行距與段落間距的差異
* 段落間距是換行後的距離與行距不同
* 文字連結會有底線
* 直接從文字樣式取消底線即可。
* 三種按鈕(filled, outline, text) 內的文字顏色跟隨按鈕顏色無法自定義。
* 插入圖片可超連結，用戶不須一定要點選按鈕或文字。
* 圖案想要有樣式需先製圖後再上傳，gs不支援圖片樣式(like stroke, shadow...)
* g.s columns 比例，日後製圖可參考
* 關閉頁面於header，可頁面內超連結引導。
* [Google Sites is The Best Website Builder for Micro Businesses](https://www.linkedin.com/pulse/google-sites-best-website-builder-micro-businesses-faridul-himam)

---

# Style Guide proposal
:::info
目前兩種style guide，包含色彩計畫、中英字體、ref
非最終定案，還會因應硬體產品有所變動。
歡迎留下介面色彩上的風格意見！
:::
## 1. Tech Blue
* **Color plan**
* concept: 科技、潔淨、敏捷、專業

* **Typography**
* 中文繁體字：思源黑體 Noto sans TC
* 英文字體：Montserrat

* **Mock up**：
* Icon
* Gradients

## 2. Future Green
* **Color plan**
* concept: 自然能源、人文、企業責任、精神

* **Typography**
* 中文繁體字：思源黑體 Noto sans TC
* 英文字體：Montserrat
* **Mock up**：
* Icon

* Gradients

---

### ref.

[To 設計師：入門網頁字型指南 -5 | 一塊設計 | apo design - 設計共筆部落格](https://apodesign.tw/uiux/getting-started-with-website-font-5/)

[字體大辯論：無襯線字體還是襯線字體？](https://tw.strikingly.com/blog/posts/the-great-font-debate-sans-serif-or-serif-lets-settle-this-once-and-for-all)

### mockup tool
[palettemaker](https://palettemaker.com/app)
[subcolor](https://subcolor.github.io)
[mesh.y](https://meshgradient.in)