精選 · 開放 · 免費
Atlas Obscura
一份精選的編輯指南，帶領你前往全球最非凡的隱藏之地。
editorialtravel
01
設計氣質 DNA
策展旅行隱藏奇景地圖集探索
復古探險家日誌結合現代數位探索
02
色彩
#E21F26Accent
#000000Ink
#383434Ink soft
#ffffffBG
#f7f7f7BG soft
#f1f1f1BG quiet
#808080Muted
rgba(0,0,0,0.1)Line
高對比度的白底黑字編輯基調，搭配單一鮮豔的紅色作為品牌識別與強調
03
字型
transitional-serif · humanist-sans
- display
56px · 700 - subtitle
14px · 700 - body
16px · 400 - caption
14px · 400
標題使用襯線字體，呈現經典編輯風格 · 內文與介面元素使用 Open Sans 以確保可讀性 · 引導文字使用大寫字母並調整字距以強調
04
間距
4px
8px
16px
24px
32px
48px
64px
96px
標準的 4px 基礎網格，編輯區塊採用充足留白
05
表面 (圓角 / 陰影 / 邊線)
sm · 4px
md · 0px
lg · 0px
pill · 999px
1px solid rgba(0,0,0,0.1)，用於卡片與輸入框
rgba(0,0,0,0.24) 0px 0px 5px 0px
06
版面
1280container
12columns
24pxgutter
768 / 1024breakpoints
簡潔的頂端導覽列，接著是全寬置中的英雄區塊，具備搜尋功能
07
動效與互動
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
懸停狀態的流暢過渡效果 · 頁面導覽的流暢捲動
互動元素上的微妙色彩過渡 · 立即回應並伴隨視覺回饋
08
組件
- button 黑色藥丸形按鈕，搭配白色文字與圖示，用於「附近地點」等主要操作
- card 以圖片為主的編輯卡片，邊框極簡
- chip 描邊的圓角按鈕，用於「隨機地點」等次要操作
- input 全寬圓角搜尋輸入框，具備佔位文字與整合的搜尋圖示
- hero 大型置中標題，搭配引導文字、說明文字與顯眼的搜尋欄
09
文案語氣與禁用清單
- 語氣 權威、邀請且充滿好奇
- 標題風格 宏偉、引人遐思的襯線標題，激發好奇心
- 按鈕文案 清晰、導向行動的按鈕，搭配描述性標籤
- 勿使用深色模式或深色背景 — 螢幕截圖顯示以白色 (#ffffff) 為主的背景
- 勿在容器上使用俏皮的圓角 — 螢幕截圖顯示英雄區塊為銳利的矩形邊緣
- 勿使用多個競爭的強調色 — 螢幕截圖顯示單一主導的紅色 (#E21F26) 強調
- 勿在標題中使用纖細、輕盈的無襯線字體 — 螢幕截圖顯示主要標題為粗體、有字重的襯線排版
- 勿用過多陰影使介面雜亂 — 螢幕截圖顯示非常簡潔、平坦的設計，僅有極少的投影效果
- 勿使用小而擁擠的文字 — 螢幕截圖顯示充足的行高與內邊距，以利舒適閱讀
- 避免: 過於隨意的語言
- 避免: 過多的驚嘆號
- 避免: 泛泛的旅行陳腔濫調
10
包內真實截圖
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏擷取自真實頁面 · 真 computed styles
11
System Prompt
這是一個頂級的編輯旅行與策展平台，專注於發現隱藏奇景。視覺識別依賴於鮮明的黑白基調（#000000 墨色於 #ffffff 背景之上），並以單一鮮豔的紅色 (#E21F26) 作為品牌標誌與強調。排版結合了經典的過渡襯線字體用於標題，以及人文無襯線字體（Open Sans）用於內文。版面是簡潔的全寬編輯網格，留白充足。關鍵特徵包括圓角藥丸形輸入框、銳利邊緣的容器，以及粗體大寫的引導文字。勿使用深色模式，勿添加不必要的陰影或邊框，也勿用多個強調色使介面雜亂。
en · zh-CN · zh-TW · ja · ko