每日 11:30–14:30・17:30–20:30線上訂位（另開新視窗）

Brand Identity & Design System · v1.0

螺絲瑪莉 品牌識別

這份頁面是螺絲瑪莉 Rosemary 的品牌與設計系統：標誌、色彩、字體、設計標記（design tokens）與介面元件。所有值都對應到src/styles/tokens.css，網站與之後的實體物料（菜單、名片、外帶袋）都應以此為準。

01品牌核心

定位

中山站巷子裡的義麵坊——
每一盤當天現煮，從麵包招待到甜點。

標語
每一盤，都是當天現煮。
品牌承諾
當天現煮・用料大方・招待到底
個性
溫暖、大方、真誠、帶點俏皮（小惡魔、煙花女這類菜名就是這種性格）
名字的由來
Rosemary 是迷迭香；「螺絲」是螺旋麵，也是捲在叉子上的義大利麵。
視覺母題
白色拱門（店門口）、圓形餐盤（料理照片一律圓形裁切）、單線圓頭筆畫（標誌與圖示）

02標誌

保留舊標誌的手寫單線字形、R 的起筆勾與長尾、以及「o」裡的葉片，重新描繪並精修：統一筆畫粗細與 x 高度、重新調整字距、葉片改為對稱的迷迭香枝條，中文改用圓體讓中英筆畫一致。

主要標誌・全彩
反白・深色背景
字標・網站頁首／小尺寸
單色・印章、燙金、雷雕
圖形標誌・頭像、favicon
留白：四周至少保留一個「o」的直徑；字標最小寬度 96px／20mm
  • 不要改變標誌顏色組合或加上外框、陰影
  • 不要拉長、壓扁或傾斜
  • 不要把標誌放在照片的雜亂區域上
  • 不要單獨把「o」換成其他圖形

下載：rosemary-logo.svgrosemary-logo-reverse.svgrosemary-logo-mono.svgrosemary-wordmark.svgrosemary-mark.svgrosemary-logo.png

03色彩

主色直接來自原標誌：字標的棕、葉片的黃綠、中文的橄欖綠。再加上店裡真實存在的番茄紅與奶油白——綠、白、紅，恰好也是義大利的三色。比例約為 奶油白 70%・棕 20%・綠 7%・紅 3%。

Bruno 字標棕

取自原標誌 #715700。標誌、品牌強調、深色區塊。

  • --bruno-900#2E2510文字、深色背景
  • --bruno-700#54431A
  • --bruno-600#6E5517標誌
  • --bruno-400#9A8457
  • --bruno-200#DDD0B2

Foglia 葉片綠

取自原標誌 #A8BA00。葉片、招待標籤、營業中狀態。

  • --foglia-800#414C10
  • --foglia-700#5F6E16綠色文字
  • --foglia-500#A3B524標誌葉片
  • --foglia-300#CBD66E深底強調
  • --foglia-100#F2F5DC淺底

Pomodoro 番茄紅

自家熬的番茄醬與紅色餐墊。主要行動按鈕（訂位、看菜單）與價格。

  • --pomodoro-700#7F2414
  • --pomodoro-600#A52F1A按下
  • --pomodoro-500#C23B22主要按鈕
  • --pomodoro-200#F1C0AE
  • --pomodoro-100#F9E3DA淺底

Crema 奶油白

麵粉與帕瑪森。全站底色，帶極淡紙張顆粒。

  • --crema-50#FFFDF7卡片
  • --crema-100#F8F3E7背景
  • --crema-200#F0E8D5下沉區塊
  • --crema-300#E4D7BB
  • --olio-500#D9A93F焦點框

語意標記（元件只使用這一層）

  • --color-bg背景
  • --color-bg-raised卡片、對話框
  • --color-bg-sunken區塊底
  • --color-bg-inverse深色區塊
  • --color-text主要文字
  • --color-text-muted次要文字
  • --color-text-accent強調文字
  • --color-action主要行動
  • --color-brand品牌（標誌棕）
  • --color-line分隔線

04字體

巷子裡的義麵坊

思源宋體 Noto Serif TC

標題。像印刷菜單一樣的書卷氣，平衡標誌的手寫感。

Pasta al pomodoro

Fraunces（SOFT 100）

義大利文、英文菜名、價格數字。柔化襯線呼應圓頭筆畫。

每天現煮

系統黑體（蘋方／微軟正黑）

內文與介面。零下載、最快顯示，閱讀最舒適。

  1. --step-6 Display每一盤，都是當天現煮。
  2. --step-5 H1巷子裡的義麵坊
  3. --step-4 H2從麵包到甜點，一餐的完整心意
  4. --step-3 H3餐前手工麵包
  5. --step-2 H4龍蝦醬鮮蝦干貝義大利麵
  6. --step-1 Lead推開南京西路小巷裡的白色拱門。
  7. --step-0 Body義大利麵每天當天現煮，絕不使用隔夜麵，用料一點也不手軟。
  8. --step--1 Small價格以新台幣計，實際供應以店內為準。

05設計標記

間距（4px 基準）

  • --space-1
  • --space-2
  • --space-3
  • --space-4
  • --space-5
  • --space-6
  • --space-7
  • --space-8

圓角

  • --radius-xs
  • --radius-sm
  • --radius-md
  • --radius-lg
  • --radius-xl
  • --radius-pill
  • --radius-arch

陰影

  • --shadow-sm
  • --shadow-md
  • --shadow-lg
  • --shadow-plate

動態

--ease-out
進場、展開（大部分情境）
--ease-spring
餐盤、印章這類有「彈性」的小物件
--dur-1…5
120 / 220 / 380 / 640 / 1000ms；系統「減少動態」時全部歸零

06元件

按鈕

線上訂位 看菜單品牌按鈕小按鈕

標籤與篩選

全部不辣店家招待每日現煮 季節限定

價格

NT$365單片110

圖片框：餐盤與拱門

07圖示與插畫

與標誌相同的語彙：單線、圓頭、1.7px（24px 格線），一律繼承文字顏色。

  • Phone
  • Pin
  • Clock
  • Calendar
  • Train
  • Walk
  • Bag
  • Leaf
  • Sun
  • Chili
  • Info
  • Copy
  • ArrowRight
  • ArrowUpRight
  • Facebook
  • Play

08攝影

  • 料理一律俯拍、置中網站會以圓形「餐盤」裁切，盤子置中、四周留 10% 空間。
  • 自然光、暖色溫避免藍白光；背景以木桌、紅色餐墊、奶油色桌布為主。
  • 至少 2000px 寬目前部分菜色照片只有 400px，建議重新拍攝（優先：蛤蠣、墨魚麵、焗烤）。
  • 空間照補拍白色拱門、庭院與壁畫是最有記憶點的畫面，值得一組專業空間照。

09文字語氣

這樣寫

  • 「麵條每天當天現煮，絕不使用隔夜麵。」——具體、有事實
  • 「點用主餐，餐後再招待一份自家甜點。」——像店員親口說
  • 「Yummy～老闆，再來一份！」——保留原本的俏皮

避免

  • 「頂級奢華、極致饗宴」——空泛的形容詞
  • 過多驚嘆號與表情符號
  • 中英文之間不留空白（網站已開啟 text-autospace）