lorem ipsum, lorem ipsum dolor.

lorem ipsum dolor sit amet consectetur adipiscing

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. canon.jp lorem computed style lorem ipsum dolor.

lorem ipsum dolor sit lorem
01 / Colors

lorem ipsum dolor

Brand
Canon Red
#cc0000
lorem ipsum dolor / lorem ipsum
Dark Red
#771f1f
lorem ipsum dolor
Neutral
Near Black
#222222
lorem ipsum dolor
Header Black
#141414
lorem ipsum dolor
Placeholder
#727272
lorem ipsum dolor sit
Border
#dbdbdb
lorem ipsum
Surface
White
#ffffff
lorem ipsum
Light Pink
#ffebeb
lorem ipsum dolor sit
Light Gray
#f4f4f4
lorem ipsum dolor
Near White
#fafafa
lorem ipsum
Semantic
Danger
#cc0000
Success
#00875a
Warning
#cc7700
02 / Typography

lorem ipsum dolor sit

lorem ipsum — Section Title (H2)
38px / 700 / lh 1.2lorem
Canon Marketing Japan — H3 Large
36px / 700 / lh 1.2lorem
lorem ipsum dolor — H3 Card
30px / 700 / lh 1.6lorem ipsum
lorem ipsum dolor — H1 Page
28px / 700 / lh 1.3lorem ipsum
lorem ipsum dolor, lorem ipsum dolor — Card Desc
22px / 700 / lh 1.8 / ls 0.03emlorem ipsum
lorem ipsum dolor sit amet consectetur adipiscing — Sub Title
18px / 400 / lh 1.46lorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor. lorem ipsum dolor sit IT lorem ipsum dolor sit amet consectetur adipiscing elit.
16px / 400 / lh 1.65lorem
lorem ipsum dolor sit — Nav Title (14px/700)
14px / 700 / lh 1.5lorem
© Canon Marketing Japan Inc. — Copyright (15px)
15px / 400 / lh 1.6 / color #141414lorem ipsum
03 / Article

lorem ipsum dolor

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor sit amet

EOS R lorem ipsum, RF lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

※ lorem ipsum dolor sit amet consectetur adipiscing.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor sit
Pill / 15px bold / radius 40 / border #222
lorem
KV Button / radius 6 / shadow / border #dbdbdb
lorem ipsum dolor sit
Pill on Red / white border / hover → red bg
lorem ipsum dolor sit
Pill on Red / same style
05 / Cards

lorem ipsum dolor sit

Product Image

EOS R5 Mark II

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

lorem ipsum
Product Image

PIXUS TS8730

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

lorem ipsum
06 / Forms

lorem ipsum dolor

Default / bg #fafafa / border #e6e6e6
Focus / border #222222
lorem ipsum dolor sit amet consectetur
Error / border #cc0000
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem — lorem ipsum
Elevation 1
3px 3px 10px rgba(0,0,0,0.1)
Canon Red Section

lorem ipsum dolor, lorem ipsum dolor

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

lorem ipsum dolor sit
08 / Layout

lorem ipsum dolor & lorem ipsum

Spacing Scale
XS
4px
S
10px
M
16px
L
24px
XL
40px
XXL
64px
Border Radius
0px
lorem ipsum
6px
KV lorem
40px
Pill CTA