FANGCHI BRAND IDENTITY · 2026

方正做事，
齊全照顧。

這是方齊物業管理的品牌識別系統。標誌、色彩、字體、圖示和設計標記都收在這裡，新官網、名片、招牌和 LINE 官方帳號，都從這套規則長出來。

01BRAND CORE

品牌核心

在台灣找房子，大家最想聽到兩句話。方齊的名字，正好是這兩句話的開頭。

方正

格局方正好住、好擺，沒有畸零角落。房子的第一個條件。

齊全

設備齊全搬進來就能生活，什麼都不缺。房子的第二個條件。

品牌主張

方正做事，齊全照顧。

方方正做事

有規矩、透明、說到做到。

對房東
帳目清楚、流程透明，合約寫的就是我們做的。
對房客
照片是真的，條件先講清楚，費用不藏在小字裡。

齊齊全照顧

周到、完整，不漏東漏西。

對房東
招租、帶看、簽約、收租到修繕，一次包辦。
對房客
設備、生活機能、交通資訊一次給齊，報修有人接。

我們服務誰

房東委託包租代管

在高雄有房子，沒時間、也不想自己處理招租和租客的屋主。

他們在意

  • 租金按時入帳
  • 房子被好好對待
  • 有事有人處理，不用自己跑

房客找房子的人

在高雄工作、讀書、成家的人，找套房、整層住家，或開店用的店面與透天。

他們在意

  • 照片和條件是真的
  • 看屋好約、回覆快
  • 住進去以後，報修有人接

品牌個性

像一位做事很有條理的社區管理員：你會放心把鑰匙交給他。

  • 踏實

    說到做到，不誇大。寧可把條件講在前面，也不讓人白跑一趟。

  • 有條理

    資訊排得整整齊齊：租金、坪數、樓層、費用，一眼看懂。

  • 溫暖

    有人在、有燈亮著。冷冰冰的規定，也要用人話說。

  • 在地

    熟高雄的路、捷運站和商圈，知道哪裡好停車、哪條街晚上熱鬧。

我們不是豪宅仲介的高冷，也不是租屋平台的熱鬧叫賣。

語氣

  • 1

    說清楚，不說滿

    用具體數字取代形容詞。不寫「交通便利」，寫「步行 6 分鐘到捷運站」。

  • 2

    先說可以，再說不行

    規則一定要講，但用邀請的語氣，讓對方知道怎麼樣才符合。

  • 3

    像人說話

    用「我們」和「你」，不用「本公司」「敬請」「您的愛窩」。

  • 4

    一次給齊

    費用、條件、看屋方式一次寫完，不讓人追問三輪。

現在官網的寫法方齊的寫法

透過方齊 快速找到您的愛窩

在高雄，找一個方正齊全的家。

如無法遵守以上規定，避免浪費時間 ****請勿來電***

為了不讓你白跑一趟，預約看屋前，請先確認以下條件都沒問題。

拜託各位務必提早預約時間，因為我們不會24小時都待在那裡，感謝喔^^~

看屋採預約制。請前一天用 LINE 告訴我們想看的物件和時段，專員會回覆確認。

$19,000/月

月租 19,000 元・管理費另計 1,200 元

03COLOR

色彩

深藍是夜晚的港都，暖白是剛粉刷的牆，琥珀是窗裡亮著的燈。一個畫面裡，燈只亮一盞。

港夜藍

Harbor Navy

高雄港的夜色，也是舊官網一直用的藍。沉穩、可信，負責標題、主要按鈕和品牌色塊。

HEX
#223062
RGB
34 48 98
OKLCH
oklch(32.6% 0.090 269)
Token
navy.800

窗燈琥珀

Lamp Amber

夜裡亮著的那盞燈。只用在畫面的一個焦點上；要當文字用時，換成更深的 amber-700。

HEX
#F39C43
RGB
243 156 67
OKLCH
oklch(76.5% 0.145 63)
Token
amber.400

灰泥白

Plaster

頁面底色。像剛粉刷好的牆，比純白多一點住家的溫度。

HEX
#FCFAF6
RGB
252 250 246
OKLCH
oklch(98.6% 0.006 85)
Token
paper
用量比例。大面積是暖白和白，深藍撐起結構，琥珀最多 5%：一顆按鈕、一個價格、一個「最新」標籤。琥珀從不當大面積底色。

色階

以 OKLCH 建立，每一階的明度差距在視覺上一致。標示 AA 的色票放在白底上當文字，對比達 4.5:1 以上。

港夜藍navy品牌、文字連結、資訊

  1. 50F3F7FE
  2. 100E6EDFC
  3. 200CEDBF8
  4. 300A8BDED
  5. 4007F99DA
  6. 5005C76C0
  7. 6004158A1AA
  8. 700314380AA
  9. 800223062AA
  10. 900172046AA
  11. 9500D142FAA

窗燈琥珀amber焦點、價格、提醒

  1. 50FFF8ED
  2. 100FFEED4
  3. 200FFDBAD
  4. 300FEBE73
  5. 400F39C43
  6. 500DF8028
  7. 600BE651D
  8. 7009A4E1CAA
  9. 800773917AA
  10. 900582911AA
  11. 9503D1C0DAA

灰泥stone背景、框線、文字。淺色偏暖，深色偏藍

  1. 50F8F5F1
  2. 100F0ECE7
  3. 200E1DDD7
  4. 300CDC8C2
  5. 400ACA7A0
  6. 5007F838B
  7. 6005F636CAA
  8. 700444953AA
  9. 8002C313DAA
  10. 900191E2AAA
  11. 9500C101BAA

綠green可租、成功

  1. 50EDFBF2
  2. 100DCF6E6
  3. 200BBECCE
  4. 3008BD8AB
  5. 40056BC86
  6. 5002A9D67
  7. 6000E8050AA
  8. 7000E653FAA
  9. 800075030AA
  10. 900063A23AA
  11. 950052918AA

紅red錯誤、刪除

  1. 50FFF4F3
  2. 100FEE6E5
  3. 200FFCFCC
  4. 300FEA6A0
  5. 400F17871
  6. 500DE4E49
  7. 600C1332FAA
  8. 7009C2623AA
  9. 8007C1D1AAA
  10. 9005D1512AA
  11. 950430F0DAA

語意色

元件只用語意色，不直接用色階。深色模式切換的是這一層，元件不用改。

背景

  • bg-canvaspaper頁面底色：暖白灰泥，不用純白。
  • bg-surfacewhite卡片、面板、輸入框。
  • bg-raisedwhite選單、浮層、對話框。
  • bg-sunkenstone.50凹陷區塊、表格斑馬紋、圖片佔位。
  • bg-mutedstone.100標籤、滑過時的底色。
  • bg-brandnavy.800主要按鈕、品牌色塊。
  • bg-brand-hovernavy.900
  • bg-brand-subtlenavy.50
  • bg-accentamber.400亮著的那盞燈。一個畫面一處。
  • bg-accent-subtleamber.50
  • bg-inversenavy.900頁尾、淺色模式中的深色區塊。

文字

  • text-primarystone.900內文：暖白紙上的藍墨。
  • text-headingnavy.900
  • text-secondarystone.600輔助文字。白底對比 6.0:1。
  • text-tertiarystone.500只用於佔位與停用文字（對比低於 4.5:1）。
  • text-brandnavy.800
  • text-linknavy.600
  • text-link-hovernavy.800
  • text-priceamber.700租金與金額。白底對比 6.0:1。
  • text-on-brandwhite
  • text-on-accentnavy.950
  • text-inversestone.50

框線

  • border-defaultstone.200
  • border-strongstone.300
  • border-brandnavy.800
  • border-focusnavy.500鍵盤焦點框：對底色 4.2:1。

