Design System Preview: JINS（ジンズ）

COLORSカラーパレット

CSS 変数で完全にトークン化。ブランドレッドは --main-color-red: #da0024、グレーは gray3〜gray90 の 7 段階。

Brand

Brand Red (Token)

#da0024

--main-color-red

Brand Red (Computed)

#ca2029

Link Pink

#eb667c

--link-color

Accent Navy

#27455c

Gray Scale (7 tokens)

gray90

#1b1b1b

gray60

#5e5e5e

gray50

#808080

gray25

#bfbfbf

gray10

#e6e6e6

gray5

#f2f2f2

gray3

#f8f8f8

Card Surface

#fafafa

TYPOGRAPHYタイポグラフィ

Tazugane Gothic（和文）+ JINS Next（英ナビ・見出し）の二本立て。letter-spacing は JP 0.01em / EN 0.02em で CSS 変数化。font-feature-settings: "liga" 0 がルートに適用される。

Hero / 31px / 700 / Tazugane
line-height: 1.45 / ls: 0.01em

2,600万人が選んだ「軽さ」の、その先へ。

H4 EN / 21px / 500 / JINS Next
line-height: 1.3 / ls: 0.02em

Magnify Life

Footer EN / 17px / 500 / JINS Next
line-height: 1.3 / ls: 0.02em

Products / 製品情報

Nav JP / 17px / 700 / Tazugane
line-height: 1.55 / ls: 0.01em

コンタクトレンズ

Body L / 16.5px / 400 / Tazugane
line-height: 1.66 / ls: 0.01em

JINS は、メガネをかけるすべての人の人生を拡張するアイウェアブランドです。Airframe・SCREEN・Combination Titanium など、軽さと機能性を両立した製品を、全国の店舗とオンラインショップで提供しています。

Body S / 12.2px / 400 / Tazugane
line-height: 1.66 / ls: 0.01em

JINS Combination Titanium ［中顔面短縮メガネ］

Caption / 11px / 400 / Tazugane

※ 在庫状況により、店舗での試着が出来ない場合があります

PRODUCTS今月のトレンド

♡

Airframe

JINS Airframe Slim

¥5,500

♡

Classic

JINS Classic Boston

¥8,800

♡

Combination

JINS Combination Titanium ［中顔面短縮メガネ］

¥13,200

♡

SCREEN

JINS SCREEN ブルーライトカット

¥5,500

もっとみる →

BUTTONSボタン

主要 CTA は radius 2px、商品系の "もっとみる" は radius 10px、フィルタ系は radius 50px のピル。階層的な角丸スケール。

Apply 全てのクッキーを受け入れるもっとみる Filter ▼ Clear クッキー詳細

FORMSフォーム

ELEVATION深度

基本フラット。立体感は 7 段階のグレースケールサーフェスで表現。ホバー時は brightness(0.97) で軽くトーンを落とす。

Level 0 — Flat

Level 1 — Hover

Level 2 — Modal

Level 3 — Dialog

LAYOUTレイアウト

Container は --side-spacing: 48px 左右パディング。Header は --header-height: 70px。商品グリッドは PC 4 カラム。