Design System Preview
SmartHR — lorem ipsum

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. SmartHR Design System lorem ipsum dolor sit amet consectetur, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Primary
SmartHR Blue
#00c4cc
lorem ipsum / lorem / lorem ipsum(UI lorem ipsum)
Product Main
#0077c7
UI lorem ipsum / lorem / lorem ipsum
Semantic
Danger
#e01e5a
lorem / lorem ipsum
Warning
#ffcc17
lorem / lorem ipsum
Interactive
Text Link
#0071c1
lorem ipsum dolor
Orange Accent
#ff9900
lorem ipsum / lorem ipsum
Text
Text Black
#23221e
lorem / lorem(#000000 lorem ipsum)
Text Grey
#706d65
lorem ipsum dolor / lorem ipsum dolor
Text Disabled
#c1bdb7
lorem ipsum dolor sit
Stone Scale(lorem ipsum dolor)
Stone 01 (COLUMN)
#f8f7f6
lorem ipsum
Stone 02 (HEAD)
#edebe8
lorem ipsum dolor sit
Stone 03
#aaa69f
lorem ipsum dolor / lorem ipsum
Stone 04
#4e4c49
lorem ipsum dolor sit
Surface & Borders
White
#ffffff
lorem ipsum dolor sit
Border
#d6d3d0
lorem ipsum / lorem ipsum
Over Background
#f2f1f0
lorem ipsum dolor
Action Background
#d6d3d0
lorem ipsum dolor sit amet
Chart Colors
#00c4cc
#ffcd00
#ff9100
#e65537
#2d4b9b
#2d7df0
#69d7ff
#4bb47d
#05878c
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — Display XXL
2rem (32px) / 700 / line-height: 1.25 / letter-spacing: 0Display
lorem ipsum dolor — Heading XL
1.5rem (24px) / 700 / line-height: 1.25 / letter-spacing: 0Heading 1
lorem ipsum — Heading L
1.2rem (19.2px) / 700 / line-height: 1.5 / letter-spacing: 0Heading 2
lorem ipsum dolor — Body M. SmartHR lorem UI lorem, lorem ipsum dolor sit line-height: 1.5 lorem ipsum dolor sit. lorem ipsum dolor #23221e lorem, lorem #000000 lorem ipsum.
1rem (16px) / 400 / line-height: 1.5 (NORMAL) / letter-spacing: 0Body
lorem ipsum dolor — Small S (13.7px)
0.857rem (13.7px) / 400 / line-height: 1.5 / color: Text GreySmall
lorem ipsum dolor / lorem — Caption XS (12px)
0.75rem (12px) / 400 / line-height: 1.5Caption
lorem / lorem — Smallest XXS (10.7px)
0.667rem (10.7px) / 400 / line-height: 1.5Smallest
font-family: AdjustedYuGothic, "Yu Gothic", YuGothic, "Hiragino Sans", sans-serif
@font-face lorem ipsum dolor sit Medium lorem 400 lorem ipsum dolor(Windows lorem ipsum dolor)
03 / Article — lorem UI lorem ipsum dolor

lorem ipsum dolor

lorem lorem ipsum: EMP-2024-0042 lorem: 2026-04-01

lorem ipsum dolor

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

lorem / lorem ipsum

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

lorem ipsum dolor sit amet line-height: 1.75(RELAXED lorem ipsum)lorem ipsum dolor. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet / lorem ipsum dolor, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit

lorem ipsum lorem lorem lorem lorem
EMP-0042 lorem lorem lorem ipsum dolor lorem ipsum dolor 2021-04-01
EMP-0108 lorem lorem lorem ipsum lorem ipsum dolor 2019-10-01
EMP-0215 lorem lorem lorem ipsum dolor sit lorem ipsum 2022-07-01
3 lorem ipsum — lorem ipsum: lorem ipsum / CSV lorem / lorem
04 / Buttons

lorem ipsum dolor sit

lorem ipsum
Primary
#0077c7 / radius: 6px / 700
lorem ipsum
Secondary
border: 1px solid #0077c7
lorem ipsum
Danger
#e01e5a
lorem
Disabled
bg: #edebe8 / text: #c1bdb7
05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor

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

lorem ipsum

lorem ipsum dolor sit

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

lorem ipsum

lorem ipsum dolor

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

lorem ipsum
06 / Forms

lorem ipsum dolor

lorem ipsum — border: 1px solid #d6d3d0, radius: 6px
lorem ipsum — border: 2px solid #0077c7 (Product Main)
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border-color: #e01e5a (Danger)
07 / Elevation

Depth & Elevation

Level 0: Flat
none — lorem ipsum dolor
Level 1
0 2px 4px rgba(0,0,0,0.1)
lorem / lorem ipsum dolor
Level 2
0 4px 8px rgba(0,0,0,0.15)
lorem ipsum / lorem ipsum
Focus Ring
#0077c7 (Product Main)
08 / Layout — lorem ipsum dolor & lorem ipsum dolor

lorem ipsum

Spacing Scale(8px lorem)

XS
4px
S
8px
M
16px
L
24px
XL
32px
XXL
40px

Breakpoints

SP ≤ 599px
Tablet 600px - 959px
Desktop ≥ 960px

lorem ipsum dolor

44px
lorem ipsum dolor sit: 44px x 44px