圖示

  • icon-defaultnavy.800
  • icon-mutedstone.400沒有提供的設備：燈是熄的。
  • icon-accentamber.400圖示的亮燈處：有提供。

狀態

  • status-successgreen.600
  • status-success-subtlegreen.50
  • status-warningamber.700
  • status-warning-subtleamber.50
  • status-dangerred.600
  • status-danger-subtlered.50
  • status-infonavy.600
  • status-info-subtlenavy.50

物件狀態

  • listing-availablegreen.600可租
  • listing-reservedamber.700已預訂 / 洽談中
  • listing-rentedstone.500已出租
  • listing-newamber.400「最新」標籤底色
  • listing-featurednavy.800「精選」標籤底色

04TYPOGRAPHY

字體

中文用思源黑體，英文和數字用 Manrope。兩套都是開源字型，網頁、簡報、印刷都能免費使用。

方正齊全

思源黑體 Noto Sans TC

中文內文與標題。字重齊全、字形符合台灣教育部標準，在小尺寸螢幕上依然清楚。

Regular 400Medium 500Bold 700

Aa 0123

Manrope

英文、數字、價格。半方半圓的幾何字形，「0」是圓角方形，和「方」呼應；數字等寬，租金和坪數對得整整齊齊。

Regular 400SemiBold 600Bold 700

月租19,000元

坪數32.5坪

樓層13F/15F

電話0989-355-200

字級

標題字級隨螢幕寬度在範圍內流動（375px 到 1280px）。中文內文行高 1.8，字距 0.02em。

.text-display-xl38px–56px / 1.2 / 700首頁主標。

在高雄，找一個方正齊全的家

.text-display31px–41px / 1.25 / 700頁面標題（h1）。

房東專區：把房子交給我們

.text-headline25px–31px / 1.35 / 700段落標題（h2）。

小港核心商圈・店住合一透天

.text-title21px–24px / 1.4 / 700卡片與區塊標題（h3）。

覺民路｜近大昌覺民澄清商圈

.text-title-sm20px / 1.5 / 600物件標題（h4）。

2 房 1 廳 1 衛・電梯大樓 13F

.text-body-lg18px / 1.8 / 400導言段落。

從招租、帶看、簽約、收租到修繕，方齊一次包辦，你只要等租金入帳。

.text-body16px / 1.8 / 400一般內文。

近國道 1 號，串聯國 3、國 10 與 88 快速道路。光武國小、民族國中學區，全天 24 小時管理，有垃圾處理，免追垃圾車。

.text-label14px / 1.4 / 500按鈕、表單標籤、標籤。

預約看屋

.text-small14px / 1.6 / 400次要文字。

租金不含管理費，管理費每月 1,200 元。

.text-caption12px / 1.5 / 400附註、時間等資訊。

更新於 2026 年 10 月 25 日

.text-overline12px / 1.4 / 600英文段落標籤，例如 FEATURED。

FEATURED LISTINGS

.text-price21px–24px / 1.2 / 700卡片上的租金，等寬數字。

$19,000/月

.text-price-lg31px–41px / 1.1 / 700物件頁的租金。

$47,000/月

排版原則

  • 一段話不超過 40 個字寬閱讀區最寬 760px。長文案拆段，別讓眼睛跑太遠。
  • 數字用 Manrope 等寬數字加上 .num：租金、坪數、樓層、電話上下對齊。
  • 標題不超過兩行物件標題寫重點，不堆「｜」和形容詞。
  • 全形標點中文用「，。、：」與「」；中英數之間加半形空格。
  • 不要用斜體和全大寫中文中文沒有斜體，強調請用粗細或顏色。
  • 價格先寫數字，再寫單位「19,000 元/月」，管理費等額外費用寫在旁邊，不藏起來。

05ICONS

圖示

