精選 · 開放 · 免費

Getstark

一個企業級 SaaS 平台，自動化數位無障礙合規性，貫穿整個產品生命週期。

01

設計氣質 DNA

一個工業級的無障礙引擎，安靜地在背景運作。

02

色彩

高對比的紫色與黃色，傳達活力與技術精確度。

03

字型

grotesque-sans · monospace

• display56px · 900
• body16px · 400
• caption14px · 400

對大型展示字重使用緊密的字距，以維持視覺連貫性。 · 在有限的背景上，使用極端的字重來建立層次結構。

04

間距

4 和 8 的倍數，以確保一致的對齊。

05

表面 (圓角 / 陰影 / 邊線)

2px 的細邊框，搭配深藍色或主色紫色的強調。

0 4px 12px rgba(0, 0, 0, 0.1)

06

版面

置中欄位的主區域，左對齊數據點，右側浮動狀態指示器。

07

動效與互動

互動元素上的透明度與色彩過渡，營造流暢、響應迅速的感覺。

按鈕與連結上的微調色彩變化。 · 無強烈彈跳或縮放；依賴視覺狀態變換。

08

組件

• button 高對比的實色區塊，帶有輕微的圓角。
• card 浮動的白色容器，帶有細微邊框，用於介面模型。
• chip 狀態標籤，使用背景顏色與圖示指示器。
• input 簡單的矩形欄位，帶有細邊框。
• hero 一個以字體為主導的大膽區塊，使用深紫色背景讓文字與黃色強調更加突出。

09

文案語氣與禁用清單

• 語氣 權威、技術性、令人安心。
• 標題風格 直接、以利益為導向的陳述，強調自動化。
• 按鈕文案 清晰、以行動為導向的短語，例如「免費註冊」或「開始使用」。

• 不要使用柔和或粉彩的配色方案 — 螢幕截圖顯示使用深邃、飽和的紫色（#381FD1）作為主要主區域背景。
• 不要對標題使用輕的字重 — 螢幕截圖顯示主要展示字體使用極粗的黑色字重（900）。
• 不要對標題使用寬鬆的字距 — 螢幕截圖顯示使用負字距（-0.56px），營造緊密、高衝擊力的外觀。
• 不要使用多彩的強調系統 — 螢幕截圖顯示使用單一、高飽和度的黃色（#FEDB63）作為主要強調色。
• 不要對所有元素使用尖銳的 0px 邊框圓角 — 螢幕截圖顯示圓角的按鈕與卡片，以及一些藥丸形的標籤。
• 不要依賴圖示密集的導覽 — 螢幕截圖顯示以文字為主的頂層導覽，搭配簡單的下拉箭頭。
• 避免: 避免模糊語言；直接說明合規性。
• 避免: 避免過於隨意的俚語；維持專業的企業語調。
• 避免: 避免與無障礙性無直接關聯的複雜術語。

10

包內真實截圖

擷取自真實頁面 · 真 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko