Design System

UNITED ARROWS Ltd. — Corporate Site

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

Font substitution: lorem ipsum BBB / lorem MB31 → Zen Kaku Gothic New  |  classico-urw → Cormorant Garamond  |  Manrope: native
01 / Colors

Color Palette

Brand / Accent
Terracotta
#b2542b
lorem ipsum dolor sit / lorem ipsum
Accent Blue
#2c7ab9
lorem / lorem ipsum
Text
Text Primary
#000000
lorem ipsum dolor
Text Secondary
#6f6f6f
lorem / lorem ipsum dolor
Text White
#ffffff
lorem ipsum / lorem ipsum dolor
Background / Surface
Page Background
#eeebea
lorem ipsum(lorem ipsum dolor sit amet)
Surface
#f2f1f0
lorem ipsum / lorem ipsum
Surface Mid
#e6e6e6
lorem / lorem
Card Surface
#ffffff
lorem ipsum
Border
#d0d0d0
lorem ipsum
Footer
#404040
lorem ipsum dolor
Semantic
Error
#c53030
lorem / lorem ipsum dolor
Focus
#2c7ab9
lorem ipsum dolor
02 / Typography

Typography Hierarchy

Display Gothic
Zen Kaku Gothic New / 60px / 700 / line-height: 1.2 / letter-spacing: 0.02emH2 Hero (lorem MB31)
lorem ipsum dolor
Zen Kaku Gothic New / 50px / 500 / line-height: 0.9 / letter-spacing: -0.03emH2 Section
Editorial Serif Title
Cormorant Garamond / 40px / 400 / line-height: 1.2 / letter-spacing: -0.03emH3 English (classico-urw)
lorem ipsum dolor — Notice Heading
Zen Kaku Gothic New / 16px / 500 / line-height: 1.5 / letter-spacing: 0.02emH3 Notice
lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet.
Zen Kaku Gothic New / 26px / 500 / line-height: 1.85 / letter-spacing: 0.02emBody Lead
lorem ipsum dolor — lorem ipsum dolor sit amet, lorem / lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. font-feature-settings lorem normal(palt lorem). ABCabc 123
Zen Kaku Gothic New / 16px / 500 / line-height: 1.875 / letter-spacing: 0.02em / palt: loremBody
STYLING FEATURE NEWS
Zen Kaku Gothic New / 12px / 500 / letter-spacing: 0.03em / bg: #f2f1f0 / radius: 2pxTag
2024.12.15
Manrope / 14px / 400 / color: #6f6f6fDate (large)
2024.12.15
Manrope / 10px / 500 / color: #6f6f6fDate (small)
lorem ipsum dolor sit amet
Zen Kaku Gothic New / 12px / 500 / color: #ffffff / bg: #404040Footer Nav
UNITED ARROWS — 1,234,567
Cormorant Garamond / lorem ipsum + lorem ipsum
03 / Article — Fashion Editorial

Editorial Sample

2024.12.15

lorem ipsum dolor

The Art of Material

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

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

lorem ipsum

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

Craftsmanship in Detail

The beauty lies not in decoration, but in the quiet confidence of well-chosen materials and precise construction. Each stitch, each seam speaks to a standard that values longevity over trend.

lorem ipsum

2025 lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor“lorem ipsum dolor”. lorem ipsum dolor sit amet consectetur adipiscing.

STYLING FEATURE CRAFTSMANSHIP
04 / Buttons

Button Variations

UNITED ARROWS lorem ipsum dolor sit amet consectetur CTA lorem ipsum, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing.

STYLING
Tag (default)
FEATURE
Tag (default)
NEWS
Tag (default)
NEW
Tag (accent)
VIEW MORE
Outline (dark)
PRIVACY POLICY
Footer link
Tag Spec
bg: #f2f1f0 / radius: 2px / padding: 2px 8px / font: 12px 500 / letter-spacing: 0.03em
05 / Cards

Card Components

Image
2024.12.15

2025 lorem ipsum dolor sit lorem ipsum dolor

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

FEATURE STYLING
Image
2024.11.28

lorem ipsum dolor: lorem ipsum dolor sit

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

CRAFTSMANSHIP
Image
2024.11.10

lorem ipsum dolor sit amet 2024 lorem

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

NEWS
06 / Forms

Form Elements

Default — border: #d0d0d0, radius: 0
Focus — border: #2c7ab9
lorem ipsum dolor sit amet consectetur adipiscing
Error — border: #c53030
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem / lorem ipsum dolor
Elevation 1
lorem / lorem
Elevation 2
lorem / lorem ipsum dolor
Elevation 3
lorem ipsum / lorem ipsum dolor
Focus Ring
#2c7ab9 + box-shadow
08 / Layout

Content Widths

Max Content 1200px
Main Content 960px
Article Body 640px
Form Max Width 420px
Key Characteristics
• lorem ipsum dolor sit amet consectetur#eeebea — lorem ipsum
• 3 lorem ipsum dolor: lorem ipsum(lorem)/ lorem ipsum dolor sit(lorem)/ lorem ipsum / lorem ipsum
• lorem ipsum dolor sit letter-spacing-0.03em
• font-feature-settings: normal(palt lorem)
• lorem ipsum dolor sit#b2542b lorem ipsum dolor / lorem ipsum dolor sit
• CTA lorem ipsum dolor sit amet(radius: 2px)— lorem ipsum dolor sit amet consectetur