簡訊設計 Simpleinfo

台灣的整合行銷、設計公司簡訊設計（Simpleinfo）的官網。整個網站是橫向的：頁面只有一個畫面高，滑鼠滾輪往下滾，內容往左移，最下面一條黑色的進度條跟著走；左下角一開始會跳出提示「可使用滑鼠滾輪上下滑動，或以鍵盤左右操作網頁」加一顆黃色的 OK。

頁首是淺灰底，左邊手寫感的「簡訊設計」標誌，右邊一排小字導覽，最右邊一塊黃色的「聯絡我們」。內容依序是：左邊一句「品質穩定的專業設計團隊 簡訊設計 值得信賴」，前面一個黃色的小三角旗；接著一排作品（標題、類型、說明、VIEW PROJECT、一張插畫），作品之間用細直線隔開；「進入作品集」加黃色膠囊按鈕；一整片藍色的「一站式行銷」；一整片黃色的服務項目，每一項是一張白色的插畫卡片加「詳細介紹」按鈕。

整體是乾淨、親切的設計公司網站：淺灰底、黑字，大塊的黃和藍當段落的底色，插畫是黃、藍、黑配色的扁平人物。

• Canvas（#F8F8F8）：頁面和頁首的淺灰白底；藍色段落上的字也是這個顏色。

• Text（#1E1F24）：內文和按鈕的字，接近黑的深藍灰；標題用純黑（#000000）。

• Primary（#FBCC05）：簡訊設計的黃。頁首的「聯絡我們」色塊、主要按鈕、OK 按鈕、整片的服務段落、標題前的小三角旗。

• Blue（#0062EB）：整片的「一站式行銷」段落、插畫裡的藍。

• Text muted（#56575A）：作品說明的灰字。

• Surface（#F0F0F0）：圓形圖示按鈕的淺灰底；#EFF1F5 是更淡、偏冷的灰。

• Border（#BCBCBC）：細框線、作品之間的分隔直線、連結滑鼠移上去的灰。

全站用 aktiv-grotesk-extended（Adobe Fonts 的寬體無襯線字，Google Fonts 沒有），中文接 Noto Sans TC。字重幾乎都是 400，不用粗體。

• 段落標題 32px、行高 46px、字距 0.2px（品質穩定的專業設計團隊、一站式行銷）。

• 藍色段落的說明 28px、行高 46px，白字。

• 作品標題 24px、行高 38px，後面接一個灰色的類型標籤（網站設計）。

• 內文 16px、行高 34px（約 2.1 倍）、字距 0.5px。

• 導覽 14px；服務項目的標籤 14px、字距 1px；小字 12px。

• 按鈕 16px，作品的「VIEW PROJECT」是大寫小字。

• 橫向捲動：頁面一個畫面高（1440×900），內容從左到右排成一長條，滾輪往下就往右走；畫面最下面一條黑色的進度條顯示目前的位置。

• 頁首 80px 高，固定在最上面；右上角的「聯絡我們」是 131×80 的黃色色塊，貼齊頁首的高度。

• 作品一欄 580px 寬，上面是文字（標題、說明、VIEW PROJECT），下面一張插畫，欄與欄之間一條細灰直線。

• 段落之間直接換整片底色（淺灰 → 藍 → 黃），沒有留白的分界。

• 服務項目：黃底上一排卡片，每張上面一行帶小旗子的標籤，中間白底的插畫，下面說明和「詳細介紹」按鈕。

Responsive

• 375px 寬時改成直向捲動：頁首 55px 高，左邊標誌、右邊選單。

• 最下面固定一條黃色的「聯絡我們」按鈕，跟頁面一樣寬。

沒有陰影。層次全靠整片的底色和白色的插畫卡片。

• 按鈕是圓角很大的膠囊（36px）：主要的黃底、次要的淺灰底。

• 圓形的圖示按鈕 40px（社群、上一頁下一頁）。

• 頁首的「聯絡我們」、聯絡表單的「送出」是直角。

• 插畫卡片和作品圖是直角的，少數圖片 20px 圓角。

• 標題前的小三角旗和服務標籤的小旗子是品牌的小記號。

• 主要按鈕：#FBCC05 黃底、#1E1F24 字 16px，36px 圓角的膠囊，上下 10px、左右 16px，字後面一個 → 箭頭（VIEW ALL PROJECTS、Contact Us）。

• 次要按鈕：#F8F8F8 淺灰底、同樣的膠囊（詳細介紹），放在黃色段落上。

• 頁首聯絡我們：131×80 的黃色直角色塊，黑字 16px。

• 圓形圖示按鈕：#F0F0F0 淺灰底的 40px 圓，黑色的圖示。

• 送出按鈕：透明底、1px #BCBCBC 框的直角長方形，210×74，放在深色底的聯絡表單上，淺色字。

• 作品：24px 的標題、灰色的類型標籤、16px 的灰色說明、大寫的 VIEW PROJECT 和一張插畫，欄與欄用細直線隔開。

• 操作提示：左下角淺灰底的長條，12～14px 的黑字說明加一顆黃色的 OK（24px 圓角）。

• 要用淺灰底、黑字，黃和藍只當整片的段落底色和按鈕。

• 字重要維持 400，用大小和行高做層次，不要用粗體。

• 按鈕要是大圓角的膠囊；頁首的聯絡我們是例外，用直角的黃色色塊。

• 插畫要用黃、藍、黑的扁平人物，跟介面的顏色一致。

• 段落之間直接換整片底色，不要加陰影或分隔線。

• 內文行高要拉開（約 2 倍），字距稍微放寬。