NATURE WITHIN
A home beyond the ordinary. Architecture meets technology.

NOT A HOTEL(notahotel.com)lorem ipsum dolor sit amet consectetur adipiscing. Manuka Condensed(Bebas Neue lorem)+ Neue Haas Grotesk Text(Inter lorem)+ YakuHanJP / lorem ipsum dolor sit amet consectetur. lorem ipsum dolor UI, pill CTA, 12 lorem ipsum dolor. lorem ipsum computed style lorem ipsum dolor.

lorem ipsum lorem ipsum dolor→
01 / Colors

COLOR PALETTE

Primary
Blue
#0171e3
CTA / lorem ipsum dolor
Neutral
Near Black
#0b0b0d
lorem ipsum / lorem ipsum
Black
#000000
lorem ipsum(lorem ipsum)
White
#ffffff
lorem ipsum(lorem ipsum) / lorem ipsum dolor
Light Gray
#eceeed
lorem ipsum dolor / lorem ipsum dolor
Border Gray
#e9e9eb
lorem ipsum / lorem ipsum dolor
Surface
Header White
rgba(255,255,255,0.8)
lorem ipsum dolor(lorem)
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
lorem ipsum dolor sit amet, lorem ipsum dolor
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
01
Inter (Neue Haas Grotesk Text substitute) / 16px / 500 / line-height: 1.0 / letter-spacing: 0.02emHEADING 3 / LABEL
lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.
Noto Sans JP (YakuHanJP + Hiragino Sans) / 16px / 400 / line-height: 1.15BODY
NOT A HOTEL lorem, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor“lorem ipsum dolor”lorem“lorem ipsum dolor sit”lorem ipsum dolor. lorem ipsum, lorem ipsum dolor. lorem ipsum dolor sit amet consectetur.
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
lorem ipsum
Noto Sans JP / 11px / 500 / pill CTA / bg: #0171e3CTA SMALL
lorem ipsum dolor →
Noto Sans JP / 18px / 500 / letter-spacing: 0.04em / color: #0171e3TEXT LINK CTA
YOUR HOME,
EVERYWHERE
lorem ipsum dolor sit amet.
lorem ipsum dolor sit amet consectetur, lorem ipsum dolor.
lorem ipsum dolor
03 / Properties

PROPERTIES

MINAKAMI

NOT A HOTEL MINAKAMI

Gunma Prefecture

lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur.
AOSHIMA

NOT A HOTEL AOSHIMA

Miyazaki Prefecture

lorem ipsum dolor sit amet consectetur.
NASU

NOT A HOTEL NASU

Tochigi Prefecture

lorem ipsum dolor, lorem lorem ipsum dolor sit.
04 / Buttons

BUTTONS

lorem ipsum
PRIMARY PILL (MEDIUM)
bg #0171e3 / radius 999px
padding 18px 24px / 13px / 500
lorem ipsum
PRIMARY PILL (SMALL)
bg #0171e3 / radius 999px
padding 10px 14px / 11px / 500
lorem ipsum dolor→
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
01

NOT A HOTEL MINAKAMI

lorem ipsum dolor sit amet

AOSHIMA
02

NOT A HOTEL AOSHIMA

lorem ipsum dolor sit amet consectetur

NASU
03

NOT A HOTEL NASU

lorem ipsum dolor sit amet consectetur

06 / Forms

FORMS

DEFAULT — border rgba(255,255,255,0.2)
FOCUS — border #0171e3
lorem ipsum dolor sit amet consectetur adipiscing
ERROR — border #e33a3a
07 / Elevation

ELEVATION

NOT A HOTEL lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum radius 8px.

Level 0 — Flat
box-shadow: none
lorem ipsum dolor
Pill CTA
radius: 999px
shadow: none
Card
radius: 8px
shadow: none
Icon
radius: 50%
08 / Layout

LAYOUT

12-Column Grid — gutter 24px — max-width 1392px
1
2
3
4
5
6
7
8
9
10
11
12
Column Spans
Gutter 24px
Col 1 (94px)
Col 2 (212px)
Col 3 (330px)
Col 4 (448px)
Col 6 (684px)
Spacing Scale
8px
16px
24px
40px
48px
80px
120px