102 個圖示，全部依同一套規格手工繪製。設備、生活機能這些和房子有關的圖示，每一個都有一個「亮燈」的地方。

有提供＝燈亮著

一眼看出這間房子有什麼

舊官網用刪除線表示「沒有提供」，掃過去很難分辨。新設計讓有提供的設備亮起琥珀色的燈，沒提供的熄燈變灰，並在文字上標示「無」給螢幕閱讀器。

試試看：點一下圖示切換有無。

設備 19

物件提供的設備。有提供的亮燈，沒提供的熄燈。

  • 冷氣air-conditioner
  • 冰箱fridge
  • 洗衣機washer
  • 熱水器water-heater
  • 電視tv
  • 第四台cable-tv
  • 網路internet
  • 天然瓦斯gas
  • 床bed
  • 衣櫃wardrobe
  • 沙發sofa
  • 桌椅desk-chair
  • 陽台balcony
  • 對外窗window
  • 電梯elevator
  • 汽車位parking
  • 機車位scooter-parking
  • 可開伙kitchen
  • 可養寵物pet-friendly

生活機能 12

「近捷運」「近夜市」這類搜尋條件與物件標籤。

  • 近捷運mrt
  • 近輕軌light-rail
  • 近車站train-station
  • 近公車站bus-stop
  • 近夜市night-market
  • 近傳統市場traditional-market
  • 近商圈shopping-district
  • 近百貨公司department-store
  • 近便利商店convenience-store
  • 近學校school
  • 近公園綠地park
  • 近醫院hospital

物件特色與條件 7

管理、垃圾處理、可入籍、補助等條件。

  • 精選物件featured
  • 全新未住brand-new
  • 有管理員doorman
  • 有垃圾處理garbage-service
  • 可申請租屋補助rent-subsidy
  • 可入籍household-registration
  • 禁菸no-smoking

房屋類型 9

公寓、透天、華廈、大樓，以及店面、套房等用途。

  • 公寓apartment
  • 透天townhouse
  • 電梯華廈mid-rise
  • 電梯大樓high-rise
  • 店面storefront
  • 整層住家whole-floor
  • 雅房shared-room
  • 獨立套房studio
  • 辦公室office

規格 10

坪數、樓層、格局、租金與費用。

  • 坪數area
  • 樓層floor
  • 格局layout
  • 衛浴bathroom
  • 租金rent
  • 押金deposit
  • 管理費management-fee
  • 租期lease-term
  • 可遷入日move-in
  • 座向orientation

介面操作 45

按鈕、導覽、表單。單色，不亮燈。

  • 搜尋search
  • 地點map-pin
  • 地圖map
  • 導航navigation
  • 電話phone
  • LINEline
  • 電子郵件mail
  • 時間clock
  • 預約日期calendar
  • 上一個chevron-left
  • 下一個chevron-right
  • 收合chevron-up
  • 展開chevron-down
  • 返回arrow-left
  • 前往arrow-right
  • 查看更多arrow-up-right
  • 開啟外部連結external-link
  • 選單menu
  • 關閉close
  • 篩選filter
  • 排序sort
  • 收藏heart
  • 已收藏heart-filled
  • 分享share
  • 確認check
  • 已完成check-circle
  • 新增plus
  • 減少minus
  • 說明info
  • 注意alert
  • 會員user
  • 首頁home
  • 鑰匙key
  • 修繕wrench
  • 合約contract
  • 安心保障shield-check
  • 照片image
  • 全螢幕expand
  • 格狀檢視grid
  • 列表檢視list
  • 複製copy
  • 下載download
  • 瀏覽eye
  • 精選star
  • 已精選star-filled
格線
24 × 24，四周 2px 安全邊距
線寬
1.5px，圓角端點與轉角
圓角
大框 2、中框 1.5、小色塊 0.5
亮燈
每個圖示一處，最小 2 × 2，盡量用小方塊
顏色
線條吃 currentColor，亮燈吃 --icon-accent
尺寸
16 / 20 / 24 / 32px，避免縮放到中間值

