Design System Preview
Audio-Technica

lorem ipsum dolor sit — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. computed style lorem ipsum dolor.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand & CTA
Black
#000000
lorem ipsum dolor, lorem ipsum
Gold
#daa521
lorem ipsum CTA
Promo Gold
#cc9900
lorem ipsum dolor sit
Info Blue
#0478c1
Cookie lorem ipsum
Text
Text Primary
#000000
lorem ipsum dolor(lorem ipsum)
Text Secondary
#616161
lorem ipsum dolor
Text Footer
#ffffff
lorem ipsum dolor sit
Surface & Background
Background
#ffffff
lorem ipsum
Card Surface
#f0f0f0
lorem ipsum dolor
Section
#eaeaea
lorem ipsum dolor
Campaign
#efefef
lorem ipsum dolor
Footer Dark
#404040
lorem ipsum dolor
UI Elements
Border
#bfbfbf
lorem ipsum / lorem ipsum
Border Light
#dddddd
lorem ipsum / Swiper lorem ipsum dolor
Swiper Active
#777777
lorem ipsum lorem ipsum dolor
Cookie Reject
#e9e7e8
lorem ipsum dolor
Product Color Swatches
Teal
#008080
lorem ipsum
Warm Brown
#be8f68
lorem ipsum
Peru
#cd853f
lorem ipsum dolor sit amet
02 / Typography

lorem ipsum dolor sit

Display English — UniversNextPro-Cond
25px / 400 / line-height: 1.5 / letter-spacing: 0.01em / UniversNextPro-Condlorem ipsum dolor
Online Limited — English Label
16px / 700 / line-height: 1.0 / UniversNextPro-Condlorem ipsum
lorem ipsum dolor — Section Title (h2)
15px / 700 / line-height: 1.0 / FP-HiraKakuProN-W6lorem ipsum dolor
lorem ipsum dolor — Content Title (h3)
16px / 700 / line-height: 1.5 / FP-HiraKakuProN-W6lorem
lorem ipsum / lorem ipsum dolor — Navi Title (h3)
16px / 700 / line-height: 1.8 / FP-HiraKakuProN-W6lorem ipsum dolor
lorem ipsum dolor　lorem ipsum dolor　lorem ipsum — Nav Label
13px / 400 / line-height: 1.0 / letter-spacing: 0.2em / FP-lorem ipsum dolor ProN W6lorem ipsum
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur adipiscing elit sed do. lorem ipsum dolor sit amet consectetur adipiscing elit sed.
14px / 400 / line-height: 1.5 / letter-spacing: normal / FP-HiraKakuProN-W3lorem ipsum
lorem ipsum dolor — 12px / letter-spacing: 0.05em
12px / 400 / line-height: 1.0 / letter-spacing: 0.05em / FP-HiraKakuProN-W3lorem ipsum
03 / Product

lorem ipsum dolor sit amet

ATH-M50x Professional Monitor Headphones

lorem ipsum

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor, lorem ipsum, DJ, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum

45mm lorem ipsum dolor sit amet consectetur adipiscing. 90 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.

Connect with Audio-Technica — Engineered for precision and crafted with care, delivering studio-quality sound for professionals and enthusiasts alike.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA (Gold)
radius: 4px, padding: 12px 50px
TOP lorem
Secondary (Outline)
radius: 0px, letter-spacing: 0.1em
lorem ipsum
Cookie Accept (Blue)
radius: 0px
lorem ipsum
Cookie Reject (Gray)
radius: 0px
Swiper Pagination
Active: #777777 / Inactive: #dddddd / radius: 2px / 20px x 3px
05 / Cards

lorem ipsum dolor sit

lorem ipsum (Product Card)
Product Image

ATH-M50x

lorem ipsum dolor sit amet consectetur

¥22,000
Product Image

AT2040 CWH

lorem ipsum dolor sit amet lorem ipsum dolor sit amet

¥16,500
Product Imagelorem ipsum dolor sit

AT33xMLB

MC lorem ipsum dolor sit amet

¥55,000
Product Image

ATH-CKS50TW2

lorem ipsum dolor sit amet SOLID BASS

¥19,800
lorem ipsum (Navi Card)
Headphone Earphone Navi
lorem ipsum / lorem ipsum dolor
Listening Record Navi
lorem ipsum dolor
Microphone Navi
lorem ipsum dolor
lorem ipsum dolor sit (Color Swatches)
radius: 50% (lorem: lorem ipsum dolor sit amet) / border: 2px solid #bfbfbf
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #bfbfbf, radius: 0px, font: Arial 14px
lorem ipsum — border: #000000 (black)
lorem ipsum dolor sit amet consectetur adipiscing.
lorem — border: #cc0000
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum dolor sit amet consectetur
Surface: Card
lorem #f0f0f0 lorem ipsum dolor
Surface: Section
lorem #eaeaea lorem ipsum dolor
Surface: Footer
lorem #404040 lorem ipsum dolor
box-shadow lorem ipsum. lorem ipsum dolor depth lorem: #ffffff > #f0f0f0 > #eaeaea > #404040
08 / Layout

lorem ipsum & lorem ipsum dolor

Spacing Scale
8
10
16
20
40
55
60
Content Widths
Product Carousel (Full Width) 1440px
Content Area 1000px
Product Description 700px