Design System Preview: Wacom(lorem)

1 — Colors

White (Background)

#ffffff

Surface Gray

#f3f6f7

Wacom Cyan

#0097d4

Wacom Blue

#0013c8

CTA Blue

#00a3e0

Store Green

#96be0f

Accept Green

#84bd00

Support Blue

#1f73b7

Black (Text)

#000000

Nav Text

#383c42

Sub Gray

#808285

Default Button

#adafb4

Promo Colors

Promo Pink

#ffe3e5

Promo Yellow

#ffdb00

Promo Green

#b5dfad

2 — Typography

H1 — Roboto 45px / Weight 300 / Line Height 1.3

lorem ipsum dolor sit amet

H2 — Roboto 35px / Weight 300 / Line Height 1.2

lorem ipsum, lorem ipsum dolor

H2 (Blue) — Roboto 35px / Weight 300 / Line Height 1.2 / #0013c8

Draw BEYOND.

H3 — Roboto 26px / Weight 300 / Line Height 1.3

lorem ipsum, lorem ipsum dolor sit.

H4 Product — Roboto 20px / Weight 300 / Line Height 1.3

Wacom Intuos Pro (2025)

Body — 18px / Weight 400 / Line Height 1.7

lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum dolor, 3D lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

Body (Product) — 16px / Weight 400 / Line Height 1.7

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing Wacom Pro Pen 3 lorem.

Nav Item — 15px / Weight 400 / Line Height 1.33 / Letter Spacing 0.08em

Discover Products Solutions Support

Footer — 11.2px / Weight 400 / Line Height 1.43

Copyright — 13.5px / Weight 400 / Line Height 1.7

3 — Product Article

lorem ipsum dolor sit amet consectetur adipiscing

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor / lorem, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

lorem ipsum, lorem ipsum dolor sit

Wacom Cintiq Pro 27

lorem ipsum dolor Wacom Pro Pen 3 lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet.lorem ipsum dolor　lorem

Promo Sections

4 — Buttons

lorem ipsum dolor → lorem →

Product Tabs

5 — Cards

Wacom Cintiq Pro 27

lorem ipsum dolor sit amet consectetur adipiscing. 4K lorem ipsum dolor sit.

lorem lorem

Wacom Intuos Pro

Wacom Intuos Pro (2025)

lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.

lorem lorem

One by Wacom

lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet.

lorem lorem

6 — Forms

Default

Focus

Error

lorem ipsum dolor sit amet

7 — Elevation

Level 0 — Flat

Level 1 — Tab Shadow

Surface Gray

8 — Layout

Hero Carousel

Product Card 1

Product Card 2

Product Card 3

Alternate Section — #f3f6f7