Design System Preview
pocarisweat.jp

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor“lorem ipsum dolor”lorem ipsum dolor, 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
Pocari Blue
#015db2
lorem ipsum dolor / lorem / lorem
Pocari Blue Dark
#004a8f
lorem / lorem ipsum
Pocari Blue Light
#e8f2fb
lorem ipsum dolor
Text
Text Primary
#42515a
lorem ipsum dolor(lorem ipsum dolor)
Text Nav
#606d75
lorem ipsum dolor
Text Heading
#333d45
lorem ipsum dolor
Text Link
#015db2
lorem ipsum dolor
Surface & Background
Background
#ffffff
lorem ipsum
Surface Light
#f6f8f9
lorem ipsum dolor
Footer
#ebebeb
lorem ipsum dolor
Border
#e0e4e7
lorem ipsum
Overlay
Dark Navy
rgba(5,33,92,0.8)
lorem ipsum dolor sit amet
Frosted Glass
rgba(255,255,255,0.4~0.8)
lorem ipsum dolor sit
Semantic
Danger
#cc0000
lorem / lorem
Success
#2e8b57
lorem / lorem
01.5 / Frosted Glass

lorem ipsum dolor sit lorem ipsum dolor

0.4 alpha
Frosted Light
0.5 alpha
Frosted Medium
0.8 alpha
Frosted Strong

lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore.
lorem(box-shadow)lorem ipsum dolor sit amet consectetur adipiscing elit sed.

02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor, lorem ipsum dolor sit — Display Heading
24px / 700 / line-height: 1.4 / letter-spacing: normallorem ipsum dolor
lorem ipsum — Heading 2
20px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum dolor
lorem ipsum — Heading 3
16px / 700 / line-height: 1.5 / letter-spacing: normallorem ipsum
lorem ipsum dolor — lorem ipsum dolor, lorem ipsum dolor sit amet consectetur(lorem)lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. ABCabc 123
14px / 400 / line-height: 1.8 / letter-spacing: normallorem
lorem ipsum dolor / lorem ipsum dolor — Navigation Text (13px)
13px / 400 / line-height: 1.5 / color: #606d75lorem ipsum dolor
lorem ipsum dolor — Link Text (12px Bold)
12px / 700 / line-height: 1.5lorem / lorem
lorem ipsum / lorem ipsum dolor — Caption (11px)
11px / 400 / line-height: 1.5 / color: #606d75lorem ipsum / lorem
Font Stack
font-family: Helvetica, Arial, "lorem ipsum dolor ProN W3",
  "Hiragino Kaku Gothic ProN", lorem ipsum, Meiryo,
  "ＭＳ Ｐlorem ipsum", "MS PGothic", sans-serif;
lorem ipsum(Helvetica lorem). Web lorem ipsum dolor.
※ preview.html lorem ipsum dolor sit Noto Sans JP lorem ipsum dolor
03 / Article

lorem / lorem ipsum dolor sit amet

lorem ipsum dolor sit amet, lorem ipsum dolor

lorem ipsum dolor 1980 lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur(lorem)lorem, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor sit amet. lorem ipsum, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing. Na+ lorem K+ lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit, lorem ipsum dolor / lorem ipsum dolor. lorem ipsum dolor, 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. lorem ipsum dolor sit, lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor sit amet consectetur(lorem ipsum)lorem ipsum dolor. lorem ipsum dolor sit amet consectetur, lorem ipsum CTA lorem.
lorem ipsum dolor
Primary (Blue)
lorem ipsum
Outline
lorem ipsum >
Text Link
On Dark Background
lorem ipsum
White on Blue
lorem ipsum dolor
Outline White
05 / Cards

lorem ipsum dolor sit

💧
2024.07.15

lorem ipsum dolor sit

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

lorem ipsum >
🏃
2024.06.28

lorem ipsum dolor sit

lorem ipsum dolor sit amet(lorem)lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet.

lorem ipsum >
🧪
2024.05.10

lorem ipsum dolor sit

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

lorem ipsum >
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #e0e4e7, border-radius: 0
lorem ipsum — border: #015db2 (Pocari Blue)
lorem ipsum dolor sit amet consectetur
lorem — border: #cc0000 (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Level 1
0 1px 3px rgba(0,0,0,0.12)
Level 2
0 2px 8px rgba(0,0,0,0.15)
Focus Ring
#015db2 (Pocari Blue)
Frosted Glass as Depth
lorem ipsum dolor sit amet consectetur box-shadow lorem ipsum dolor sit amet consectetur(Frosted Glass)lorem ipsum dolor.
Frosted 0.4
Frosted 0.5
Frosted 0.8
08 / Layout

lorem ipsum & lorem ipsum dolor

Content Widths
Main Container 960px
Article Content 620px
Spacing Scale
4px
8px
16px
24px
32px
48px
64px
Design Characteristics
Square Components
border-radius: 0 — lorem ipsum dolor sit amet consectetur
Image-Driven Layout
lorem ipsum dolor. lorem ipsum dolor
System Font Stack
Helvetica lorem ipsum dolor. Web lorem ipsum dolor
Flat + Frosted Glass
lorem ipsum dolor, lorem ipsum dolor sit amet consectetur