Design System Preview

Design System Preview
SANU 2nd Home

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing, lorem / lorem ipsum / lorem ipsum dolor sit amet.

TOUR BOOKING DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Main (CTA)
#ec572e
lorem ipsum dolor / CTA
Main Hover
#d44e28
CTA lorem ipsum
Black
#322e21
lorem ipsum / lorem ipsum dolor
Beige / Earth Tones
Beige Light
#f2eee4
lorem ipsum dolor
Beige
#e9e3d1
lorem ipsum / lorem ipsum dolor
Beige Deep 2
#d9c9a1
lorem / lorem ipsum dolor
Beige Deep
#d1c8a6
lorem ipsum dolor
Neutral
White
#ffffff
lorem ipsum
Light Grey
#f3f3f3
lorem ipsum
Grey Brown
#605d55
lorem ipsum dolor
Border
#eaeaea
lorem ipsum dolor
Semantic
Error
#FA4616
lorem / lorem ipsum dolor
Success
#6ea80b
lorem / lorem
LINE Green
#4cc764
LINE CTA
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor, lorem ipsum dolor.
Display: Zen Kaku Gothic New / 34px / 600 / line-height: 1.4 / letter-spacing: 0.01em / palt: onlorem ipsum
lorem ipsum dolor sit amet consectetur
H1: Zen Kaku Gothic New / 30px / 600 / line-height: 1.4 / letter-spacing: 0.01emlorem ipsum dolor
Second Home
lorem ipsum dolor sit
H2 (EN label + JP title): Playfair Display 30px/400 + Zen Kaku Gothic New 24px/600lorem ipsum dolor
lorem ipsum dolor sit
H3: Zen Kaku Gothic New / 24px / 600 / line-height: 1.4 / letter-spacing: 0.01emlorem ipsum
lorem ipsum dolor — SANU lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123
Body: Zen Kaku Gothic New / 18px / 400 / line-height: 1.5 / palt: onlorem
lorem ipsum dolor — Body Small (16px). lorem ipsum dolor sit amet consectetur.
Body Small: 16px / 400 / line-height: 1.5 / color: Grey Brown
lorem ipsum dolor — SANU 2nd Home / lorem / 2024
Caption: 12px / 400 / line-height: 1.5 / letter-spacing: 0.03emlorem ipsum dolor
Tour Booking — Reservation
English UI Label: Inter / 13px / 500 / letter-spacing: 0.06em / uppercaselorem / lorem
Living with Nature
English Display: Playfair Display / 36px / 400 / line-height: 1.1 / decorative seriflorem ipsum
03 / Article

lorem / lorem ipsum dolor sit amet

Living in the Forest

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor

SANU lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.

Live with nature, not against it. lorem ipsum dolor sit amet, SANU lorem ipsum dolor sit.

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

04 / Buttons

lorem ipsum dolor sit

TOUR BOOKING
Primary CTA (pill)
MORE DETAILS
Outline (pill)
LINE lorem
LINE CTA
VIEW CABINS
Outline on Dark
TOUR BOOKING
Primary on Dark
05 / Cards

lorem ipsum dolor

Shirahama

SANU 2nd Home lorem

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit, lorem ipsum dolor sit.

View Details →
Yatsugatake

SANU 2nd Home lorem

lorem 1,000m lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing.

View Details →
Karuizawa

SANU 2nd Home lorem

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

View Details →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #eaeaea, radius: 4px, padding: 12px 16px
lorem ipsum — border-color: #322e21
lorem ipsum dolor sit amet consectetur
lorem — border-color: #FA4616
07 / Elevation

Depth & Elevation

Level 0
none (border only)
Level 1
0 2px 8px rgba(50,46,33,0.06)
Level 2
0 4px 16px rgba(50,46,33,0.08)
Level 3
0 8px 32px rgba(50,46,33,0.12)
08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale

4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px

Content Widths

Max Content 960px
Article Body 640px
Form Width 420px
Card Min Width 280px