LIVING TEAROOM
design system preview

lorem ipsum dolor

Afternoon Tea(afternoon-tea.net)lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor #006450 + Noto Sans JP + Dosis + wide letter-spacing 1.12px. computed style lorem ipsum dolor.

Afternoon Tea MEMBERS Online Store
01 / colors

Color Palette

brand / accent
AT Green
#006450
lorem ipsum dolor(CTA / lorem / lorem)
AT Green Dark
#006654
lorem ipsum Apply lorem
foreground
Text Primary
#555555
lorem / lorem / lorem ipsum
Text Secondary
#696969
lorem ipsum dolor / h3/h4
Link Default
#0000ee
lorem ipsum dolor sit
surface
White
#ffffff
lorem ipsum / lorem ipsum
Section Gray
#ededed
lorem ipsum dolor / lorem
Soft Gray
#f5f5f5
lorem ipsum dolor
Border Gray
#e1e1e1
lorem ipsum / lorem ipsum dolor
Cookie Toggle On
#e3eee3
lorem ON lorem
02 / typography

Typography

LIVING
Noto Sans JP / 28px / 400 / line-height: 1.93 (54px) / letter-spacing: 1.12px / bg #006450Nav Tab
BRAND
Dosis / 28px / 500 / line-height: 1.5 (42px) / letter-spacing: 3.2px (0.114em)Section EN
LIVING
Dosis / 24px / 700 / bg #ededed / letter-spacing: 1.12pxNav Section
lorem ipsum dolor
Noto Sans JP / 24px / 500 / line-height: 1.5 (36px) / letter-spacing: 1.12pxSection JP
lorem ipsum dolor sit amet consectetur!
Noto Sans JP / 20px / 500 / line-height: 1.5 (30px) / color #006450h2 Article
lorem ipsum dolor
Noto Sans JP / 16px / 500 / line-height: 1.5 (24px) / letter-spacing: 1.36px (0.085em) / color #006450h2 Notice
5 lorem 1 lorem(9:59)lorem ipsum dolor!lorem ipsum dolor sit amet consectetur
Noto Sans JP / 16px / 400 / line-height: 1.7 (27.2px) / color #006450Article Body
Afternoon Tea lorem, 1981 lorem ipsum / lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.
Noto Sans JP / 14px / 400 / line-height: 1.5 (21px) / letter-spacing: 1.12pxBody Small
lorem ipsum dolor sit >
Noto Sans JP / 14px / 500 / line-height: 1.0 / color #006450Arrow Link
lorem ipsum dolor | LIVING | TEAROOM | BAKERY
Noto Sans JP / 12px / 500 / line-height: 1.5 (18px) / letter-spacing: 1.12pxFooter Title
26.02.04 Afternoon Tea TEAROOM、Afternoon Tea BAKERY、Afternoon Tea LOVE&TABLE
Noto Sans JP / 12px / 400 / line-height: 1.5 (18px) / letter-spacing: 1.12pxNotice Item
03 / article

Pickup

LIVING

lorem ipsum dolor sit amet consectetur!

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor. lorem ipsum dolor sit amet.
TEAROOM

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur!

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur.
GIFT

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.
04 / buttons

Buttons

Afternoon Tea MEMBERS
Primary (radius 0px) / #006450
Online Store
Outline (border 3px) / #006450
lorem ipsum dolor sit
Arrow Link / #006450

Sub-brand Navigation

LIVING TEAROOM
Nav Tab / 28px / bg #006450 / white

Section Nav

LIVING TEAROOM
Dosis / 24px / 700 / bg #ededed
05 / cards

Cards

lorem ipsum dolor

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

¥1,650

lorem ipsum dolor sit

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

¥3,300

lorem ipsum dolor

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

¥2,200

lorem ipsum dolor sit

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

¥1,980
06 / forms

Forms

lorem ipsum dolor — border-radius: 50px
lorem ipsum — border: 1px solid #d1d1d1
lorem ipsum — border: 1px solid #006450
lorem ipsum dolor
lorem — border: 1px solid #cc3333
07 / elevation

Elevation

Level 0 — Flat
box-shadow: none / border: 1px solid #e1e1e1
Level 1 — Header
box-shadow: rgba(0,0,0,0.1) 0 2px 2px 0
08 / layout

Spacing & Width

Spacing Scale

8px
10px
16px
20px
32px
48px
64px

Content Widths

Full Bleed Banner 100vw
Content Section 960px
Body Text 640px