Design System Preview
BAYCREW'S STORE

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.

01 / Colors

lorem ipsum dolor

Brand Accent
Accent Cyan
#00a6dd
lorem ipsum dolor / lorem
Monochrome Scale
Black
#000000
lorem / lorem
Dark Gray
#333333
lorem ipsum / lorem
Footer Text
#555555
lorem ipsum dolor
Sub Text
#666666
lorem / lorem ipsum
Muted
#999999
lorem / lorem ipsum dolor
Border
#cccccc
lorem ipsum / lorem
Surface Footer
#f0f0f0
lorem ipsum dolor
White
#ffffff
lorem ipsum
Semantic(lorem ipsum)
Danger / Sale
#cc0000
lorem / lorem
Success
#2d8c3c
lorem ipsum / lorem
Warning
#cc8800
lorem ipsum
02 / Typography — lorem

lorem ipsum dolor sit

BAYCREW'S STORE — Logo / h1
18px / 400 / line-height: 1.5 / letter-spacing: 0.15emlorem / h1
RANKING — Section Heading EN (h2)
18px / 400 / line-height: 2.39lorem ipsum dolor sit
lorem ipsum dolor — lorem ipsum dolor sit amet (h2)
16px / 400 / line-height: 1.375 / letter-spacing: 1.2px (0.075em)lorem ipsum dolor
WOMEN / MEN — Gender Navigation
14px / 400 / line-height: 2.0 / active: #00a6dd, inactive: #999lorem ipsum
lorem ipsum dolor — 12px lorem ipsum dolor sit amet consectetur. weight 400 lorem ipsum dolor Pro lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. palt lorem letter-spacing lorem ipsum dolor sit amet consectetur.
12px / 400 / line-height: 1.83 / letter-spacing: normal / palt: loremlorem
lorem ipsum dolor — Footer Body (14px)
14px / 400 / line-height: 1.57 / color: #555lorem ipsum
lorem ipsum dolor sit amet consectetur — Info Link
12px / 400 / line-height: 1.83 / color: #00a6ddlorem ipsum
2026.06.10 — Date / Muted Text
12px / 400 / line-height: 1.83 / color: #999lorem
PICK UP / RECOMMEND — Recommendation Label
10px / 400 / line-height: 1.0 / color: #666lorem ipsum dolor
Copyright © BAYCREW'S CO.,LTD. ALL RIGHTS RESERVED.
10px / 400 / line-height: 2.2 / color: #555lorem ipsum dolor
1
Arial 10.2px / 700 — lorem ipsum dolor bold loremlorem ipsum dolor
03 / Article — lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet

2026 Summer Collection — lorem ipsum dolor

2026.06.10

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. JOURNAL STANDARD lorem IENA lorem ipsum dolor sit, lorem ipsum dolor sit amet.

lorem ipsum dolor sit amet

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

lorem ipsum dolor

04 / Buttons

lorem / lorem ipsum dolor sit

Buttons
Search Submit
Footer Link
Danger(lorem)
Gender Toggle
Active
Inactive
Pager Dots
1
Active
2
Inactive
3
Inactive
4
Inactive
5
Inactive
05 / Cards — lorem ipsum

lorem ipsum dolor

IMAGE
3:4
JOURNAL STANDARD
lorem ipsum dolor lorem ipsum dolor sit
¥14,300
IMAGE
3:4
IENA
lorem ipsum dolor lorem ipsum dolor sit
¥18,700
IMAGE
3:4
Deuxieme Classe
lorem ipsum dolor lorem ipsum dolor sit
¥23,100¥33,000
IMAGE
3:4
EDIFICE
SOLOTEX lorem ipsum lorem ipsum dolor
¥16,500
06 / Forms

lorem ipsum dolor

Search Input + Button
lorem ipsum — border: #cccccc, radius: 0px, height: 28px
Input States
lorem ipsum — border: #cccccc
lorem ipsum — border: #00a6dd
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #cc0000
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem(lorem)
Level 1
lorem ipsum dolor
Level 2
lorem ipsum dolor
Level 3
lorem ipsum
08 / Layout

lorem ipsum dolor / lorem ipsum

Spacing Scale
4px
8px
16px
24px
32px
48px
Content Widths
Main Container 960px
Article Content 620px
Product Grid (4col) 960px
Grid
1
2
3
4
4-column grid / gap: 16px — lorem ipsum dolor sit