xAI

白底、近黑字的首頁，幾乎沒有彩色。最上面一列是 x 標誌、六個下拉導覽和右上角兩顆膠囊按鈕（米灰「Contact Sales」、黑底「Try for free」）。 中間置中一顆小膠囊的新品公告，下面是兩行置中的大標題（最後一個字會輪流換成 code、hear 這類字，底下一條灰線），一行副標和兩顆膠囊按鈕：黑底「Get API Access」、米灰「View Documentation」。 再往下是三張並排的大卡片（Chat、Build、Bot），其中 Build 是一張深色的程式編輯器畫面，整頁的彩色只出現在這張卡片的程式碼裡。 整頁只有字和淺色的面，沒有陰影、沒有框線，靠大量留白分區。

量過的頁面：https://x.ai/

• Primary (#0A0A0A)：主要按鈕的底色，也是標題、內文、導覽的字色；整站的「黑」都是這個近黑色，不是純黑。

• On primary (#FFFFFF)：主要按鈕上的白字，也是頁面底色（canvas）。

• Secondary (#F2F1EF)：次要按鈕的米灰底，hover 變深一階成 #E8E7E5（neutral-1）。

• Surface (#F9F8F6)：大卡片的底色，比次要按鈕更淡的暖灰。

• Neutral (#8D867E、#59534D)：卡片裡的說明字、狀態文字這類次要資訊，偏暖的灰。

• 半透明的黑（#0A0A0A0F、#0A0A0A1A、#0A0A0A40、#0A0A0A99）：框線、分隔線和淡化的字，用同一個近黑色疊不同透明度，不另外挑灰色。

• Accent（#D73A49、#91C17A、#BC97FF、#29C6BE、#9ECE6A、#88A6FF）：只出現在程式編輯器卡片裡，是程式碼的語法顏色，不用在介面上。

• 新品公告裡「New」的橘色小標籤是唯一在介面上的彩色，量測沒有收進色票。

全站用 xAI 自己的可變字型 xVf，程式碼和終端機畫面用 GeistMono。大標題 60px、字重 450、行高 60px（1.0），字距收緊 -0.6px；次一級標題 48px／500，一樣行高 1.0、字距 -1%。 卡片標題 16px／500，內文和按鈕都是 14px（按鈕 500），導覽連結 13px／500。字重只在 400 到 500 之間，不用粗體。

內容欄約 1232px 寬，置中。最上面一列高 64px。間距以 2px 為單位，最常用的是 12px（按鈕上下內距）、8px 和 4px；三張大卡片之間約 12px。

Responsive

• 375px 寬時，上面一列只剩 x 標誌和右邊一顆圓形的選單按鈕；大標題縮小、改成三行，兩顆按鈕上下排、置中；三張大卡片改成一欄。

沒有陰影，卡片和按鈕都平貼在白底上，層次只靠白底、米灰、暖灰三種面的深淺。只有少數幾個元素有很淡的白色內陰影（1px 的亮邊），看不太出來，沒有收進 token。

按鈕、新品公告、導覽右邊的按鈕都是兩端全圓的膠囊形（9999px）；大卡片 16px 圓角；卡片裡的對話泡泡也是圓角，量到的 6 到 12px 多半是這些小元件。

• 主要按鈕：#0A0A0A 底白字，14px／500，高 44px，上下 12px、左右 20px 內距，膠囊形，沒有框線。hover 量不到變化。 右上角的「Try for free」右邊多一段用細線分開的下拉箭頭。

• 次要按鈕：#F2F1EF 底、#0A0A0A 字，大小和主要按鈕一樣。hover：底色變 #E8E7E5。

• 導覽連結：13px／500，上下 6px、左右 12px 內距，有下拉的在文字右邊加小箭頭；hover 量不到變化。

• 大卡片：#F9F8F6 底、16px 圓角、沒有框線和陰影，左下角是卡片名稱、右下角「Explore →」。程式編輯器那張是深色底，上面有三個圓點的視窗列。

• 新品公告：白底、細框的膠囊，左邊橘色「New」小標籤、中間文字、右邊一顆圓形箭頭按鈕。

• 導覽列：高 64px，透明底（往下捲之後的樣子沒有量）。

• 首頁沒有輸入框。

• Do：介面只用近黑 #0A0A0A、白和暖灰，彩色留給內容（程式碼、圖片）。

• Do：按鈕一律膠囊形，主要的用黑底白字，次要的用米灰底，不加框線。

• Don't：不要用陰影或框線區分卡片，用底色深淺就好。

• Don't：大標題不要用粗體，字重 450 左右、字距收緊。