Design System Preview
MOONSTAR

1873年創業、福岡県久留米市の老舗シューズブランド。DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

BRANDS ONLINE STORE

01 / Colors

Color Palette

Brand
MOONSTAR Blue
#003b90
ロゴ専用
CTA Black
#262626
ボタン・アクティブ状態
Text
Text Primary
#000000
本文テキスト
Text Secondary
#262626
リンク・ナビ
Text Muted
#565656
ブランドナビ名
Text Tertiary
#a2a2a2
サブタイトル・補足
Surface & Background
Surface White
#ffffff
ヘッダー背景
Background Main
#f2f4f5
メインコンテンツ背景
Surface Card
#eeeeee
カード・サムネイル背景
Background Footer
#f0f0f0
フッター背景
Search BG
#f2f2f2
検索バー背景
Pagination Dot
#d5d5d5
スライダードット

Typography Hierarchy

FINE VULCANIZED — 久留米の技
40px / 700 / line-height: 1.0 / letter-spacing: normalDisplay h1
FINE VULCANIZED
34.56px / 400 / line-height: 1.67 / color: #565656Brand Nav Name
BRANDS
18px / 600 / line-height: 1.0 / letter-spacing: normalSection Header h2
MADE IN KURUME
16px / 600 / line-height: 1.0 / letter-spacing: 0.02emNav Header h3
FINE VULCANIZED / RALY / 810s / OUTLET
14px / 400 / line-height: 1.5 / letter-spacing: 0.05emNav Item h3/h4
ムーンスターは1873年の創業以来、久留米の地でひたむきに靴をつくり続けてきました。ヴァルカナイズ製法という、手間と時間のかかる伝統的な製法にこだわり、一足一足を丁寧に仕上げています。ABCabc 123
14px / 400 / line-height: 2.0 / letter-spacing: normalBody p
NEW ARRIVAL
14px / 600 / line-height: 1.0Category Header
スニーカー / キャンバスシューズ / レインシューズ
12px / 400 / line-height: 1.67 / color: #a2a2a2Brand Label / Subtitle
*一部店舗では取り扱いのない商品がございます
11px / 400 / line-height: 1.82Small / 注釈
Copyright 2024 MOONSTAR CO., LTD. All Rights Reserved.
9px / 400 / line-height: 1.5 / letter-spacing: 0.02emCopyright

Article / Product

FINE VULCANIZED

Made in Kurume since 1873

ヴァルカナイズ製法は、ゴム底とアッパーを硫黄の力で一体化させる伝統的な製法です。窯の中で熱と圧力をかけることで、しなやかさと強度を両立。大量生産では得られない履き心地を生み出します。

MADE IN KURUME

福岡県久留米市。この地で150年にわたり靴づくりの技術が受け継がれてきました。ヴァルカナイズ製法の窯を持つ工場は、国内でもごくわずか。職人の手で一足ずつ丁寧につくられるスニーカーは、工業製品でありながら手仕事の温もりが宿ります。ABCabc 123

素材には上質なキャンバス地を使用。経年変化を楽しめるよう、あえて過度な加工は施しません。履き込むほどに足に馴染み、自分だけの一足へと育っていく。それがムーンスターのものづくりの哲学です。


04 / Buttons

Button Variations

ONLINE STORE
Outline CTA
BUY NOW
Filled CTA
Search...
Search Pill (r: 20px)
Carousel Arrow
Pagination

Product Cards

👟

GYM CLASSIC

ヴァルカナイズ製法で仕上げたキャンバススニーカー。

FINE VULCANIZED
👟

ALWEATHER

全天候型のレインスニーカー。雨の日も快適な一足。

FINE VULCANIZED
👟

STUDEN

810s シリーズ。日常に寄り添うシンプルなデザイン。

810s

06 / Forms

Form Elements

検索バー — bg: #f2f2f2, border-radius: 20px (pill)
デフォルト — border: #d0d0d0, radius: 0px
フォーカス — border: #262626
エラー — border: #c0392b

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ。ほぼ全要素がこのレベル
BG Depth: Surface Card
#eeeeee — 背景色の濃淡で奥行きを表現
Translucent
rgba(255,255,255,0.6) — スライダー矢印
Gray Scale Depth
#fff → #f2f4f5 → #eee → #f0f0f0

08 / Layout

Spacing & Layout

Spacing Scale
8px
16px
24px
32px
48px
64px
Content Widths
Container ~1200px
Main Content 940px
Article Text 620px