lorem ipsum
lorem ipsum dolor sit amet consectetur
lorem ipsum dolor sit

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

lorem ipsum dolor sit amet lorem ipsum dolor sit FONT SWITCH PROJECT
01 — COLORS

lorem ipsum dolor

lorem ipsum #ffffff. lorem ipsum dolor #000000 lorem ipsum #0c0c0c. lorem ipsum 3 lorem ipsum, lorem ipsum #0086ce, lorem ipsum #3071b9, lorem ipsum dolor sit amet consectetur #003cff. lorem ipsum dolor sit amet consectetur.

Link Blue
#0086ce
lorem / lorem ipsum / lorem ipsum dolor
Heading Blue
#3071b9
lorem ipsum dolor / lorem
Vivid Blue
#003cff
lorem ipsum / lorem ipsum dolor(lorem)
Cyan
#00a3e9
lorem ipsum dolor
Yellow
#ffcc19
lorem / lorem ipsum dolor sit
Sky
#8ed8f6
Web lorem ipsum dolor sit amet
Pale Yellow
#feeea4
lorem ipsum dolor sit
CTA Charcoal
#4c4c4c
lorem CTA lorem
Ink
#000000
lorem / body lorem ipsum dolor
Ink Soft
#0c0c0c
lorem ipsum dolor／lorem ipsum
Surface
#f7f7f7
lorem / lorem ipsum dolor
Border
#e5e5e5
lorem / lorem ipsum dolor sit amet consectetur
02 — TYPOGRAPHY

lorem ipsum dolor

lorem ipsum dolor UD lorem“UD lorem NT Pr6N”lorem. lorem font-weight lorem ipsum dolor sit(-Light / -Reg / -Med)lorem ipsum dolor. letter-spacing 0.05em lorem ipsum dolor sit, palt lorem ipsum.

lorem ipsum dolor sit
Display (Products) · UD lorem NT Reg · 56px · weight 400 · lh 1.0 · ls 0.05em · #3071b9
lorem ipsum dolor sit amet consectetur
Display (Concept) · UD lorem NT Reg · 50px · weight 400 · lh 1.4 · ls 0.05em
lorem ipsum / lorem ipsum
Page Title · UD lorem NT Light · 36px · weight 400 · lh 1.7 · ls 0.05em
PICK UP
Section Head · UD lorem NT Reg · 30px · weight 500 · lh 1.0 · ls 0.05em
lorem ipsum dolor sit amet consectetur adipiscing
Accent Head · UD lorem NTMed · 18px · weight 400 · lh 1.7 · ls 0.044em · #003cff
lorem ipsum, lorem ipsum dolor. lorem ipsum dolor sit amet consectetur.
Lead · UD lorem NT Light · 20px · weight 400 · lh 1.8 · ls 0.05em
lorem ipsum — lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.
Body (Article) · UD lorem NT Light · 14px · weight 400 ·lh 2.0 · ls 0.05em
lorem(lorem) — lorem, lorem ipsum dolor sit amet. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.
Body · UD lorem NT Light · 14px · weight 400 · lh 1.5 · ls 0.05em
© Morisawa Inc. — Design System Preview
Footer Small · 12.5px · weight 400 · lh 1.4 · ls 0.08em · #999999
03 — ARTICLE

lorem ipsum dolor

lorem ipsum dolor, lorem ipsum.

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

UD lorem ipsum dolor

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

lorem ipsum dolor Web lorem ipsum dolor. lorem 1.5 lorem, lorem ipsum 2.0. lorem 0.05em lorem ipsum. lorem ipsum dolor sit(palt)lorem ipsum dolor. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.lorem ipsum dolor。

04 — BUTTONS

lorem

lorem CTA lorem ipsum dolor #4c4c4c lorem ipsum(radius 4px). lorem ipsum dolor sit amet(radius 8px, lorem ipsum dolor). lorem ipsum / lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit amet lorem ipsum dolor lorem ipsum dolor Web lorem ipsum note
05 — CARDS

lorem ipsum

lorem ipsum dolor sit amet consectetur. lorem / lorem ipsum / lorem ipsum dolor sit, lorem ipsum dolor #333333. lorem 8px.

lorem / lorem ipsum
Morisawa Fonts
lorem ipsum dolor sit amet consectetur
lorem ipsum dolor
Embedded Fonts
lorem / lorem ipsum dolor sit amet consectetur
Web lorem ipsum
TypeSquare
lorem ipsum dolor sit amet consectetur
Select Pack
lorem 7 lorem ipsum
lorem / lorem ipsum dolor sit amet
06 — FORMS

lorem ipsum

lorem ipsum / lorem ipsum / lorem ipsum 3 lorem. radius 4px, lorem ipsum dolor sit amet #0086ce, lorem ipsum dolor #cc3333.

lorem ipsum dolor sit amet consectetur.
lorem ipsum
07 — ELEVATION

lorem

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

Level 0
none(lorem)
Level 1
0 0 0 1px rgba(0,0,0,.15)
Level 2
0 1px 0 0 rgba(0,0,0,.15)
Level 3
0 2px 20px rgba(0,0,0,.07)
08 — LAYOUT

lorem ipsum dolor

4 / 8 / 16 / 24 / 40 / 64 / 96px. lorem ipsum dolor 1200px(lorem 1032–1100px), lorem ipsum dolor 620px.

XS 4
S 8
M 16
L 24
XL 40
XXL 64
XXXL 96
lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing ▶ Morisawa Fonts