Design System Preview
LIXIL

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 sit amet ProN(lorem ipsum dolor)lorem. lorem ipsum dolor sit Google Fonts lorem Noto Sans JP lorem ipsum dolor sit.
lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
LIXIL Orange
#ef7a00
lorem ipsum dolor / CTA / lorem
LIXIL Orange Dark
#d86e00
lorem / lorem ipsum
Text
Text Primary
#4b4949
lorem ipsum dolor
Text Secondary
#454545
lorem ipsum dolor
Text White
#ffffff
lorem ipsum dolor
Surface & Background
Warm Cream
#f9f7f1
lorem ipsum
Surface White
#ffffff
lorem / lorem ipsum dolor
Section Gray
#efefef
lorem ipsum dolor
Border
#e6e6e6
lorem ipsum / lorem ipsum
Border Strong
#cccccc
lorem ipsum dolor
Navigation & Footer
Nav Gray
#858384
lorem ipsum dolor sit
Footer Dark
#3d3938
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor --- H1 (32px / 700)
32px / 700 / line-height: 1.5 / color: #ef7a00lorem ipsum
lorem ipsum dolor --- H2 (16px / 700)
16px / 700 / line-height: 1.1-1.5 / color: #4b4949 or #fffffflorem ipsum
lorem ipsum --- H3 (16-20px / 700)
16-20px / 700 / line-height: 1.35 / color: #4b4949
lorem ipsum --- H4 (14px / 700)
14px / 700 / line-height: 1.5 / color: #4b4949
lorem ipsum dolor --- Nav (15px / 700)
15px / 700 / color: #ffffff on #858384lorem ipsum dolor
lorem ipsum dolor --- Body (15.2px). lorem ipsum dolor ProN lorem ipsum dolor sit amet consectetur adipiscing, Web lorem ipsum dolor sit amet. letter-spacing lorem normal, palt lorem ipsum dolor sit. ABCabc 123 lorem ipsum dolor LIXIL
15.2px / 400 / line-height: 1.6 (24.3px) / letter-spacing: normal / palt: lorem
lorem ipsum dolor --- A (15px / 400 / color: #ef7a00)
15px / 400 / color: #ef7a00lorem ipsum dolor
03 / Product

lorem ipsum dolor sit

K
lorem ipsum dolor
lorem ipsum dolor sit amet consectetur
lorem ipsum →
B
lorem ipsum dolor sit
lorem ipsum dolor sit amet consectetur
lorem ipsum →
T
lorem
lorem ipsum dolor sit amet consectetur
lorem ipsum →
W
lorem ipsum
lorem ipsum dolor sit amet consectetur
lorem ipsum →
04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary CTA
radius: 0px (rectangular)
lorem ipsum
Secondary
radius: 0px / border: 1px
lorem ipsum dolor
Nav Button
radius: 0px / bg: #858384
lorem ipsum dolor
Nav CTA
radius: 0px / orange bg

Rectangular Button Spec

Primary: bg #ef7a00 / text #ffffff / border-radius 0px / padding 8px 24px
Secondary: bg #ffffff / text #4b4949 / border 1px solid #e6e6e6 / border-radius 0px
Nav: bg #858384 / text #ffffff / border-radius 0px

05 / Cards

lorem ipsum dolor sit

lorem ipsum

lorem ipsum dolor

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

lorem ipsum →
lorem

lorem ipsum dolor

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

lorem ipsum →
lorem

lorem ipsum

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum --- border: 1px solid #e6e6e6, radius: 0px
lorem ipsum --- border: 1px solid #ef7a00 (LIXIL Orange)
lorem ipsum dolor sit amet consectetur adipiscing
lorem --- border-color: #cc0000
lorem ipsum --- border: 1px solid #e6e6e6, radius: 0px
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem ipsum / lorem / lorem ipsum dolor
Level 1: Border
1px solid #e6e6e6
Level 2: Border Strong
1px solid #cccccc
Focus Ring
2px solid #ef7a00 (LIXIL Orange)

LIXIL lorem(box-shadow)lorem ipsum, lorem ipsum dolor sit amet consectetur. lorem / lorem ipsum dolor / lorem ipsum dolor sitborder: 1px solid #e6e6e6 lorem ipsum, lorem ipsum#cccccc lorem ipsum.

08 / Layout

lorem ipsum

Container Width

Max Width 1200px
Horizontal Padding 48px

Section Backgrounds

#f9f7f1
Warm Cream
#ffffff
Surface
#efefef
Section Gray
#3d3938
Footer

Border Radius

0px (Primary CTA)
0px (Secondary)
0px (Card)
0px (Focus Ring)