浏览命令

/impeccable bolder

Bolder

將安全的設計推向有影響力,而不滑向混亂。

何時使用

當介面看起來像所有其他介面時,請使用 /impeccable bolder。通用無襯線字、中等粗細、柔和陰影、適度的重點色、合理的間距、令人遺忘。設計不是錯的,只是太安全。當專案能承受存在感而當前狀態沒有帶來任何存在感時使用 bolder。

不要在需要長時間盯著看的儀表板上使用。大膽在行銷頁面、hero 時刻和內容功能上掙得它的位置。不在操作工具中。

運作方式

技能在不破壞可用性的前提下放大四個軸線:

  1. 尺度:展示字型被推到 clamp(3rem, 6vw, 6rem) 或更高。填滿 viewport 的標題,而非閃躲的標題。
  2. 粗細對比:輕的 300 對上重的 800,而非中等對上常規。真正的張力,不是聳肩。
  3. 色彩承諾:重點色以完整強度出現,不被稀釋。背景可以表明立場(墨色、重點色、奶油色)而非全是白紙。
  4. 構圖信心:不對稱、偏離網格、引言、懸掛標點、尺度跳躍。版面有聲音。

技能不會添加更多東西。它放大已經存在的東西。如果設計有三種顏色,bolder 不會添加第四種,它會更堅定地承諾這三種。

試試看

/impeccable bolder the landing page hero

預期變更:

  • Hero 標題從 3rem 改為 clamp(3.5rem, 7vw, 6.5rem),展示字體,粗細 700
  • 副標題從常規改為斜體 1.5rem,向左偏移 8px 以獲得光學對齊
  • 背景從白紙切換為奶油色到白紙的漸層,創造更溫暖的容器
  • CTA 按鈕填滿,移除陰影,縮小邊框圓角,hover 狀態反轉色彩
  • 支援圖片以負上邊距稍微偏離網格,創造不對稱

注意事項

  • 在錯誤的頁面上執行。 產品儀表板、設定和表單不應該大膽。它們應該清晰可讀。改用 /impeccable layout/impeccable polish
  • 混淆大膽與喧嘩。 大膽意味著承諾和自信。喧嘩意味著喊叫。Bolder 是前者。如果結果感覺具攻擊性,後續使用 /impeccable quieter
  • 在同一次操作中與 /impeccable delight 搭配。 Delight 在穩定的視覺基線上效果最好。先大膽,穩定後,再加驚喜。