design system preview

The thoughts we have at visvim

visvim（visvim.tv）から抽出したデザイントークンのカタログ。極小タイポ（10〜12px）+ weight 300 Light + pill CTA（radius 18px）+ ほぼ無彩色パレット。Adobe Fonts の acumin-pro + heisei-kaku-gothic-std を Inter + Noto Sans JP で代替。computed style 実測値に基づく。

Read Web Store
01 / colors

Color Palette

brand / foreground
Charcoal
#222222
テキスト基本色
Pure Black
#000000
リンク・ナビ
Muted Gray
#b7b7b7
カテゴリ・セカンダリ
Button Gray
#707070
ボタン罫線・タグ文字
surface
White
#ffffff
ページ背景・CTA 背景
Tag Background
#fafafa
タグ・フィルターの面色
Footer Dark
#222222
Subscribe ボタン面
Overlay Gray
#8b8b8b
ドロワー・モーダル背景
accent
Subsequence Blue
#d2e3ea
唯一の有彩色（外部リンク）
border
Thin Border
#707070
CTA ボタン罫線
Tag Border
#e5e5e5
タグ・ページネーション
02 / typography

Typography

The thoughts we have at visvim
acumin-pro / 14px / 600 / line-height: normal / letter-spacing: normal / color #222222h1
Recent Release
acumin-pro / 16px / 500 / line-height: normalh2 Section
CHRISTO SANDAL-FOLK
acumin-pro / 16px / 700 / line-height: 1.0 (16px)h2 Product
Delivery Location/ Web Store
acumin-pro / 14px / 600 / line-height: 1.5 (21px) / letter-spacing: 0.42px (0.03em)Modal Head
WMV VISVIM SANTA FE
acumin-pro / 14px / 600 / line-height: 1.0 (14px)Product Title
Dissertation
acumin-pro / 12px / 500 / line-height: 1.0 (12px) / color #b7b7b7Category Label
手仕事から生まれる素材への探求、伝統と革新を行き来するものづくりの姿勢。visvim は服を通じてその思想を伝える。
acumin-pro / 12px / 500 / line-height: normalBody Medium
天然染料やヴィンテージの技法を現代の衣服に取り入れ、経年変化を楽しめるプロダクトを生み出す。それが visvim の根幹にある哲学です。
acumin-pro / 11px / 300 / line-height: normalBody Light
About visvim    Dissertation    Web Store
acumin-pro / 11px / 700 / line-height: normal / color #000000Nav
JAPAN    NORTH AMERICA    EUROPE    ASIA / OCEANIA
acumin-pro / 12px / 500 / line-height: 1.3 (15.6px) / letter-spacing: 0.36px (0.03em)Region Pill
visvim Official:   Instagram • X • Facebook
acumin-pro / 11px / 400 / line-height: normal / color #b7b7b7Footer Caption
#SS26   #OLD VISVIM NEVER DIES   #シルクに戻す   #Product Introspection
heisei-kaku-gothic-std / 8px / 500 / color #707070Tag Small
Dissertation
WMV VISVIM SANTA FE
Read
03 / products

Recent Release

SS 26 / 01
Footwear

FBT (RED DEER)

鹿革を使用したハンドメイドモカシン
SS 26 / 02
Outerwear

IRIS LINER JKT

天然染料で仕上げたライナージャケット
SS 26 / 03
Tops

JUMBO HOODIE P.O.

肉厚なスウェット素材のオーバーサイズフーディ
SS 26 / 04
Accessories

VEGGIE DYE TOTE BAG

草木染めのキャンバストートバッグ
04 / buttons

Buttons

Primary CTA (radius 18px)

Read
Read / Look / radius 18px
Web Store
Web Store / outline
Subscribe
Subscribe / dark / footer
subsequence.tv
Subsequence / #d2e3ea

Region Pill (radius 9999px)

JAPAN
pill / ls 0.36px
NORTH AMERICA
pill / ls 0.36px
EUROPE
pill / ls 0.36px
ASIA / OCEANIA
pill / ls 0.36px

Tag Buttons

Tag Large / 10px / #fafafa
Tag Large / border #e5e5e5
Tag Small / 8px / JP only
Tag Small / no border

Pagination

Active: #000 / Inactive: #e5e5e5 / radius 50%

Navigation

About visvim Dissertation Web Store

Drawer / Modal Background: #8b8b8b

Topics: Event, Information, Lookbook

Lookbook     Event     Information

EN

05 / forms

Newsletter

Default: border-bottom なし / font-size 14px / weight 300
Focus: border-bottom 1px solid #222222
Error: border-bottom 1px solid #c0392b
06 / elevation

Depth & Elevation

Level 0: flat (default)
Level 0: tag surface #fafafa
Level 1: drawer #8b8b8b
Level 2: footer CTA #222222

visvim は box-shadow を一切使わない。奥行きは背景色の明度差と余白のみで表現する。

07 / layout

Spacing & Width

Spacing Scale

8px
12px
16px
24px
32px
40px
64px
120px

Content Widths

Full Bleed Image 100vw
Content Section 1100px
Body Text 600px