TASA 國家太空中心

國家太空中心（TASA）的官網。整站是接近全黑的深色太空感：首頁第一屏是一圈 3D 的方形玻璃片（深藍、亮藍、灰、透明、少數橘紅）在黑底上慢慢旋轉，中間是白色的「直面未知 而探索不止」和更大的英文「Embrace the Unknown, Never Stop Exploring.」，下面一顆四角有細框角的「EXPLORE」按鈕。

往下捲，每一段只放一件事：超大的白色英文標題「What's New」「Space Exploration」，下面一行小小的中文；內容（新聞卡片、五個探索方向的卡片）捲到才浮進來。衛星任務那段是一大段灰色的任務名稱，輪到的那一個變成白色。頁尾上面有一行很大的藍色英文標語橫向跑動。

整體是黑底、白字、藍色光暈：頁首和卡片都是半透明的毛玻璃，卡片底部帶一點深藍漸層、細藍框；幾乎沒有其他顏色。

• Canvas（#0C0C0D）：整頁的底色，接近黑但不是純黑。

• Text（#FFFFFF）：標題、內文、導覽的字都是白色。

• Primary（#0033CC）：TASA 的深藍。卡片底部的漸層（35% 不透明）、卡片的細框（50%，#0033CC80）、頁首下緣的線、頁尾的藍色大字都是它。

• Blue bright（#3668FF）：比較亮的藍，只在少數裝飾用。

• Text muted（#82D7F3）：淺天藍，卡片上的編號「01」「Top 3」。

• Header（#0C0C0DBF）：頁首 75% 不透明的黑，後面加 30px 的模糊，看得到底下的內容。

• 半透明的白（#FFFFFF80、#FFFFFF40）：EXPLORE 按鈕上 50% 的字；衛星任務名稱沒輪到時的 25% 灰字。

• Neutral（#899599、#B7BCBF、#D3D8E5、#393E40）：卡片上的分類和「READ」連結是 #899599 的灰藍；大標題下面那行中文是 #B7BCBF；其他是次要文字和按鈕的細框。

全站用 TASA 自己的字型 tasaOrbiter（一款幾何感的無襯線字，Google Fonts 沒有），中英文一樣。

• 區塊的英文大標題（What's New、Space Exploration）120px／700，白色；下面一行中文 32px／500，淺灰（#B7BCBF）。

• 首頁第一屏的英文標語 56px／600、中文標語 40px／500，都是白色。

• 衛星任務名稱 40px／500、字距 0.4px。

• 卡片標題 22px／500；卡片編號 18px，淺天藍。

• 導覽和按鈕 16px／400；內文 14px、行高 23.8px（1.7）。

• 頁首 72px 高、固定在最上面：左邊白色的 TASA 標誌，右邊七個導覽連結和「TC｜EN」切換語系，下緣一條細藍線。

• 首頁第一屏滿版，文字和按鈕都在正中間。

• 每個區塊至少一整個畫面高：大標題置中，內容捲到才出現（淡入加位移）。

• 新聞卡片 560px 寬，三張錯開排列；探索方向的卡片五張，也是錯開、互相疊一點。

• 衛星任務是一段置中、自動換行的大字，像一段文章。

• 頁尾：一行橫向跑動的藍色大字，下面是社群連結、政策連結和聯絡資訊，字都很小。

Responsive

• 375px 寬時，頁首只剩標誌、「TC｜EN」和「MENU」加四條直線的選單按鈕。

• 英文標語縮小、斷成兩行，EXPLORE 按鈕變寬、維持置中；3D 玻璃片圍成的圓縮到畫面裡。卡片改成一欄。

沒有一般的陰影，層次靠「毛玻璃」：頁首和卡片都是半透明，後面加 30px 的模糊，疊在 3D 動畫或深藍的光暈上。EXPLORE 按鈕滑鼠移上去會發出一圈白色的光（0 0 15px，約 49% 白）。

• 卡片是 8px 的小圓角。

• 按鈕是直角的長方形，四個角各有一個小小的 L 形框角，像相機的對焦框。

• 圓形只出現在裝飾（280px 的大圓）。

• 頁首：75% 不透明的黑、30px 模糊，72px 高，只有下緣一條 1px 的 #0033CC 細線，白字 16px。

• EXPLORE 按鈕：#0C0C0D 底、230×51px 的直角長方形，細灰框加四角的白色 L 形框角，字是 50% 的白、16px、全大寫；滑鼠移上去字變全白、外面一圈白光。

• 卡片：半透明底、由下往上的深藍漸層（#0033CC 35% → 黑 35%）、30px 模糊，1px 半透明藍框、8px 圓角，內距上左右 40px、下 32px；左上淺天藍的編號，旁邊白色的 22px 標題，下面灰色的說明或分類，右下角「READ ›」。

• 衛星任務名稱：40px／500 的字，沒輪到的是 25% 的白，輪到的變全白，可以點。

• 頁尾標語：一行很大的藍色英文，橫向無限跑動。

• 要用接近黑的底和白字，藍色只當光暈、細框和漸層。

• 要讓頁首和卡片半透明加模糊，不要用不透明的色塊。

• 要讓每個區塊只放一件事，用很大的英文標題加一行小中文。

• 按鈕要是直角、細框、四角框角，不要做成圓角或實心的。

• 不要加陰影；要發光就用白色或藍色的外光。

• 不要加別的顏色；首頁 3D 動畫裡的橘紅只是點綴，介面上不用。