design system preview

The thoughts we have at visvim

visvim(visvim.tv)lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum(10–12px)+ weight 300 Light + pill CTA(radius 18px)+ lorem ipsum dolor sit. Adobe Fonts lorem acumin-pro + heisei-kaku-gothic-std lorem Inter + Noto Sans JP lorem. computed style lorem ipsum dolor.

Read Web Store
01 / colors

Color Palette

brand / foreground
Charcoal
#222222
lorem ipsum dolor
Pure Black
#000000
lorem / lorem
Muted Gray
#b7b7b7
lorem ipsum / lorem ipsum
Button Gray
#707070
lorem ipsum / lorem ipsum
surface
White
#ffffff
lorem ipsum / CTA lorem
Tag Background
#fafafa
lorem / lorem ipsum dolor
Footer Dark
#222222
Subscribe lorem ipsum
Overlay Gray
#8b8b8b
lorem ipsum / lorem ipsum dolor
accent
Subsequence Blue
#d2e3ea
lorem ipsum dolor(lorem ipsum)
border
Thin Border
#707070
CTA lorem ipsum
Tag Border
#e5e5e5
lorem / lorem ipsum dolor
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
lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. visvim lorem ipsum dolor sit amet consectetur.
acumin-pro / 12px / 500 / line-height: normalBody Medium
lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet consectetur adipiscing. lorem visvim lorem ipsum dolor sit.
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   #lorem ipsum dolor   #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)

lorem ipsum dolor sit amet consectetur
SS 26 / 02
Outerwear

IRIS LINER JKT

lorem ipsum dolor sit amet consectetur
SS 26 / 03
Tops

JUMBO HOODIE P.O.

lorem ipsum dolor sit amet consectetur adipiscing
SS 26 / 04
Accessories

VEGGIE DYE TOTE BAG

lorem ipsum dolor sit amet consectetur
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 lorem / 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 lorem box-shadow lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing.

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