Design System Preview: NOT A HOTEL

NATURE WITHIN

A home beyond the ordinary. Architecture meets technology.

NOT A HOTEL（notahotel.com）から抽出したデザイントークンのカタログ。Manuka Condensed（Bebas Neue 代替）+ Neue Haas Grotesk Text（Inter 代替）+ YakuHanJP / ヒラギノ角ゴの三書体システム。ダークイマーシブ UI、pill CTA、12 カラムグリッド。実サイトの computed style 実測値に基づく。

資料請求プロパティを見る →

01 / Colors

COLOR PALETTE

Primary

Blue

#0171e3

CTA・テキストリンク

Neutral

Near Black

#0b0b0d

メイン背景・ダーク面

Black

#000000

テキスト（ライト面）

White

#ffffff

テキスト（ダーク面）・セクション背景

Light Gray

#eceeed

ミュート背景・資料請求バナー

Border Gray

#e9e9eb

ボタン枠線・ディバイダー

Surface

Header White

rgba(255,255,255,0.8)

ヘッダー背景（半透明）

02 / Typography

TYPOGRAPHY

NATURE WITHIN

Bebas Neue (Manuka Condensed substitute) / 90px / 400 / line-height: 1.0DISPLAY

MINAKAMI

Bebas Neue (Manuka Condensed substitute) / 60px / 400 / line-height: 1.0DISPLAY SUB

世界中に自分の家を持つ、新しい暮らし方

Noto Sans JP (YakuHanJP + Hiragino Sans) / 20px / 600 / line-height: 1.56 / letter-spacing: 0.04em / paltHEADING 1

Architecture meets Technology

Inter (Neue Haas Grotesk Text substitute) / 18px / 500 / line-height: 1.48HEADING 2 EN

Inter (Neue Haas Grotesk Text substitute) / 16px / 500 / line-height: 1.0 / letter-spacing: 0.02emHEADING 3 / LABEL

建築家がデザインした家を購入し、使わない日はホテルとして運用できます。

Noto Sans JP (YakuHanJP + Hiragino Sans) / 16px / 400 / line-height: 1.15BODY

NOT A HOTEL は、建築家がデザインした別荘を購入し、使わない日はホテルとして運用できるサービスです。購入者はアプリで「自分が使う日」と「ホテルとして貸す日」を切り替えるだけ。世界中に、自分の家を持つ。そんな新しい暮らし方を提案しています。

Noto Sans JP / 15px / 700 / line-height: 1.73BODY SMALL / DESCRIPTION

PROPERTIES MEMBERSHIP ABOUT NEWS

Noto Sans JP / 12px / 600 / line-height: 1.0 / letter-spacing: 0.02emNAV

資料請求

Noto Sans JP / 11px / 500 / pill CTA / bg: #0171e3CTA SMALL

プロパティを見る →

Noto Sans JP / 18px / 500 / letter-spacing: 0.04em / color: #0171e3TEXT LINK CTA

03 / Properties

PROPERTIES

MINAKAMI

NOT A HOTEL MINAKAMI

Gunma Prefecture

谷川岳を望む山間の邸宅。自然と建築が一体化した設計。

AOSHIMA

NOT A HOTEL AOSHIMA

Miyazaki Prefecture

太平洋を一望するビーチフロントの邸宅。

NASU

NOT A HOTEL NASU

Tochigi Prefecture

高原の静寂に佇む、建築家隈研吾氏による設計。

04 / Buttons

BUTTONS

資料請求

PRIMARY PILL (MEDIUM)
bg #0171e3 / radius 999px
padding 18px 24px / 13px / 500

資料請求

PRIMARY PILL (SMALL)
bg #0171e3 / radius 999px
padding 10px 14px / 11px / 500

プロパティを見る →

TEXT LINK CTA
color #0171e3 / 18px / 500
letter-spacing 0.04em

←

ICON BUTTON (LIGHT)
bg #fff / border #e9e9eb
radius 50% / 48x48

→

ICON BUTTON (DARK)
bg #0b0b0d / no border
radius 50% / 48x48

05 / Cards (Light Surface)

CARDS

MINAKAMI

NOT A HOTEL MINAKAMI

谷川岳を望む山間の邸宅

AOSHIMA

NOT A HOTEL AOSHIMA

太平洋を一望するビーチフロント

NASU

NOT A HOTEL NASU

高原の静寂に佇む建築家の邸宅

06 / Forms

FORMS

メールアドレス

DEFAULT — border rgba(255,255,255,0.2)

メールアドレス

FOCUS — border #0171e3

メールアドレス

正しいメールアドレスを入力してください

ERROR — border #e33a3a

07 / Elevation

ELEVATION

NOT A HOTEL はシャドウをほぼ使わないフラットデザイン。建築写真の奥行きとセクション背景色の切り替えで深度を表現する。カードのみ radius 8px。

Level 0 — Flat

box-shadow: none
ほぼすべての要素

Pill CTA

radius: 999px
shadow: none

Card

radius: 8px
shadow: none

Icon

radius: 50%

COLOR PALETTE

TYPOGRAPHY

PROPERTIES

NOT A HOTEL MINAKAMI

NOT A HOTEL AOSHIMA

NOT A HOTEL NASU

BUTTONS

CARDS

NOT A HOTEL MINAKAMI

NOT A HOTEL AOSHIMA

NOT A HOTEL NASU

FORMS

ELEVATION

LAYOUT