光嶼顯微牙醫 Eutopia Dental Clinic

台北的顯微牙科診所光嶼顯微牙醫的官網。一打開先是米白底正中間的金色星形標誌和「光嶼顯微牙醫 Eutopia Dental Clinic」，接著第一屏是一大片帶紙張質感的米灰色，白色的細襯線大字「ART MEETS PRECISION」橫過畫面，一顆白色的臼齒照片立在正中間。

往下捲，牙齒照片會跟著移動，旁邊兩張直式的照片（冰河、峽谷、彩虹般的貝殼）換來換去，像在說「自然的質地」；接著是明體的段落標題「對精準與自然的追求、定義光嶼美學。」，再往下切到一整段深灰咖啡色（#383433），用一個黑框的圓形放大鏡畫面講「每個 10 毫米的世界」。後面是案例、醫師部落格、最新消息，最下面是漸層到米白的頁尾。

整體像精品或藝廊，不像一般診所：米灰、深灰咖啡、米白三個顏色，Marcellus 的細襯線英文加 Shippori Mincho 明體中文，大量留白、字距拉開，幾乎沒有按鈕。

• Canvas（#E3E0D0）：大部分段落的米灰底，第一屏還疊了一層紙張的紋理。

• Text／Heading／Primary（#383433）：標題和段落文字的深灰咖啡色，不用純黑；同一個顏色也是「10 毫米」那一整段的底色（inverse）。

• Surface（#FBF8EC）：開場畫面、聯絡區塊和頁尾漸層的米白；深色段落上的字也是這個顏色。

• Text muted（#7D7B7A）：內文、日期、頁尾的灰字。

• Border（#9A9897）：選單按鈕的細框、消息列的分隔線、聯絡區塊的框。

• Neutral（#000000CC、#000000）：選單按鈕裡的線條、消息標題的黑字。

• 唯一的彩色是標誌的金色星形，量測沒有收進色票；照片本身（冰河、貝殼）帶出藍和彩虹色。

英文用 Marcellus（Google Fonts 的細襯線字），中文標題用 Shippori Mincho（日文的明體，中文也顯示得出來），內文用 Noto Sans TC。

• 第一屏的「ART MEETS PRECISION」和開場的大字 90px／400，大寫、字距收得很緊。

• 英文的段落標題（MICROSCOPE ENHANCED DENTISTRY、NEWS）47px／400。

• 中文段落標題 29px／400 的明體、行高 52px、字距 4px，兩行，前面一個小小的「/ 01」編號。

• 選單打開後的連結 33px；「VIEW ALL」這種連結 22px。

• 卡片標題 18px／600 明體、字距 2px；內文 15px、行高 30px（2 倍）、字距 1.2px，灰色。

• 很多小字是 10px 的 Marcellus（側邊直排的「Nature is Beauty」、「SCROLL」）。

• 內容寬度約 1188px，左右留很寬；段落標題通常在中間偏左，說明文字在右下，彼此錯開。

• 右上角固定一顆圓形的選單按鈕，右下角一個細線的往上箭頭；左邊有直排的小字（Nature is Beauty、The World Within 10mm）和一條細直線。

• 段落之間用整段換底色（米灰 → 深灰咖啡 → 米灰）分開。

• 案例是一排直式的卡片（281×440，5px 圓角）；消息是一列一則，下面一條細線。

• 聯絡區塊是米白底、5px 圓角的大框，裡面再放一塊細框的小區塊。

• 頁尾從透明漸層到米白，上面留 240px 的空白。

Responsive

• 375px 寬時，第一屏的「ART MEETS PRECISION」縮小、置中，牙齒照片在中間；右上角是圓形的選單按鈕，左下是「SCROLL」。

幾乎沒有陰影。層次靠照片疊在紙張質感的底上、牙齒照片在捲動時跟其他照片錯開移動，和整段換底色。圓形放大鏡畫面是黑色細框的正圓。

• 卡片和聯絡區塊是 5px 的小圓角。

• 選單按鈕和放大鏡畫面是正圓。

• 線條都很細：1px 的框和分隔線。

• 選單按鈕：44px 的正圓，米灰底、1px #9A9897 細框，中間三條短線；固定在右上角。

• VIEW ALL 連結：22px 的 Marcellus 大寫字，後面接一個細線的箭頭，沒有框和底色。

• 消息列：一則一列，上下 30／65px 內距，左邊日期和分類，右邊 18px 的明體標題，下面一條 1px 細線。

• 案例卡片：直式照片、5px 圓角，下面明體的標題。

• 聯絡區塊：#FBF8EC 米白、5px 圓角的大框，內距上下 75px、左 135px；裡面一塊 265×82、1px 細框的小區塊放預約資訊。

• 要用米灰、深灰咖啡、米白三色，不要用純白、純黑的大色塊。

• 英文用細襯線的 Marcellus、中文標題用明體，字距要拉開。

• 要留大量空白，標題和說明文字錯開放。

• 要用照片的質地（冰河、峽谷、貝殼）營造氣氛，不要用插畫或圖示堆滿。

• 不要加明顯的按鈕和陰影；連結用文字加細箭頭就好。