ONLINE STORE LIMITED --- 5,500 YEN (TAX INCL.) OR MORE FOR FREE SHIPPING

DAILY PRODUCTS

デイリープロダクツ

MARKS&WEB(marksandweb.com)から抽出したデザイントークンのカタログ。Noto Sans JP 一本のモノクローム、letter-spacing 0.6px の均整な本文、border-radius 0 の完全矩形 CTA、Charcoal #303030 のみで構成されるフラットデザイン。computed style 実測値に基づく。


01 / COLORS

COLOR PALETTE

カラーパレット
PRIMARY
Charcoal
#303030
テキスト・CTA・ブランド基調
Light Gray
#eeeeee
フッター・バッジ・セクション
Tab Active
#c1c1c1
アクティブタブ
Tab Inactive
#f3f3f3
インアクティブタブ
ACCENT
Deep Red
#831616
セール・値引き(唯一の有彩色)
Newsletter Button
#cccccc
ニュースレター登録
SURFACE
White
#ffffff
標準背景
Surface Light
#f3f3f3
タブ・極淡セクション
Surface Gray
#eeeeee
フッター・バッジ
Border Gray
#707070
ニュースレター枠線

02 / TYPOGRAPHY

TYPOGRAPHY HIERARCHY

タイポグラフィ階層
NEW ITEMS
新商品
26px + 14px / 400 / line-height: 1.3 / letter-spacing: normalh2 bilingual
ABOUT US
18px / 400 / line-height: 1.3 (23.4px) / letter-spacing: normalh2 about
ハーバルハンドソープ 250mL — Collection Title
14px / 400 / line-height: 1.3 (18.2px) / letter-spacing: normalh1 collection
ハーバルボディソープ ラベンダー/ローズマリー 480mL — Card Title
14px / 400 / line-height: 1.5 (21px) / letter-spacing: normalh3
MARKS&WEB は、日々の暮らしに寄り添うデイリープロダクツを提案するブランドです。天然精油を使用した石けんやシャンプー、ボディケア製品を中心に、シンプルで飾らないものづくりを大切にしています。植物由来の成分にこだわり、肌にも環境にもやさしい処方を目指しています。
16px / 400 / line-height: 1.8 (28.8px) / letter-spacing: 0.6px (0.0375em)Body
ONLINE STORE LIMITED --- 5,500 YEN (TAX INCL.) OR MORE FOR FREE SHIPPING
13px / 400 / line-height: 1.3 (16.9px) / letter-spacing: 1px (0.077em)Announcement
NEW / SALE / GIFT
12px / 400 / line-height: 1.5 (18px) / letter-spacing: 1px (0.083em)Label / Badge
HOME > BODY CARE > ハンドソープ — Breadcrumb
12px / 400 / line-height: 1.8 (21.6px) / letter-spacing: normalBreadcrumb
BODY CARE / HAIR CARE / FACE CARE — Nav
10px / 400 / line-height: 1.3 (13px) / letter-spacing: normalNav

ABOUT BOTANICAL CARE

ボタニカルケアについて

DAILY PRODUCTS

暮らしの中のデイリープロダクツ

石けん、シャンプー、ハンドクリーム。毎日手に取るものだからこそ、素材を選び、香りを整え、使い心地を磨く。MARKS&WEB のものづくりは、特別な日のためではなく、日々の暮らしのためにあります。

BOTANICAL INGREDIENTS

天然精油のラベンダー、ローズマリー、レモングラス。植物が持つ力を活かし、肌と髪をやさしく整えます。合成香料を使わず、精油そのものの香りで一日をはじめる。それが私たちの考える「デイリープロダクツ」です。

製品に使う素材は、できるかぎり自然由来のものを選んでいます。地球環境への配慮も、日々の暮らしの一部と考えるからです。


04 / BUTTONS

BUTTON VARIATIONS

ボタンバリエーション
VIEW MORE
Primary / #303030 / radius 0px
VIEW MORE
Secondary / Outline / radius 0px
WISHLIST
Wishlist / #000 / radius 0px
登録
Newsletter / #ccc / border #707070
ALL
Tab Active / #c1c1c1 / 500
BODY CARE
Tab Inactive / #f3f3f3 / 500
HAIR CARE
Tab Inactive

05 / PRODUCTS

NEW ITEMS

新商品
BODY CARE

ハーバルボディソープ ラベンダー/ローズマリー 480mL

¥1,690
NEW
HAND CARE

ハーバルハンドソープ レモングラス 250mL

¥1,290
SALE
FACE CARE

モイスチャーハーバルウォーター 150mL

¥1,490
HAIR CARE

ハーバルシャンプー ラベンダー/ローズマリー 500mL

¥1,890

06 / FORMS

FORM ELEMENTS

フォーム要素
DEFAULT
ERROR
有効なメールアドレスを入力してください
NEWSLETTER

07 / ELEVATION

DEPTH & ELEVATION

奥行き表現
Level 0 — Flat
すべての要素。box-shadow は一切使用しない。奥行き表現は色のトーン差(#fff / #eee / #303030)のみ。MARKS&WEB の徹底したフラットデザイン
Border — 1px solid #eeeeee
セクション区切り・入力欄の境界。影ではなくボーダーで領域を分ける

08 / LAYOUT

SPACING & GRID

スペーシングとグリッド
5px
8px
15px
20px
30px
GRID GAP: 8px
grid-template-columns: repeat(4, 1fr) / gap: 8px — 商品グリッドのタイトな密度