Design System PreviewShimano — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet, PT Sans lorem ipsum dolor, lorem ipsum dolor sit amet, line-height: 1.9 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. computed style lorem ipsum dolor.

lorem ipsum DESIGN.md lorem

01 / Colors

lorem ipsum dolor

Shimano Blue (Brand)

Shimano Blue

#00a1e9

--color-shimano-blue

Blue Link

#0093d7

--color-shimano-blue-link

Blue Light

#32bfea

--color-shimano-blue-light

Blue Banner

#04a6e1

--color-shimano-blue-banner

Dark & Accent

Dark

#393e40

--color-dark

Dark Navy

#274558

--color-dark-navy

Green Accent

#468254

--color-green

Text

Text Primary

#4f4f4f

--color-text-primary

Text Nav

#727272

--color-text-nav

Text White

#f3f3f3

--color-text-white

Surface & Background

Page BG

#f3f4f5

--color-bg (lorem ipsum dolor)

Section BG

#e3e4e5

--color-bg-section

White

#ffffff

--color-bg-white

Dark BG

#292929

--color-bg-dark

Border & Category

Border

#cdcdcd

--color-border

Category Badge

#727272

--color-category

02 / Typography — lorem

lorem ipsum dolor sit

PT Sans English Accent — Precision Engineering

PT Sans / 18px / Regular / letter-spacing: 0.3px / color: #00a1e9lorem ipsum dolor

lorem ipsum dolor sit — Nav Mega Menu Title

24px / Regular / line-height: 1.9 / letter-spacing: 0.05emlorem ipsum dolor

lorem ipsum dolor — Section Heading (h2)

22px / Bold / line-height: 1.55 / letter-spacing: 0.05em / color: #393e40lorem ipsum

lorem ipsum dolor sit — Subsection (h3)

17px / Bold / line-height: 1.55 / letter-spacing: 0.05emlorem ipsum dolor

lorem ipsum dolor — lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet consectetur adipiscing elit sed. line-height: 1.9 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. ABCabc 123

16px / Regular / line-height: 1.9 / letter-spacing: 0.05em / palt: loremlorem

lorem ipsum dolor sit — Company page body (14px)

14px / Regular / line-height: 1.8 / letter-spacing: 0.05emlorem ipsum dolor

lorem ipsum dolor sit — 13px / Nav item text

13px / Regular / line-height: 1.5 / letter-spacing: 0.05emlorem ipsum dolor

SECTION LABEL — 12PX PT SANS UPPERCASE

PT Sans / 12px / uppercase / letter-spacing: 0.1emlorem ipsum dolor

03 / Article — lorem ipsum dolor sit

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit 1/100mm lorem ipsum dolor. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum 1921 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit, lorem ipsum dolor 3 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit.

Precision Cold Forging Technology

DURA-ACE lorem ipsum

lorem ipsum dolor sit amet consectetur DURA-ACE lorem, lorem ipsum dolor sit amet consectetur adipiscing elit. 12 lorem ipsum dolor sit Di2 lorem, lorem ipsum dolor sit amet consectetur 0.001 lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.

05 / Cards

lorem ipsum dolor sit

News Cards (white bg, category badge)

PRODUCT IMAGE

CYCLING

DURA-ACE R9200 lorem ipsum

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

lorem ipsum →

PRODUCT IMAGE

FISHING

STELLA lorem ipsum

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

lorem ipsum →

PRODUCT IMAGE

ROWING

lorem ipsum dolor sit amet

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

lorem ipsum →

Business Cards (dark bg, radius: 0)

BUSINESS IMAGE

lorem ipsum dolor

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

BUSINESS IMAGE

lorem ipsum

lorem, lorem, lorem. lorem ipsum dolor sit, lorem ipsum dolor.

BUSINESS IMAGE

lorem ipsum dolor sit amet

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

07 / Elevation

Depth & Elevation

Level 0: Flat

lorem + border: #cdcdcd. lorem ipsum dolor sit. lorem ipsum dolor sit

Level 1: Hover

0 2px 6px rgba(0,0,0,0.08)

Level 2: Card Lift

0 4px 16px rgba(0,0,0,0.12)

Brand Surface

Shimano Blue lorem ipsum. lorem / CTA lorem ipsum

Dark Navy Section

lorem ipsum dolor sit amet (#274558)

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet #393e40 lorem, lorem ipsum dolor sit amet consectetur #274558 lorem 2 lorem ipsum dolor. lorem ipsum #f3f3f3 lorem, lorem #ffffff lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit sed.

Precision Performance Reliability