Design System Preview
FUJIFILM — lorem ipsum

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.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand & Attention
FUJIFILM Red
#fb0020
lorem / lorem(lorem ipsum dolor)
Green
#018463
lorem / CSR lorem ipsum dolor
Blue
#124F72
lorem ipsum dolor / lorem ipsum
Text
Text Primary
#000000
lorem ipsum dolor
Text Secondary
#515151
lorem ipsum dolor / lorem ipsum
Text Red
#990000
lorem / lorem ipsum dolor
Text White
#ffffff
lorem ipsum dolor sit
Surface & Border
Background
#ffffff
lorem ipsum
Background Secondary
#F6F7F6
lorem ipsum dolor
Footer BG
#f1f2f1
lorem ipsum dolor
Button BG
#E0E0E0
lorem ipsum dolor sit
Border
#ADADAD
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

Font Substitution: Clarimo UD PE + UD Shin Go (commercial UD fonts) → Noto Sans JP (Google Fonts substitute)
Global: font-feature-settings: "palt" / letter-spacing: 0.06em
lorem 1 — H1 Title (36px / 700)
36px / 700 / line-height: 1.5 (54px) / letter-spacing: 0.06em / palt: onlorem ipsum dolor
lorem ipsum dolor — H2 Hero
45px / 400 / line-height: normal / letter-spacing: 0.03em / palt: onlorem ipsum dolor sit
lorem ipsum dolor — H2 Section (32px)
32px / 400 / line-height: 1.5 (48px) / letter-spacing: 0.03em / palt: onlorem ipsum dolor
lorem ipsum — H3 (28px / 400)
28px / 400 / line-height: 1.5 (42px) / letter-spacing: 0.06em / palt: on
lorem ipsum — H3 variant (18px / 500)
18px / 500 / line-height: 1.5 (27px) / letter-spacing: 0.06em / palt: on
H4 lorem (18px / 700)
18px / 700 / line-height: 1.5 (27px) / letter-spacing: 0.06em / palt: on
lorem ipsum dolor — UD(lorem ipsum dolor sit)lorem ipsum dolor sit amet consectetur. line-height: 2.0 lorem ipsum dolor letter-spacing: 0.06em, lorem palt lorem ipsum dolor sit amet consectetur adipiscing elit.
16px / 400 / line-height: 2.0 (32px) / letter-spacing: 0.06em / palt: onlorem
lorem ipsum dolor — Nav (14px / 500)
14px / 500 / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor — Caption (12px / 400-500)
12px / 400-500 / line-height: 2.0 (24px) / color: #515151lorem ipsum dolor
03 / Article & Product

lorem / lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor

80 lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. PROVIA, Velvia, ASTIA lorem, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit amet consectetur adipiscing

X-Trans CMOS lorem ipsum X-Processor lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed. RAW lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.

*FUJIFILM X Series lorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore.

X-T5

FUJIFILM X-T5

lorem 4020 lorem X-Trans CMOS 5 HR lorem ipsum dolor. lorem ipsum dolor sit amet consectetur AF lorem ipsum, lorem ipsum dolor sit amet consectetur.

lorem ipsum →
GFX100II

FUJIFILM GFX100 II

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

lorem ipsum →
04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA
bg:#E0E0E0 / radius:2px
padding: 16px 32px
lorem ipsum
Secondary
bg:rgba(255,255,255,0.3)
border: 1px solid #ADADAD
padding: 14px 28px
lorem ipsum dolor →
Link
color: #fb0020
lorem ipsum dolor
Dark variant
bg:#000000 / color:#fff
lorem ipsum dolor
Outline Dark
border:#000000
05 / Cards

lorem ipsum dolor sit

Healthcare

AI lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit AI lorem ipsum, lorem ipsum dolor. lorem ipsum dolor sit, lorem ipsum / lorem ipsum dolor sit.

lorem ipsum →
Imaging

lorem ipsum dolor sit amet consectetur

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

lorem ipsum →
Materials

lorem ipsum dolor sit amet

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #ADADAD, radius: 2px
lorem ipsum — border: #000000, box-shadow: 0 0 0 1px #000
lorem ipsum dolor sit amet consectetur.
lorem — border: #990000
07 / Elevation

Depth & Elevation

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

Level 0: Flat
lorem, lorem ipsum dolor(lorem)
--elevation-1
lorem ipsum dolor
--elevation-2
lorem ipsum dolor
--elevation-3
lorem ipsum
Focus Ring
border: 2px solid #000
08 / Layout

lorem ipsum & lorem ipsum dolor

Container Standard 1160px
Container Wide 1400px
Article Content 760px

Spacing Scale

8px
16px
20px
gutter
32px
40px
gap
64px
padding