Design System PreviewYonex --- Japanese Edition

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. Oswald + BIZ UDGothic lorem ipsum dolor sit amet consectetur, lorem CTA lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit, Yonex lorem ipsum dolor sit / lorem ipsum dolor sit. computed style lorem ipsum dolor.

All News Learn More
01 / Colors

Colors

Brand Blue (Yonex Blue)
Yonex Blue
#0061b1
--color-main
Blue Dark
#00215d
--color-main-70
Blue Light
#579fee
--color-main-30
Blue Pale
#f1f4f9
--color-main-10
Secondary (Green)
Green
#036a03
--color-sub-50
Green Light
#4ebe5e
--color-sub-40
Text & Dark
Black
#000000
lorem ipsum dolor
Dark
#1f2427
CTA lorem / lorem
Charcoal
#444444
lorem ipsum dolor
Inactive
#b5b5b5
lorem ipsum dolor
Text (on Dark)
White
White
#ffffff
lorem ipsum / lorem ipsum dolor
Inactive
Inactive on Dark
#b5b5b5
lorem ipsum dolor sit amet
Surface & Background
White
#ffffff
lorem ipsum
Section Gray
#f6f6f6
lorem ipsum dolor
Hero Black
#000000
lorem ipsum dolor
Border
Border
#e8e8e8
lorem ipsum / lorem
Border Input
#b5b5b5
lorem / lorem ipsum dolor
02 / Typography --- Dual Font System

Typography

Section Title --- Oswald
Oswald / 56px / weight: 400 / line-height: 1.5 / letter-spacing: 0.1emlorem ipsum dolor
Sub Heading --- Oswald 28px
Oswald / 28px / weight: 400 / line-height: 1.4 / letter-spacing: 0.1emlorem ipsum
NAV LINK --- OSWALD BOLD INACTIVE
Oswald / 16px / weight: 700 / color: #b5b5b5 (inactive)lorem ipsum dolor
lorem ipsum dolor --- BIZ UDGothic Bold
BIZ UDGothic / 16px / weight: 700 / color: #1f2427lorem ipsum dolor
lorem ipsum dolor --- lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet, lorem, lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed. ABCabc 123
BIZ UDGothic / 16px / weight: 400 / line-height: 1.6 / font-feature-settings: normallorem
Footer Accordion --- Oswald Medium
Oswald / 18px / weight: 500 / color: #b5b5b5lorem ipsum
CTA LABEL --- ALL NEWS / LEARN MORE
Oswald / 14px / weight: 700 / letter-spacing: 0.05em --- CTA lorem ipsum dolorCTA
lorem ipsum dolor lorem lorem
BIZ UDGothic / 12px / weight: 400 / bg: #ffffff / border: 1px solid #e8e8e8 / padding: 0 8pxlorem ipsum
03 / Article --- Sports Equipment Content

Article

Next Generation Racquet Technology

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

lorem ipsum dolor 1946 lorem ipsum dolor, lorem ipsum dolor, lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit(lorem ipsum dolor sit)lorem ipsum dolor, lorem ipsum dolor sit amet consectetur 7%lorem. lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing elit sed, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet 400 lorem ipsum dolor sit amet consectetur adipiscing elit.

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

04 / Buttons --- Square CTA vs Pill Search

Buttons

Square CTA (radius: 0, border: 2px)
All News
Primary Dark
Learn More
Outline Dark
View Products
Yonex Blue
All News
Primary Light (on dark)
Learn More
Outline Light (on dark)
Pill Search (radius: 30px) --- CTA lorem ipsum dolor sit amet
Search
Search Pill
Search Input (pill)
Tag Badge
lorem ipsum dolor
Tag Badge
lorem
Tag Badge
lorem
Tag Badge
lorem ipsum dolor
Tag Badge
05 / Cards

Cards

Product Cards (white bg)
RACQUET IMAGE

ASTROX 100 ZZ

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

lorem ipsum dolorlorem
Learn More
RACQUET IMAGE

EZONE 98 lorem ipsum dolor

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

loremlorem ipsum dolor
Learn More
CLUB IMAGE

EZONE GT lorem ipsum

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

loremlorem
Learn More
Dark Cards (hero style)
ATHLETE IMAGE

Team Yonex --- Badminton

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

All News
ATHLETE IMAGE

Team Yonex --- Tennis

lorem ipsum dolor sit amet consectetur adipiscing elit sed.

All News
ATHLETE IMAGE

Team Yonex --- Golf

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

All News
06 / Forms --- Square Input + Pill Search

Forms

Standard Input (radius: 0)
lorem ipsum --- border: #b5b5b5, radius: 0px
lorem ipsum --- border: #0061b1 (Yonex Blue)
lorem ipsum dolor sit amet consectetur
Search Input (radius: 30px --- pill)
lorem ipsum dolor --- border: #b5b5b5, radius: 30px, weight: 500
lorem ipsum dolor --- border: #0061b1, radius: 30px
07 / Elevation

Elevation

Level 0: Flat
lorem. Yonex lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing
Border Emphasis
border: 2px solid #1f2427 --- CTA lorem ipsum dolor sit amet consectetur
Surface Tint
#f1f4f9 --- Yonex Blue Pale lorem ipsum dolor sit amet consectetur
Dark Surface
#000000 --- lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur
Dark Section

Dark Section (#000000)

Yonex lorem ipsum dolor sit amet consectetur adipiscing, lorem #000000 lorem ipsum dolor #ffffff lorem ipsum dolor. Oswald lorem letter-spacing: 0.1em lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing. CTA lorem ipsum dolor sit("All News", "Learn More")lorem ipsum dolor sit.

All News
Learn More
08 / Layout

Layout

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