Fresh Handmade Cosmetics

DESIGN.md から抽出したデザイントークンのカタログ。ダークテーマにカラフルなプロダクトカラーを配置した、劇場的なビジュアルシステム。computed style 実測値に基づく。

商品を見る DESIGN.md を読む

01 / Colors

カラーパレット

Product Colors (with shades)
Rose Jam
#fd726f / #ff9d9d / #feeeee
シャワージェル・ボディローション
Sleepy
#bd8dc8 / #a971b7 / #dabbe1
ラベンダー系バスアイテム
Twilight
#ec58a5 / #f49fcb / #ffdde9
バスボム・シャワージェリー
Good Karma
#ffa379 / #ffcdb6 / #fef3ee
シトラス系フレグランス
Intergalactic
#00b7d5 / #6bcada / #c5e6ec
バスボム・宇宙モチーフ
Magnaminty
#a2c9a4 / #c2e1c4 / #e0ede0
フェイスマスク・ミント系
Product Colors (single)
Rosy Cheeks
#d7aea9
フレッシュフェイスマスク
Skin Drink
#f4d9b9
モイスチャライザー
Synaesthesia
#061455
ディープネイビー
Whoosh
#ffff54
シャワージェリー
Ultrabland
#fcf0e3
クレンジング
Natural Tones
Oat
#e9e4c0
Peace
#d5d0b8
Porridge
#bab69a
Buttermilk
#fbf9ef
ウォームクリーム面
Neutrals (Dark Scale)
Black
#000000
ページ背景
Liquorice
#212121
カード背景
Charcoal
#333333
Slate
#464646
Smoke
#5e5e5e
Shadow
#757575
ボーダー
Stone
#8f8f8f
Silver
#cbcbcb
Cloud
#f4f2f4
Dove
#fafbfc
White
#ffffff
ダーク上テキスト
Semantic & Brand
Amber
#e95708
ウォームアクセント
Club Green
#0db14b
Lush Club
Club Yellow
#ffe838
Lush Club
Error
#eb0000
Error Dark
#ff7024
Success
#138645
Success Dark
#0b5d45
Focus
#535afa
Focus Alt
#7b7afa

02 / Typography

タイポグラフィ階層

Fresh Handmade Cosmetics
Caveat / 40px / 700 / line-height: 1.1Display
セクション見出し — H2 Large
Inter / 30px / 700 / line-height: 1.33 / letter-spacing: -0.5pxページセクション
サブセクション見出し — H2 Medium
Inter / 20px / 700 / line-height: 1.5コンテンツ内
カード見出し — H3
Inter / 18px / 700 / line-height: 1.56カード・リスト
本文テキスト — ダークテーマでの読みやすさを重視したベースボディ。Inter 16px / 400 / line-height 1.5 の標準構成。カラフルなプロダクトカラーが映える、控えめなテキスト表現。ABCabc 123
Inter / 16px / 400 / line-height: 1.5Base Body
補助テキスト — 商品説明やキャプションに使用する小さめの本文。line-height: 1.71 でゆったりとした行間。
Inter / 14px / 400 / line-height: 1.71Body Small
Badge / Country Label
Inter / 12px / 700 / letter-spacing: 1px / uppercaseバッジ・ラベル
font-family: SFMono-Regular, Menlo, Monaco, Consolas;
Monospace / コード・技術テキスト

プロダクト組版サンプル

Bath Bomb Vegan Self-Preserving

Handmade with Love

新鮮なフルーツや野菜、エッセンシャルオイルをふんだんに使い、ひとつひとつ手作りで仕上げたフレッシュハンドメイドコスメティックス。パッケージフリーで地球にもやさしい。

バスボムの楽しみ方

お湯をはったバスタブにバスボムをそっと入れると、鮮やかな色とアロマが広がります。Intergalactic はペパーミントの香りとともに銀河のような青と紫のマーブルを描き出します。Twilight はラベンダーの落ち着いた香りで、就寝前のリラックスタイムに最適です。

シャワージェリーとは

ぷるぷるとしたゼリー状のボディソープ。Whoosh はグレープフルーツとレモンの爽やかな香りで、朝のシャワーを目覚めの一杯に変えます。ちぎって使うユニークなテクスチャーが特徴です。

Rose Jam
Intergalactic
Sleepy

04 / Buttons

ボタンバリエーション

検索
Search (pill)
バスボム
Category pill
登録する
Register (radius: 40px)
Cookieの設定
Ghost / Cookie
在庫なし
Disabled

Note: ALL buttons are pill / rounded (radius: 23px-9999px). Square buttons are never used.


05 / Cards

カードコンポーネント

Rose Jam
Bath Bomb

ローズジャム バスボム

レモンとローズの甘い香りに包まれて、バスタイムをゴージャスに。お湯がピンクに染まります。

¥790
Intergalactic
Bath Bomb

インターギャラクティック

ペパーミントの爽やかな香りとともに、宇宙のような青と紫のマーブルがバスタブに広がります。

¥890
Sleepy
Body Lotion

スリーピー ボディローション

ラベンダーとトンカの穏やかな香りで、おやすみ前のリラックスタイムを演出するボディローション。

¥1,580

06 / Forms

フォーム要素

デフォルト --- border: var(--shadow) #757575, bg: var(--liquorice), radius: 8px
フォーカス --- border: var(--focus) #535afa, ring: rgba(83,90,250,0.25)
正しいメールアドレスを入力してください
エラー --- border: var(--error) #eb0000, ring: rgba(235,0,0,0.2)

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし
Level 1
0 2px 8px rgba(0,0,0,0.3)
Level 2
0 4px 16px rgba(0,0,0,0.4)
Focus Ring
var(--focus) #535afa

Dark theme: 影の効果は控えめ。カード浮遊感は bg difference (liquorice vs black) で表現。


08 / Layout

レイアウト & スペーシング

Max Content 1200px
Product Grid 1000px
Article / Content 620px
Card Min Width 280px
Spacing Scale
4px
8px
12px
16px
20px
24px
32px
48px
64px