06FOUNDATION

版面基礎

所有尺寸都落在 4px 的方格上。方格是平面圖、是窗、是租約上的欄位，也是方齊這個名字。

間距

以 4px 為一格。元件內距用 8、12、16，區塊之間用 32 以上，段落間距隨螢幕寬度在 64–96px 間流動（--space-section）。

  • space-14px
  • space-28px
  • space-312px
  • space-416px
  • space-520px
  • space-624px
  • space-832px
  • space-1040px
  • space-1248px
  • space-1664px
  • space-2080px
  • space-2496px
  • space-32128px

圓角

方正但不尖銳。按鈕與輸入框 8，卡片 12，大型面板 16 以上。

  • xs2px
  • sm4px
  • md8px
  • lg12px
  • xl16px
  • 2xl24px

陰影

帶一點深藍的陰影，像傍晚的光。一般卡片不加陰影，用框線分隔；滑過、浮起時才出現。

  • sm
  • md滑過的卡片。
  • lg浮層、固定的搜尋列。
  • xl對話框。

動態

動作要短、要穩，像門順手關上。滑過一下，看方塊怎麼移動。使用者開啟「減少動態效果」時，一律關閉。

ease-standard0.2, 0, 0, 1
ease-enter0.05, 0.7, 0.1, 1
ease-exit0.3, 0, 0.8, 0.15
  • instant80ms
  • fast140ms滑過、按下。
  • base220ms大多數轉場。
  • slow360ms面板、抽屜。
  • slower560ms頁面層級的出現效果。

格線與斷點

內容最寬 1200px，左右留白 16–24px。手機 4 欄、平板 8 欄、桌機 12 欄。

名稱寬度欄數典型裝置
—04手機
sm640px4大手機・橫向
md768px8平板
lg1024px12筆電
xl1280px12桌機

07APPLICATIONS

應用範例

規則套用到真實場景的樣子。物件資料取自現在官網上的物件，標題依新的語氣改寫。

網站頁首

LINE 預約看屋

物件卡片

  • 最新照片準備中

    整層住家

    覺民路電梯 2 房・近大昌商圈

    高雄市三民區

    • 2 房 1 廳 1 衛
    • 32 坪
    • 13F/15F
    • 近夜市
    • 近傳統市場
    • 有管理員

    19,000元/月管理費另計

  • 精選照片準備中

    全棟透天

    小港路店住兩用透天・5 層樓

    高雄市小港區

    • 3 房 2 廳 4 衛
    • 80 坪
    • 全棟 5 樓
    • 近商圈
    • 可做店面

    47,000元/月

  • 照片準備中

    獨立套房

    進學路套房，有對外窗

    高雄市大寮區

    • 1 房 1 衛
    • 6 坪
    • 3F/5F
    • 近便利商店

    6,000元/月

按鈕

預約看屋搜尋物件0989-355-200查看更多物件
焦點（琥珀）
一個畫面只放一顆：預約看屋、委託代管。
主要（深藍）
搜尋、送出表單等主要流程。
次要（框線）
電話、分享等並列的動作。
文字
查看更多、返回這類輕量連結。

名片

張簡小姐

物業管理專員

0989-355-200
@hmz9851f
高雄市鳳山區保泰路 396 號 8 樓之 2

fcrent.tw

08DOWNLOADS

下載

需要印名片、做招牌或給合作廠商，直接下載這裡的檔案，不要從截圖裡剪。

標誌 SVG

全部轉外框，不需要安裝字型。

方印與頭像

Favicon、App、LINE 與社群頭像。

設計標記

給工程師與設計工具使用。

原始檔：標誌由 design/build-brand.mjs 依構成參數產生；設計標記的來源在 tokens/；圖示在 src/icons/，繪製規格見 design/icons/SPEC.md。