LIVING TEAROOM
design system preview

季節のおすすめ

Afternoon Tea（afternoon-tea.net）から抽出したデザイントークンのカタログ。ディープグリーン #006450 + Noto Sans JP + Dosis + wide letter-spacing 1.12px。computed style 実測値に基づく。

Afternoon Tea MEMBERS Online Store
01 / colors

Color Palette

brand / accent
AT Green
#006450
ブランド支配色（CTA・見出し・ナビ）
AT Green Dark
#006654
ダイアログ Apply ボタン
foreground
Text Primary
#555555
本文・ナビ・フッター
Text Secondary
#696969
補助テキスト・h3/h4
Link Default
#0000ee
ブラウザデフォルト青
surface
White
#ffffff
ページ背景・ヘッダー
Section Gray
#ededed
セクション背景・帯
Soft Gray
#f5f5f5
ナビ領域背景
Border Gray
#e1e1e1
区切り線・フッター罫線
Cookie Toggle On
#e3eee3
トグル ON 背景
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
季節のおすすめ
Noto Sans JP / 24px / 500 / line-height: 1.5 (36px) / letter-spacing: 1.12pxSection JP
ペコちゃんと初コラボレーション！
Noto Sans JP / 20px / 500 / line-height: 1.5 (30px) / color #006450h2 Article
重要なお知らせ
Noto Sans JP / 16px / 500 / line-height: 1.5 (24px) / letter-spacing: 1.36px (0.085em) / color #006450h2 Notice
5月1日(9:59)までご注文受付中！母の日に選びたい生花アレンジメント
Noto Sans JP / 16px / 400 / line-height: 1.7 (27.2px) / color #006450Article Body
Afternoon Tea は、1981年に東京・渋谷で生まれたライフスタイルブランドです。日常を彩る雑貨やティーウェア、季節のギフトを通じて、暮らしの中にある小さな幸せをお届けしています。
Noto Sans JP / 14px / 400 / line-height: 1.5 (21px) / letter-spacing: 1.12pxBody Small
重要なお知らせ一覧へ >
Noto Sans JP / 14px / 500 / line-height: 1.0 / color #006450Arrow Link
ショップ検索 | 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

ペコちゃんと初コラボレーション！

不二家とアフタヌーンティーのスペシャルコラボレーションアイテムが登場。ティーウェアや雑貨を展開。
TEAROOM

ハンディファンが、今年もアップデートして登場！

暑い季節に欠かせないハンディファン。今年もデザインと機能をアップデート。
GIFT

母の日に選びたい生花アレンジメント

感謝の気持ちを込めて贈りたい、季節の花を使ったフラワーギフト。
04 / buttons

Buttons

Afternoon Tea MEMBERS
Primary (radius 0px) / #006450
Online Store
Outline (border 3px) / #006450
重要なお知らせ一覧へ
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

花柄マグカップ

アフタヌーンティーらしい花柄のティーウェア。毎日の暮らしを彩る一品。

¥1,650

リネンテーブルクロス

上質なリネン素材を使った、シンプルで上品なテーブルクロス。

¥3,300

アロマキャンドル

穏やかな香りで、リラックスした時間をお過ごしいただけます。

¥2,200

レモンケーキセット

爽やかなレモン風味のケーキ。ティータイムのお供に。

¥1,980
06 / forms

Forms

検索ボックス — border-radius: 50px
デフォルト — border: 1px solid #d1d1d1
フォーカス — border: 1px solid #006450
必須項目です
エラー — 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