Design System Preview
KEYENCE — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. CSS Custom Properties lorem ipsum dolor sit. computed style lorem ipsum dolor.

lorem ipsum → lorem ipsum
01 / Colors — CSS Custom Properties

lorem ipsum dolor

Brand
KEYENCE Red
#ea0437
--KEYENCE_COLOR_RED
Foreground Red
#de0435
--FOREGROUND_RED
Text
Foreground Black
#222222
--FOREGROUND_BLACK
Foreground Gray
#6f6f6f
--FOREGROUND_GRAY
Text White
#ffffff
lorem ipsum dolor sit
Background
BG Extra Light
#fafafa
--BG_EX_LIGHTGRAY
BG Light Gray
#f3f3f3
--BG_LIGHTGRAY
BG Light Red
#fef3f5
--BG_LIGHTRED
Surface
#ffffff
lorem / lorem
Placeholder
#eeeeee
lorem ipsum dolor sit
Border
Outline Light
#dddddd
--OUTLINE_LIGHTGRAY
Input Border
#e1e1e1
lorem ipsum dolor
Footer BG
#222222
lorem ipsum dolor
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor — Display
40px / 700 / line-height: 1.75 (--LINE_HEIGHT)lorem ipsum dolor h1
lorem ipsum dolor — Heading 2
28px / 700 / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor — Nav Link
16px / 700 / line-height: 1.75lorem ipsum dolor
lorem ipsum dolor — “lorem ipsum dolor”“lorem ipsum dolor”“lorem / lorem ipsum”lorem, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet consectetur adipiscing.
16px / 400 / line-height: 1.75 (--LINE_HEIGHT)lorem
lorem ipsum dolor sit — Sub Nav (14px)
14px / 400 / line-height: 1.75lorem ipsum
lorem ipsum dolor — Caption (12px)
12px / 400 / line-height: 1.75lorem ipsum
0120-100-470
Helvetica, Arial (--FONT_FAMILY_ENG) / 26px / 700lorem ipsum
03 / Article — lorem ipsum

lorem ipsum dolor sit amet

lorem ipsum dolor

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

lorem ipsum 50%lorem ipsum dolor sit amet consectetur, lorem ipsum“lorem ipsum dolor”lorem ipsum. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur——lorem ipsum dolor sit amet consectetur.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum →
Primary CTA
lorem ipsum
Floating Pill
Carousel Arrow
NEW
NEW Badge
05 / Cards

lorem ipsum

Product Image
NEW

lorem ipsum dolor sit amet consectetur adipiscing

BZ-XLC1
Product Image
NEW

AI×lorem ipsum dolor sit amet consectetur adipiscing

VS-G lorem ipsum
Product Image

lorem ipsum dolor lorem ipsum dolor

VK-X4000 lorem ipsum
06 / Forms

lorem ipsum dolor

Select — weight: 700, radius: 4px, border: #e1e1e1
lorem ipsum — radius: 4px, border: #e1e1e1
lorem ipsum — border: #ea0437 (KEYENCE_RED)
lorem — border: #c62828
07 / Elevation — CSS Custom Properties

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
--BUTTON_SHADOW
lorem / lorem
Floating
lorem ipsum dolor sit
Red Border
#ea0437 (KEYENCE_RED)
08 / Layout

lorem ipsum dolor

Main Container 1200px
Article Content 700px