Design System Preview
TASAKI

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

COLLECTIONS DESIGN.md

01 / Colors

Color Palette

Brand / CTA
Charcoal
#323232
ブランド基調色 / CTA
Accent
Sage Green
#e3f0ea
ヒーロー背景(季節アクセント)
Text
Text Primary
#323232
本文テキスト
Text Secondary
#a5a5a5
補足テキスト
Surface & Border
Background
#ffffff
ページ背景
Surface
#f5f5f5
セクション背景
Border
#cccccc
標準ボーダー
Dot Inactive
#a5a5a5
非アクティブドット

02 / Typography

Typography Hierarchy

Heading 1 — Page Title
Inter (Tasaki Sans alt) / 40px / 300 / line-height: 1.1 / letter-spacing: normalH1
Section Heading
Inter / 26px / 300 / line-height: 1.1 / letter-spacing: normalH2
News Section Title
Inter / 24px / 300 / line-height: 1.1 / letter-spacing: 0.067emH2 alt
Sub Heading — H4
Inter / 14px / 400 / line-height: 1.3 / letter-spacing: normalH4
本文テキスト — TASAKI のデザインシステムは、極めてミニマルなアプローチで構成されています。font-weight: 300 の見出しと、余白を贅沢に使ったレイアウトが特徴です。モノクロームのグレースケールパレットは、ジュエリーの輝きだけを際立たせます。
Inter / 14px / 400 / line-height: 1.57 / letter-spacing: 0.01emBody
ニュース本文 — 真珠の養殖から始まった TASAKI は、パールジュエリーの分野で世界的な評価を得ています。クリエイティブディレクターとの協業により、コンテンポラリーなデザインを展開。
Inter / 14px / 500 / line-height: 2.14 / letter-spacing: normalBody alt / News
RINGS   NECKLACES   EARRINGS   BRACELETS   BROOCHES
Inter / 14px / 400 / line-height: 1.43 / letter-spacing: normalNav
Header Link — ヘッダーリンク
Inter / 12px / 400 / line-height: 1.83 / letter-spacing: 0.01emLink small

Article Sample

真珠とダイヤモンドが織りなす、新しい美の形

1954年の創業以来、TASAKI は真珠の養殖からジュエリーの完成まで一貫した品質管理を貫いてきました。その哲学が、唯一無二の美を生み出します。

素材へのこだわり

厳選された南洋真珠とあこや真珠。数千粒の中から選ばれるのは、わずか数パーセント。完璧な真円、深い光沢、そして肌に溶け込むような温かみ。それぞれの真珠が、自然がつくりあげた一点ものです。ABCabc 123

素材の美しさは、それを見出す目から始まる。半世紀以上の経験が、真珠を選ぶ眼を研ぎ澄ませてきた。

コンテンポラリーなデザインと、日本のジュエリー職人の精緻な技術。この二つが出会うとき、伝統は革新へと昇華される。TASAKI のジュエリーは、着ける人の個性をさらに美しく引き立てます。


04 / Buttons

Button Variations

SIGN IN
Primary — radius: 0
REGISTER
Register — radius: 3px
SEARCH
Small
Carousel Indicators — active: #323232, inactive: #a5a5a5

border-radius: 0px (default) / 3px (register only)

Ultra-minimal, monochrome button system


05 / Cards

Card Components

Product Image
RINGS

danger ballerina ring

繊細なダイヤモンドがバレリーナの動きを表現。エッジの効いたモダンなフォルム。

¥396,000 (tax included)
Product Image
NECKLACES

balance era pearl necklace

あこや真珠の柔らかな光沢が、首元に上品な輝きを添える。日常にも特別な日にも。

¥242,000 (tax included)
Product Image
EARRINGS

abstract star earrings

スターモチーフをアブストラクトに再解釈。ダイヤモンドが星の輝きを捉える。

¥528,000 (tax included)

06 / Forms

Form Elements

Default — border: #cccccc, radius: 0
Focus — border: #323232
Please enter a valid email address
Error — border: #c53030

07 / Elevation

Depth & Elevation

Level 0: Flat
No shadow, border only (default)
Elevation 1
Card hover, dropdown
Elevation 2
Modal, mega menu

Flat design throughout. Structure expressed through borders and whitespace, not shadows.


08 / Layout

Spacing & Layout

Spacing Scale
4px
8px
16px
24px
48px
80px
Content Widths
Max Container 1200px
Content Area 960px
Article / Text 640px

Sage Green

TASAKI のヒーローエリアで使用されている #e3f0ea。モノクロームの世界観に、ジュエリーの透明感を想起させる淡いグリーンのアクセント。