募集中デザイナーズマンション（全12戸）｜東京都渋谷区
FIVE 代官山 レジデンス
中庭のモミジを囲む12戸。打ち放しのコンクリートと細いスチールのサッシで組んだ、小さな集合住宅です。
- 単位
- 1口 10万円
- 分配
- 年4.6%（想定）
Design System
デザインシステム
Five United のサイトの色・書体・部品の決まりです。MT のテンプレートはこのページの部品とクラス名をそのまま使います。
ロゴ
5つの同じ大きさの正方形で家の形をつくるマーク。ヘッダーは横組み、フッターは縦組み。写真や暗い面の上では白抜き。マークの周りにはマークの高さの 1/4 以上の余白を取ります。
色
地は Bone、文字は Ink、主色は Verdigris（緑青）、差し色は Brass（真鍮）。Brass は暗い面の上の見出しと数字にだけ使い、明るい面の本文には使いません。
Ink — 文字・暗い面
ink-950
#0b1214
ink-900
#10181a
ink-800
#1b2527
ink-700
#2a3436
ink-600
#444e50
ink-500
#5c6668
ink-400
#7c8587
ink-300
#a7aeae
ink-200
#cdd2d1
Bone — 地・カード
bone-50
#fbfaf7
bone-100
#f5f2ec
bone-200
#ece6dc
bone-300
#ddd4c6
bone-400
#c4b8a6
Verdigris — 主色（ロゴ・リンク・ボタン）
verdigris-950
#0a2725
verdigris-900
#0f3532
verdigris-800
#164743
verdigris-700
#1f5c57
verdigris-600
#2c6f69
verdigris-500
#3e8079
verdigris-300
#8dbab4
verdigris-200
#bbd6d1
verdigris-100
#dcebe8
verdigris-50
#eef5f3
Brass — 差し色（暗い面の見出し・数字）
brass-800
#6f5430
brass-700
#8e6d3e
brass-500
#b8925a
brass-300
#d7bd92
brass-200
#e7d6b8
brass-100
#f3ead9
カテゴリ（プレスリリース）
資金調達提携研究・学会イベント・展示会プロダクト受賞
書体
英字と数字は Manrope、和文は Noto Sans JP、マガジンの見出しと本文は しっぽり明朝 B1。和文の見出しは字間を詰めず、palt（プロポーショナル）で組みます。
Eyebrow — fu-eyebrow
見出し fu-heading — 住まいをひらかれた資産に
明朝の見出し fu-heading-serif — 10年後も美しい家
リード fu-lead — 美しい家は、一部の人だけのものではありません。AI が家を見守り、ブロックチェーンが持ち分を確かにする。
23,000人
数字 — font-display / extrabold
バッジ
プレスリリースは塗りのバッジ（fu-badge fu-cat-<カテゴリ>）、お知らせは線のバッジ（fu-badge-outline）。
資金調達研究・学会お知らせ募集中
カード
角丸 1.25rem（rounded-card）。写真は fu-card-media の中に置き、カード全体に hover で写真が少し寄ります（group）。
架空のサイトだという注意書き
実在の会社と取り違えられないように出す。帯（fu-demo-band）は全ページの最上部でヘッダーの上。高さは h-9 に固定し、写真に重ねるヘッダーは top-9 でその下に付く。囲み（fu-demo-note）は会社概要・お問い合わせ・プレスリリース・物件の一覧に置く。文言は site.yaml の demo_notice。
デモ用の架空のサイトです。ファイブユナイテッドは実在しません。
このサイトは Movable Type のデモのためにつくった架空のスタートアップのサイトです。ファイブユナイテッド株式会社は実在せず、社名・所在地・人物・数字・登録番号はすべて創作です。
一覧の行
お知らせの一覧は日付・カテゴリ・題の3列（fu-row）。スマートフォンでは縦に積みます。
本文（fu-prose）
お知らせ・プレスリリース・会社概要の本文。見出し（h2）は左の線、リストの印は緑青。MT のリッチテキストの出力をそのまま囲みます。
マガジンのブロック（fu-mag）
マガジンの本文はブロックエディタで書きます。標準のブロック（段落・見出し・画像・リスト）は素の要素のまま、カスタムブロックは外側のクラス fu-mag-* で書き分けます。最初の段落の1文字目は大きく落とします（ドロップキャップ）。
本文の段落はこのように組まれます。ブロックエディタの段落は素の p 要素で出力され、明朝の本文書体と広めの行間で読ませます。
家が過ごす時間の半分は、雨や曇りの日なんです。
小野寺 葵
候補の家を訪ねて、最初に見るのはどこですか。
21日
故障を予測できた平均の日数
注記のブロック。記事の補足や、数字の前提を書きます。
小野寺 葵（おのでら あおい）
ファイブユナイテッド 執行役員 Head of Design。
レイアウト
幅は最大 80rem（fu-container。左右の余白はスマートフォン 1.25rem・PC 2.5rem）。節の上下は 7.5rem（fu-section）。本文の幅は 42rem（max-w-prose）、マガジンは 44rem。
fu-container — max-w 80rem / px 1.25rem → 2.5rem
max-w-prose — 42rem（お知らせ・プレスリリースの本文）