Design System Preview
KAO

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
Kao Teal
#00806d
lorem ipsum dolor / lorem ipsum
Kao Teal Dark
#005856
lorem / lorem ipsum dolor
Kao Green
#6cc04a
lorem ipsum / lorem ipsum dolor
Teal Tints
Search Surface
#ebf7f5
lorem ipsum / lorem ipsum
Light Teal
#b5e2dd
lorem / lorem ipsum
Text
Text Primary
#3c3c3c
lorem / lorem
Text Secondary
#4e4d4e
lorem / lorem ipsum dolor
Text Muted
#767676
lorem ipsum / lorem ipsum
Text White
#ffffff
Teal lorem ipsum dolor
Surface & Background
Background
#ffffff
lorem ipsum
Surface Warm
#f6f6f4
lorem ipsum dolor(lorem ipsum dolor)
Border
#d7d7cf
lorem ipsum / lorem ipsum
Footer Background
#00806d
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

lorem / lorem ipsum dolor --- H1 (32px)
32px / 700 / line-height: normal / W3lorem
lorem ipsum dolor --- H2 Section (32px)
32px / 700 / line-height: 1.25 (40px) / letter-spacing: 0.01em / W6lorem ipsum
lorem ipsum dolor --- H2 on Teal (32px)
32px / 700 / line-height: 1.25 / color: #ffffff / on #00806dTeal lorem
lorem ipsum dolor --- H2 Topic (24px)
24px / 700 / line-height: 1.5 (36px) / letter-spacing: 0.013em / W3lorem ipsum
lorem ipsum dolor --- H2 Sub (24px / 400)
24px / 400 / line-height: 1.5 / letter-spacing: 0.02em / W6 font, weight 400lorem ipsum
lorem ipsum dolor --- H2 Footer (20px)
20px / 700 / line-height: 1.1 (22px) / W6lorem ipsum
lorem ipsum dolor --- Body (16px). FP-HiraginoUDSansStdN(UD lorem ipsum)lorem ipsum, lorem ipsum dolor sit. letter-spacing lorem 0.02em, palt lorem ipsum. ABCabc 123
16px / 400 / line-height: 1.75 (28px) / letter-spacing: 0.02em / palt: lorem / W3
lorem ipsum dolor --- Nav (14px). lorem ipsum dolor sit amet consectetur.
14px / 400 / line-height: 1.5 (21px) / color: #4e4d4elorem ipsum dolor
lorem ipsum --- Breadcrumb (14px). lorem ipsum dolor sit.
14px / 400 / color: #767676lorem ipsum
03 / Article

lorem ipsum dolor sit

B
lorem ipsum
Biore
lorem / lorem ipsum / lorem ipsum dolor sit amet consectetur
A
lorem ipsum
Attack
lorem / lorem ipsum dolor sit amet
M
lorem ipsum
Merit
lorem ipsum dolor sit amet consectetur
K
lorem ipsum
CuCute
lorem ipsum dolor sit amet

lorem ipsum dolor --- lorem ipsum eco

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
radius: 10px
lorem ipsum
Secondary
radius: 10px
lorem ipsum
Nav Pill
radius: 16px
lorem
Search
radius: 0 8 8 0
←
Carousel
radius: 50%

Button Spec

Primary: bg #00806d / text #ffffff / border-radius 10px / padding 12px 28px
Nav Pill: bg rgba(255,255,255,0.8) / text #4e4d4e / border-radius 16px

05 / Cards

lorem ipsum dolor sit

ESG

lorem ipsum dolor sit amet consectetur

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

lorem ipsum →
R&D

lorem ipsum dolor

lorem ipsum dolor sit, lorem ipsum / lorem ipsum / lorem ipsum 3 lorem ipsum dolor sit / lorem ipsum dolor sit.

lorem ipsum →
lorem ipsum

lorem ipsum dolor sit amet

Biore / Attack / Merit lorem ipsum, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur.

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum --- border: 1px solid #d7d7cf, radius: 8px
lorem ipsum --- border: 1px solid #00806d (Kao Teal)
lorem ipsum dolor sit amet consectetur adipiscing
lorem --- border-color: #cc3333
lorem ipsum --- border: 1px solid #d7d7cf, radius: 8px
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem / lorem ipsum dolor
Elevation 1
0px 1px 3px rgba(0,0,0,0.08)
Elevation 2
0px 2px 8px rgba(0,0,0,0.12)
Elevation 3
0px 4px 16px rgba(0,0,0,0.14)
Focus Ring
2px solid #00806d
08 / Layout

lorem ipsum

Header Padding

Header Horizontal Padding 48px

Section Backgrounds

#ffffff
Default
#f6f6f4
Warm Gray
#00806d
Footer

Border Radius

10px (Card / CTA)
16px (Nav Pill)
0 8 8 0 (Search)
50% (Carousel)
8px (Input)