JP ▾
AZABUDAI HILLS
lorem ipsum dolor sitlorem ipsumlorem ipsum dolor sit
AZABUDAI HILLS
©Photographer Name

lorem ipsum dolor sit amet consectetur, lorem ipsum.

lorem ipsum dolor sit amet consectetur,
“lorem ipsum, lorem ipsum dolor“lorem”lorem ipsum−Modern Urban Village−”lorem.
lorem ipsum dolor sit amet consectetur adipiscing,
lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.
lorem ipsum dolor Green&Wellness lorem ipsum dolor, lorem ipsum dolor sit amet.

lorem ipsum dolor sit→
Colors
01 — lorem ipsum dolor. #003a40(lorem / lorem)lorem #00875f(lorem ipsum)lorem 2 lorem ipsum dolor
Brand
Deep Green(lorem / lorem / lorem)#003a40 / --dark-green
Green(lorem ipsum)#00875f / --green
Green Hover#179c75
Light Green(lorem)#b9e972 / --green-01
Sage(lorem ipsum)#c3dc93 / --green-02
Surface
Background#ffffff / --white
Surface Green(lorem ipsum dolor)#e6f0e7 / --light-green-01
Surface Green Pale#f1f9e2 / --light-green-02
Surface Light#f8f8f8 / --light-grey
Greige#e1dcdc / --greyge
Brown(lorem ipsum dolor)#9b8376 / --brown
Ink
Ink#000000 / --bkack(lorem ipsum)
Text#333333 / --black-01
Text Muted#5c5c5c / --dark-grey
Text Faint#8c8c8c / --grey
Divider#dddddd

lorem / lorem / lorem UI lorem ipsum dolor. “Green & Wellness”lorem ipsum dolor sit lorem ipsum dolor sit amet consectetur. CSS lorem ipsum--bkack lorem ipsum dolor sit amet consectetur adipiscing.

Typography
02 — lorem ipsum dolor sit YakuHanJP / letter-spacing lorem normal / lorem ipsum 500
Page Title（EN）
Azabudai Bold → Jost
54px / 1.1 / 0.03em
ABOUT AZABUDAI HILLS
Section Title（EN）
Azabudai Condence → Jost
35px / 1.0 / 1.05px
SPECIAL INTERVIEW
Section Title（EN）
Azabudai Regular → Jost
33px / 1.2 / 0.99px
What’s on
Section Label（EN）
32px / 1.0 / color #c3dc93
OUR STORY
Concept Head
28px / 500 / 1.4 / 1px
lorem ipsum dolor sit amet consectetur, lorem ipsum.
Section Head
24px / 500 / 1.4 / normal
lorem ipsum
Sub Head
20px / 700 / 1.5 / normal
lorem ipsum dolor
Card Title
18px / 500 / 1.4 / normal
lorem ipsum dolor sit amet consectetur
Body
15px / 400 / 1.86 / normal
lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing. “lorem”lorem ipsum, lorem / lorem / lorem ipsum dolor sit amet consectetur adipiscing elit.
Body Green
15px / 400 / 1.7 / normal
lorem ipsum dolor, lorem ipsum 8.1ha, lorem ipsum 86 lorem㎡. lorem ipsum 35 lorem ipsum dolor.
Strong
15px / 700 / 1.5 / normal
lorem ipsum dolor sit amet consectetur
Nav
15px / 400 / 1.2 / normal
lorem ipsum＆lorem ipsum
Utility
12px / 400 / 1.52 / normal
lorem ipsum dolor sit
Footer Link
12px / 300 / 1.5 / normal
lorem ipsum dolor sit

lorem ipsum dolor YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif. lorem YakuHanJP lorem(, . “”())lorem ipsum dolor sit amet consectetur, lorem ipsum dolor Noto Sans JP lorem ipsum.letter-spacing lorem ipsum dolor sit amet consecteturlorem ipsum, palt lorem ipsum dolor(lorem ipsum dolor).
lorem ipsum font-weight lorem 500 lorem ipsum, 700 lorem ipsum 20px lorem ipsum dolor sit. lorem ipsum dolor sitlorem ipsum dolor sit amet consectetur.

Article
03 — lorem ipsum dolor 728px. lorem 15px / line-height 1.86
OUR STORY

lorem ipsum dolor sit amet

lorem ipsum dolor, lorem ipsum 8.1ha, lorem ipsum 86 lorem㎡. lorem ipsum dolor 35 lorem ipsum dolor. lorem ipsum 6,000㎡lorem ipsum dolor, lorem ipsum dolor / lorem ipsum / lorem / lorem / lorem ipsum dolor sit.

lorem ipsum dolor sit amet consectetur

3 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum→
Buttons
04 — lorem CTA lorem 1 lorem. lorem ipsum dolor sit amet consectetur
Primary(lorem ipsum CTA)
lorem ipsum dolor sit→

width 300px / height 50px / transparent / 1px solid #003a40 / border-radius 10px / 15px / 400. lorem“→”lorem ipsum dolor sit. lorem CTA lorem ipsum dolor.

Category Link(lorem ipsum dolor / lorem)
lorem ipsum lorem ipsum lorem ipsum lorem ipsum

1px solid #00875f / border-radius 0 / padding 12px. lorem CTA(radius 10px)lorem ipsum dolor sit.

Search(lorem ipsum dolor sit amet consectetur)
Pagination（radius 3px）
102030
Cards
05 — lorem 10px lorem. lorem ipsum dolor sit amet consectetur
shop photo

lorem ipsum＆lorem ipsum

lorem 150 lorem ipsum dolor sit

gallery photo

lorem＆lorem ipsum

lorem / lorem ipsum dolor 20 lorem

green photo

lorem ipsum＆lorem ipsum

lorem 24,000㎡lorem ipsum dolor

Photo Credit(rgba(0,0,0,.08) lorem ipsum dolor sit)
©Photographer Name

lorem ipsum dolor 8% lorem ipsum. lorem ipsum dolor sit amet.

Forms
06 — lorem ipsum / lorem ipsum / lorem. radius 10px, lorem ipsum dolor
lorem ipsum dolor sit
lorem ipsum dolor #00875f lorem＋ #e6f0e7 lorem ipsum dolor
lorem ipsum dolor sit amet consectetur
Elevation
07 — lorem ipsum. lorem ipsum rgba(0,0,0,.1)
Level 0 — none lorem ipsum / lorem. lorem ipsum(#ffffff → #f8f8f8 → #e6f0e7)lorem ipsum dolor.
Level 1 — 0 4px 10px rgba(0,0,0,.05) lorem ipsum / lorem. lorem. “lorem ipsum”lorem ipsum dolor sit.
Level 2 — 0 0 10px rgba(0,0,0,.1) lorem ipsum / lorem ipsum dolor.
Layout
08 — lorem 940px(Webflow lorem)/ lorem 728px. lorem ipsum dolor sit
940px — lorem ipsum dolor
728px — lorem
360px — lorem ipsum
Spacing Scale
5
10
12
24
40
60
100
Border Radius
10px — lorem / CTA / lorem
3px — lorem ipsum dolor
0px — lorem ipsum dolor
50% — lorem ipsum

lorem ipsum dolor sit Webflow lorem 479 /767 / 991 / 1170px. lorem ipsum dolor letter-spacing: normal lorem YakuHanJP lorem ipsum dolor.