Design System Preview
Fujitsu (fujitsu.com) — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. Fujitsu Red lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor sit lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
Fujitsu Red
#ea0000
lorem ipsum dolor sit
Deep Blue
#2400b0
lorem ipsum CTA
Vivid Blue
#0048ff
lorem / lorem ipsum
Green
#008224
lorem ipsum dolor
Text
Text Primary
#000000
lorem / lorem
Text Gray 1
#333333
lorem ipsum dolor
Text Gray 6
#5f5f5f
lorem ipsum dolor
Surface & Border
Background Primary
#ffffff
lorem ipsum
Background Alt
#f3f3f3
lorem ipsum dolor sit
Gray 3
#efefef
lorem ipsum
Gray 2
#e8e8e8
lorem ipsum
Gray 7
#dcdcdc
lorem ipsum
Dark Surface
Footer Dark
#27455c
lorem ipsum dolor
Surface Dark
#3c3c3c
lorem ipsum dolor
Surface Mid
#6d6e70
lorem ipsum dolor
Semantic
Error BG
#fde5e5
lorem ipsum dolor
Gradients
Red → Pink
#ea0000 → #d80084
Red → Orange
#ea0000 → #ff8000
Blue Gradient
#2400b0 → #0c7fd5
Green Gradient
#008224 → #00a470
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor sit
Display: 60px / 700 / line-height: 1.7 / letter-spacing: normallorem ipsum
lorem ipsum dolor sit amet consectetur
H1: 40px / 700 / line-height: 1.25lorem ipsum dolor
lorem ipsum dolor sit amet consectetur
H2: 26px / 700 / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor sit amet consectetur
H2 Alt: 24px / 700 / line-height: 1.7lorem ipsum dolor
lorem ipsum dolor sit amet consectetur
H3: 16px / 700 / line-height: 1.3lorem ipsum
lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing(DX)lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur adipiscing.
Body: 15px / 400 / line-height: 1.7 / color: #333333lorem
lorem ipsum dolor  lorem ipsum  lorem ipsum dolor  lorem ipsum dolor
Nav: 14px / 700 / line-height: 1.5lorem ipsum dolor
03 / Article

lorem ipsum dolor sit amet

lorem ipsum dolor

lorem ipsum dolor sit amet consectetur adipiscing

2024.12.15  |  lorem ipsum dolor

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

lorem ipsum dolor sit amet

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

lorem ipsum dolor sit

lorem ipsum dolor sit, lorem ipsum dolor, lorem ipsum dolor sit amet, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor. ABCabc 123 lorem ipsum dolor / lorem ipsum dolor sit amet consectetur adipiscing.

04 / Buttons

lorem ipsum dolor sit

Standard
lorem ipsum dolor
Primary (Red)
lorem ipsum
Secondary (Blue)
lorem ipsum
Outline
Gradient
Fujitsu Uvance
Red → Pink
lorem ipsum dolor
Red → Orange
lorem ipsum dolor
Blue Gradient
lorem ipsum dolor
Green Gradient
On Dark Background
lorem ipsum dolor
Ghost (pill)
lorem ipsum
Primary on Dark
05 / Cards

lorem ipsum dolor sit

Fujitsu Uvance

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

lorem ipsum

lorem ipsum dolor sit

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

lorem ipsum

lorem ipsum dolor

2040 lorem ipsum dolor sit amet consectetur adipiscing elit, GreenByDigital lorem ipsum dolor sit amet consectetur.

lorem ipsum
Gray Background Card

lorem ipsum dolor

lorem ipsum dolor sit, lorem ipsum dolor, IR lorem ipsum dolor sit.

lorem ipsum

lorem ipsum

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

lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #dcdcdc, radius: 0
lorem ipsum — border: #0048ff (Vivid Blue)
lorem ipsum dolor sit amet consectetur.
lorem — border: #ea0000, bg: #fde5e5
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing.
Subtle Shadow
0 1px 3px rgba(0,0,0,0.08) — lorem ipsum dolor
Focus Ring
#0048ff (Vivid Blue) — lorem ipsum dolor
Error Border
#ea0000 (Fujitsu Red) — lorem ipsum
08 / Layout

lorem ipsum dolor

Max Content Width 1200px
Article Content 960px
Narrow Content 680px
Section Pattern
White Section (#ffffff)
Alt Section (#f3f3f3)
White Section (#ffffff)
Alt Section (#f3f3f3)
Dark Section (#3c3c3c)
Footer (#27455c)
Design Characteristics
  • ■ border-radius: 0 — lorem ipsum dolor sit amet consectetur adipiscing(lorem: Ghost lorem ipsum pill 30px)
  • ■ Elevation: lorem ipsum dolor. lorem ipsum dolor sit amet consectetur
  • ■ lorem ipsum dolor white / #f3f3f3 lorem ipsum dolor
  • ■ lorem ipsum dolor sit amet consectetur adipiscing