RENOVATED MANSION MARKETPLACE

一点もの、という住まい選び。
リノベーション住宅のマーケットプレイス

cowcamo のデザインシステムをカタログ化したプレビューです。物件一覧ページ・マガジンページの computed style 実測値に基づき、カラー、タイポグラフィ、コンポーネント、レイアウトトークンを可視化しています。


01 / Colors

カラーパレット

Brand
Brand Teal
#00cbd6
主要 CTA 背景・ブランドアクセント
Magazine Pink
#ff2c4f
マガジン記事リンク・編集部ラベル
Neutral
Text Primary
#414141
本文テキスト・見出し
Text Secondary
#a7a7a7
補助テキスト・キャプション
Cool Surface
#f3f7f8
背景面・セクション分け
Border
#dbe2e4
カード枠・入力欄ボーダー
White
#ffffff
カード背景・ナビ背景
Overlay
Dark Overlay
rgba(0,0,0,0.8)
モーダル背景・画像オーバーレイ
Semantic
Danger
#d9534f
エラー・必須項目
Success
#2ecc71
成功・完了
Warning
#f0ad4e
注意・情報

02 / Typography

タイポグラフィ階層

WHAT'S NEW — English Section Header
12px / 600 / letter-spacing 1.2px / uppercaseEnglish accent
一点もの、という住まい選び。— Hero H1
36px / 700 / line-height 1.4 / Helvetica (marketplace)トップ
築45年のヴィンテージマンション — Magazine H1
28px / 700 / line-height 1.5 / YuGothic (magazine)マガジン
渋谷区の中古マンション特集 — Section H2
24px / 700 / line-height 1.5物件一覧
南向き・角部屋のリノベーション物件 — H3 / Card Title
16px / 600 / line-height 1.5カード
本文テキスト(Marketplace)— 物件の詳細や条件を記載する際のスタイル。Helvetica ベースのすっきりとした印象で、物件スペックの視認性を重視しています。line-height: 1.5 で物件情報に適したコンパクトな行間を保っています。
14px / 400 / line-height 1.5 / Helvetica物件一覧
本文テキスト(Magazine)— 暮らしのストーリーを届けるマガジン記事のスタイル。YuGothic ベースのやわらかい書体で、リノベーションの魅力を丁寧に伝えます。記事本文は 16px / line-height 1.8 でゆったりとした読みやすいリズムに。
16px / 400 / line-height 1.8 / YuGothicマガジン
4,980万円
18px / 700 (price) + 13px / 400 (unit)物件カード
渋谷区神宮前 / 2LDK / 65.4m² / 築42年 — Caption / Detail
12px / 400 / line-height 1.5 / color #a7a7a7

マガジン記事 + 物件紹介の組版

光と風を取り込む、築40年の団地リノベーション

目黒区 3LDK 78.5m² 築40年 リノベーション済み

かつての団地の間取りをフルリノベーション。壁を取り払い、LDK をひとつながりの開放的な空間に再構成しました。南東向きの窓からは朝の柔らかな光が差し込み、バルコニー越しに緑が広がります。

リノベーションのポイント

もともと細かく仕切られていた和室と洋室を統合し、キッチンを中心に据えたオープンな LDK を実現。天井のコンクリートをあえて露出させ、床には無垢のオーク材を採用しています。

設備・素材のこだわり

キッチンはステンレスのオーダーメイド。洗面台はモルタルで造作し、真鍮の水栓金具をあわせました。ヴィンテージの建材を活かしつつ、断熱・防音には現代の工法を取り入れています。

物件メモ:管理組合がしっかりしており、大規模修繕の積立金も潤沢。ペット可(細則あり)。最寄り駅から徒歩8分で、周辺にはスーパー・公園・小学校が揃っています。

※ 掲載情報は取材時点のものです。詳細は担当エージェントにお問い合わせください。写真の家具・小物は物件に含まれません。


04 / Buttons

ボタンバリエーション

物件を探す
Primary CTA — radius 2px / #00cbd6
条件を変更する
Secondary — White / border / radius 4px
この記事を読む →
Text Link — Magazine pink #ff2c4f
Filter Tags
すべて 1LDK 2LDK 3LDK リノベーション済み ペット可 駅近
Badges
NEW PICK UP リノベ済 売主

物件カード

NEW
1280 x 720 物件写真
光と風を取り込む、目黒の角部屋リノベ
4,980万円
2LDK / 65.4m² / 築42年
目黒区 中目黒
1280 x 720 物件写真
天井高3mの開放感。代々木上原のメゾネット
6,280万円
3LDK / 82.1m² / 築35年
渋谷区 代々木上原
PICK UP
1280 x 720 物件写真
無垢床とモルタルキッチンの世田谷フラット
3,780万円
1LDK / 48.7m² / 築38年
世田谷区 三軒茶屋

06 / Forms

フォーム要素

Default — border #dbe2e4 / radius 4px
Focus — border #00cbd6 / shadow 2px
正しいメールアドレスを入力してください
Error — border #d9534f / shadow 2px

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし — フラットデザインが基本
Elevation 1
0 1px 4px rgba(0,0,0,0.04)
Elevation 2
0 4px 12px rgba(0,0,0,0.06)
Elevation 3
0 12px 32px rgba(0,0,0,0.08)

08 / Layout — Spacing & Radius

スペーシング & ラディウス

Spacing Scale(8px ベース)
2XS
4px
XS
8px
S
16px
M
24px
L
32px
XL
48px
2XL
80px
Border Radius Scale
XS (Button)
2px
SM (Card/Filter)
4px
MD (Large Card)
8px