Botanist Official

答えはきっと
自然の中にある。

BOTANIST（botanistofficial.com）から抽出したデザイントークンのカタログ。Yu Gothic Pr6N + new-atten の二書体システム、font-feature-settings: normal（palt 不使用）、グレーブルー #e6e9ed と ダークチャコール #1f2529 のナチュラルパレット、rgba(255,255,255,0.2) の半透明ガラス CTA、radius 0px のシャープエッジ。computed style 実測値に基づく。

Shop Now Learn More
01 / Colors
Color Palette
カラーパレット
Brand
Gray Blue
#e6e9ed
メイン背景（94箇所）
Dark Charcoal
#1f2529
フッター・ダークセクション
Text
Text Primary
#222222
本文テキスト
Text Secondary
#787b80
ラベル・補足テキスト
Text Muted
#bcbfc3
控えめな補助テキスト
Text on Dark
#ffffff
ダーク背景上の白テキスト
Surface
Surface Gray Blue
#e6e9ed
メイン背景
Surface Near White
#fcfcfc
コンテンツエリア
Surface Light Gray
#f0f0f0
カード・区切り
Surface Dark
#1f2529
フッター・ダークセクション
Interactive
CTA Glass
rgba(255,255,255,0.2)
半透明 CTA（ダーク背景上）
Error
#c0392b
フォームエラー
02 / Typography
Typography
タイポグラフィ -- Yu Gothic Pr6N（和文）+ new-atten（欧文ディスプレイ）二書体システム / palt 不使用
答えはきっと自然の中にある。
Yu Gothic Pr6N M / 52px / 400 / line-height: 1.35 / letter-spacing: 0.1emHero Display
植物と共に生きる。
Yu Gothic Pr6N M / 40px / 400 / line-height: 1.35 / letter-spacing: 0.15emFooter Tagline
Special
new-atten / 32px / 400 / line-height: 1.1 / letter-spacing: 0.03emSection Display EN
Haircare
new-atten / 21px / 400 / line-height: 1.6 / letter-spacing: 0Category Label EN
商品について知る
Yu Gothic Pr6N B / 18px / 400 / line-height: 1.5 / letter-spacing: 0Section Title JP
ボタニカルシャンプー モイスト
Yu Gothic Pr6N B / 16px / 400 / line-height: 1.6 / letter-spacing: 0Product Name
Mission
new-atten / 15px / 400 / line-height: 1.6 / letter-spacing: 0Section Label EN
BOTANISTは、植物の恵みを生かし、髪と身体を健やかに保つためのプロダクトをお届けしています。自然由来の成分にこだわり、毎日のケアに心地よさと豊かさを。答えはきっと、自然の中にあると私たちは信じています。
Yu Gothic Pr6N M / 16px / 400 / line-height: 2.0 / letter-spacing: 0.05emBody
Home
new-atten / 16px / 700 / line-height: 1.6 / letter-spacing: 0Nav Brand EN
ヘアケア / ボディケア / ライフスタイル
Yu Gothic Pr6N M / 12px / 400 / line-height: 1.6 / letter-spacing: 0Nav Label
*個人の感想です。効果効能を保証するものではありません。
Yu Gothic Pr6N M / 10px / 400 / line-height: normal / letter-spacing: 0Caption
03 / Product
Product
プロダクトページサンプル
Haircare

植物と共に生きる。

BOTANISTは、植物由来の成分を豊富に配合し、髪と地肌をやさしくケアするボタニカルシャンプー&トリートメントです。自然の恵みを凝縮した処方で、洗い上がりのなめらかさと指通りの良さを実感していただけます。

Special
こだわりの成分

厳選されたボタニカルウォーターと植物由来の洗浄成分を使用。石鹸ベースでありながら、クリーミーな泡立ちと優れた洗浄力を両立しました。グリーンアップルとローズの香りが、毎日のバスタイムを特別な時間に変えます。

Add to Cart Details
04 / Buttons
Buttons
ボタン -- radius 0px シャープエッジ / 半透明ガラス CTA
Light Background
購入する
Solid / #1f2529 / radius 0
詳しく見る
Ghost / border / radius 0
もっと見る
Text Link / border-bottom
Dark Background
Shop Now
Glass / rgba(255,255,255,0.2) / radius 0
Learn More
Ghost on Dark / border / radius 0
05 / Cards
Product Cards
商品カード -- shadow なし / radius 0 / フラット
Product Image
Haircare

ボタニカルシャンプー モイスト

¥1,540
Product Image
Bodycare

ボタニカルボディーソープ モイスト

¥1,100
Product Image
Skincare

ボタニカルフェイスウォッシュ

¥1,650
Product Image
Haircare

ボタニカルトリートメント モイスト

¥1,540
06 / Forms
Forms
フォーム -- radius 0px / focus: border #1f2529
Default
正しい電話番号を入力してください
Focus
07 / Elevation
Depth & Elevation
奥行き -- シャドウなし、色面と透明度で構成
Level 0 -- Near White
コンテンツカード面。#fcfcfc
Level 1 -- Gray Blue
メイン背景面。#e6e9ed
Level 2 -- Light Gray
区切り・プレースホルダ。#f0f0f0
Level 3 -- Dark Charcoal
ダークセクション。#1f2529
Level 4 -- Glass
半透明オーバーレイ。rgba(255,255,255,0.2)
08 / Layout
Layout
レイアウト -- spacing scale & grid
4px
8px
16px
32px
64px
120px
Near White #fcfcfc
Gray Blue #e6e9ed
Dark #1f2529