SHIPS

1977 lorem ipsum dolor sit amet. "STYLISH STANDARD" lorem, lorem ipsum dolor sit amet consectetur adipiscing. lorem Roboto + lorem ipsum Medium lorem ipsum dolor, lorem ipsum dolor CTA lorem ipsum dolor sit amet.

lorem ipsum dolor More
01 / Colors

Color Palette

Brand
Brand Navy
#04345a
lorem CTA / lorem ipsum dolor
Brand Navy Dark
#003559
lorem ipsum / lorem ipsum dolor
Text
Text Primary
#000000
lorem ipsum dolor
Text Title
#333333
lorem ipsum dolor sit
Text Secondary
#666666
lorem / lorem ipsum dolor
Accent
Sale Red
#a50000
lorem ipsum / lorem
Highlight Yellow
#ffee00
lorem ipsum dolor“lorem”
Surface & Border
Background
#ffffff
lorem ipsum
Surface Light
#f8f8f8
lorem ipsum / lorem ipsum dolor
Surface Gray
#eeeeee
lorem ipsum dolor sit amet
Dot Active
#999999
lorem ipsum dolor sit
Footer
#666666
lorem ipsum dolor
02 / Typography

Typography Hierarchy

lorem Roboto lorem ipsum dolor, lorem ipsum dolor Medium lorem ipsum dolor. lorem ipsum weight 400 lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. letter-spacing / palt lorem ipsum.

PICK UP ITEMS
Display / 34px / 400 / line-height: 1.65lorem ipsum
lorem ipsum dolor sit amet
Section Heading / 28px / 400 / line-height: 1.46lorem ipsum dolor
SHIPS Original Collection
Brand Name (en) / 18px / 400 / line-height: 1.5lorem ipsum dolor
SHIPS lorem
Shop Name / 15px / 400 / line-height: 1.5lorem
lorem ipsum dolor sit amet BD lorem ipsum SHIPS lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. ABCabc 123
Content Body / 14px / 400 / line-height: 1.43lorem ipsum
lorem ipsum dolor SHIPS lorem ipsum dolor sit amet consectetur.
Body (base) / 12px / 400 / line-height: 1.5lorem ipsum dolor
2026.05.22 / NEWS
Sub Text / 12px / 400 / line-height: 1.67 / color: #666666lorem / lorem
MEN WOMEN KIDS OUTLET COORDINATE
Nav Links / 11px / 400 / line-height: 1.5lorem ipsum dolor
4.5 (128 reviews)
Rating / 16px / 700 / line-height: 1.5 (Roboto, lorem ipsum Bold)lorem ipsum dolor
03 / Product

Product Cards

NEW
SHIPS
lorem ipsum dolor BD lorem
¥15,400
★★★★☆ 4.2
SALE
SHIPS any
lorem ipsum dolor lorem ipsum dolor
¥9,240 ¥13,200
SHIPS KIDS
lorem ipsum lorem ipsum T lorem
¥4,950
SHIPS
lorem ipsum dolor lorem ipsum dolor lorem ipsum
¥35,200
★★★★★ 4.8
04 / Article

Editorial Sample

lorem ipsum dolor sit amet consectetur

2026.05.22 / FEATURE

SHIPS lorem ipsum“STYLISH STANDARD”. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor“lorem ipsum dolor”lorem“lorem”lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur SHIPS lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed.

lorem ipsum dolor
05 / Buttons

Button Variations

lorem ipsum dolor
Primary CTA (pill)
More
Secondary (outline)
Close Modal
Page Top
Carousel Arrow
Carousel Indicators
Badges
SALE lorem 3 Cart / Wishlist
06 / Cards

Card Components

2026 SPRING / SUMMER

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

View Collection →

SHIPS COORDINATE

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

View All →

SHIPS OUTLET

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

Shop Now →
07 / Forms

Form Elements

Default --- border: #eeeeee, radius: 0px
Focus --- border: #04345a (Brand Navy)
lorem ipsum dolor
Error --- border: #a50000 (Sale Red)
08 / Elevation

Depth & Elevation

SHIPS lorem ipsum dolor sit amet. lorem ipsum dolor(#fff / #f8f8f8)lorem ipsum dolor sit.

Level 0 --- Flat
lorem, lorem ipsum dolor
Level 1
lorem ipsum dolor
Level 2
lorem ipsum / lorem ipsum dolor
Focus Ring
#04345a (Brand Navy)
09 / Layout

Layout & Spacing

lorem ipsum dolor 3-4 lorem. lorem ipsum dolor sit amet consectetur. lorem ipsum 16-24px lorem ipsum dolor sit amet consectetur.

Container Max Width 1200px
Article Content 640px
4-column product grid (gap: 20px)