Design System Preview
Bridgestone — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur BridgestoneTypeTP, heading weight 400, pill lorem ipsum dolor(radius 40px), lorem ipsum line-height 1.64 lorem, lorem ipsum dolor sit amet consectetur adipiscing. computed style lorem ipsum dolor.

TOPICS lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Bridgestone Red
#e4002b
--color-bridgestone-red(lorem / lorem ipsum dolor)
RSS Orange
#f08a34
--color-rss
Text
Text Body
#000000
--color-text-body
Text Primary
#333333
--color-text-primary(lorem)
Text Secondary
#3c3c3c
--color-text-secondary(lorem)
Text Sub
#999999
--color-text-sub(lorem)
Surface & Background
Page Background
#ffffff
--color-bg
Hero BG
#ececec
--color-bg-hero
Section BG
#f5f5f5
--color-bg-section
Nav Dropdown
#eeeeee
--color-bg-nav-dropdown
Footer BG
#222222
--color-bg-footer
Frosted Glass & Overlay
backdrop-filter: blur
Frosted Nav
rgba(255,255,255,0.95)
--color-bg-overlay
Component
Category Badge
#757575
--color-category
Border
Border Default
#d1d1d1
--color-border(lorem ipsum dolor)
Border Button
#808080
--color-border-button
Border Input
#707070
--color-border-input
02 / Typography — lorem

lorem ipsum dolor sit

TOPICS — lorem ipsum dolor sit
42px / weight 400 / line-height: 1.64 / font-feature-settings: normallorem ipsum h2
lorem ipsum dolor — lorem ipsum
30px / weight 400 / line-height: 2.0lorem h2
lorem ipsum dolor sit — Mega Menu Heading
20px / weight 600 / radius: 40px(pill lorem ipsum dolor sit)lorem ipsum dolor
lorem ipsum dolor sit — Product Title on Dark
18px / weight 600 / line-height: 27px / letter-spacing: -0.6pxlorem ipsum dolor
lorem ipsum dolor sit — Nav Primary (14px, 600)
14px / weight 600 / line-height: 1.3lorem ipsum dolor
lorem ipsum — Nav Secondary (13px, 600)
13px / weight 600lorem ipsum
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur / lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. lorem ipsum line-height: 1.64 lorem palt lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit. ABCabc 123
14px / weight 400 / line-height: 1.64 / palt: lorem ipsumlorem
lorem ipsum dolor — Product Sub (12px, #999999)
12px / weight 400 / color: --color-text-sublorem ipsum dolor
2026.05.22 — lorem ipsum dolor (10px, #3c3c3c)
10px / weight 400 / color: --color-text-secondarylorem
lorem ipsum dolor
12px / weight 400 / bg: #757575 / text: #ffffff / padding: 3px 5px / radius: 0lorem ipsum dolor
03 / Article — lorem / lorem ipsum dolor sit

lorem ipsum dolor sit amet

lorem ipsum dolor 2026.05.22

lorem ipsum dolor sit amet consectetur

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

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

lorem ipsum dolor sit amet consectetur

2050 lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit. EV(lorem ipsum)lorem ipsum dolor sit amet consectetur adipiscing.

font-feature-settings: normal(palt lorem ipsum)lorem, lorem ipsum dolor BridgestoneTypeTP lorem ipsum dolor sit amet consectetur. lorem ipsum weight 400 lorem, lorem ipsum dolor sit amet consectetur adipiscing.

04 / Buttons — pill (40px) + outline (0px)

lorem ipsum dolor sit

Mega Menu Pill (radius: 40px, weight: 600)
lorem
Mega Menu Pill (20px)
lorem ipsum dolor sit amet
Mega Menu Pill
lorem ipsum dolor
Sub Pill (14px)
Outline Buttons (radius: 0px)
TOPICS lorem ipsum
Outline CTA
lorem ipsum dolor
Accent Red(lorem ipsum)
Badges & Dropdown
lorem ipsum dolor
Category Badge
lorem ipsum
Category Badge
lorem ▾
Dropdown
English
Outline Light (on dark)
05 / Cards

lorem ipsum dolor sit

Product Cards
TIRE IMAGE

POTENZA RE-71RS

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

lorem ipsum dolor
lorem ipsum
TIRE IMAGE

BLIZZAK VRX3

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

lorem ipsum dolor sit
lorem ipsum
TIRE IMAGE

ECOPIA EP150

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

lorem ipsum
lorem ipsum
News List Cards
2026.05.22 lorem ipsum dolor lorem ipsum dolor, lorem ipsum dolor sit amet consectetur
2026.05.15 lorem ipsum 2026 lorem lorem ipsum dolor sit amet consectetur
2026.04.28 lorem ipsum dolor lorem ipsum dolor sit amet consectetur adipiscing
06 / Forms — radius: 0px

lorem ipsum dolor

lorem ipsum — border: #707070, radius: 0px
lorem ipsum — border: #000000
lorem ipsum dolor sit amet consectetur
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing
Surface: Hero BG
#ececec — lorem ipsum dolor sit amet. shadow lorem ipsum dolor sit amet consectetur
Surface: Section BG
#f5f5f5 — lorem ipsum dolor sit amet consectetur
Frosted Glass Nav
rgba(255,255,255,0.95) + backdrop-filter: blur()
Dark Section

lorem ipsum dolor (#222222)

lorem ipsum dolor sit amet consectetur, lorem #222222 lorem ipsum dolor sit. lorem ipsum dolor #e4002b lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem(box-shadow)lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.

POTENZA RE-71RS lorem ipsum dolor
English
Language selector on dark bg
08 / Layout

lorem ipsum dolor sit

4-Column Grid (Product Gallery)
1
2
3
4
3-Column Grid
1
2
3
2-Column Grid
1
2
Spacing Scale
4px
8px
16px
24px
40px
80px