Design System Preview — moneyforward.com

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. 14px lorem ipsum dolor sit amet consectetur, lorem ipsum dolor Pro lorem ipsum dolor sit amet, weight 500 lorem ipsum dolor sit.

lorem ipsum dolor lorem ipsum dolor
01 / Colors

lorem ipsum dolor

Brand
Primary Green
#4db848
lorem ipsum / CTA
Primary Dark
#3a9a35
lorem / lorem
Text
Text Primary
#333333
lorem ipsum dolor
Text Secondary
#666666
lorem ipsum dolor
Text Disabled
#999999
lorem / lorem
Semantic
Success
#27ae60
lorem / lorem
Danger
#e74c3c
lorem / lorem
Warning
#f39c12
lorem / lorem ipsum
Surface & Border
Background
#ffffff
lorem ipsum
Surface
#f5f5f5
lorem / lorem ipsum dolor
Border
#dddddd
lorem ipsum / lorem
Border Light
#eeeeee
lorem ipsum dolor
02 / Typography — lorem

lorem ipsum dolor sit

lorem ipsum dolor — Heading 2 (large)
20px / 500 / line-height: normal / palt: loremlorem ipsum dolor
lorem ipsum / lorem — Heading 3
17px / 500 / line-height: 28.9px (×1.7) / palt: loremlorem ipsum
lorem ipsum ／ lorem ipsum ／ lorem ipsum dolor
14px / 500 / line-height: 20px / palt: loremlorem ipsum dolor
lorem ipsum dolor — 14px lorem ipsum dolor sit amet consectetur. lorem ipsum dolor Pro lorem ipsum dolor sit amet consectetur adipiscing, macOS lorem ipsum dolor sit amet consectetur adipiscing. line-height lorem 1.5 lorem, lorem ipsum dolor sit amet consectetur adipiscing.
14px / 400 / line-height: 21px (×1.5) / letter-spacing: normal / palt: loremlorem
lorem ipsum dolor / lorem — Caption (12px)
12px / 400 / line-height: 18px (×1.5) / color: #999lorem
03 / Content — lorem ipsum dolor sit amet

lorem ipsum dolor

lorem ipsum dolor sit amet

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

lorem ipsum dolor

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

lorem ipsum dolor sit

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

04 / Table — lorem ipsum

lorem ipsum dolor

lorem lorem lorem ipsum lorem
04/01 lorem ipsum lorem +350,000
04/03 lorem ipsum dolor lorem -95,000
04/04 lorem ipsum dolor sit lorem -4,280
04/05 lorem ipsum lorem -8,650
04/05 lorem IC lorem ipsum lorem -3,000
04/06 lorem ipsum lorem lorem -33,333
05 / Cards — lorem ipsum

lorem ipsum dolor sit

lorem ipsum

+350,000 lorem

lorem, lorem ipsum, lorem ipsum dolor sit. lorem +12,000 lorem.

lorem ipsum

-186,430 lorem

lorem ipsum dolor sit amet. lorem 200,000 lorem lorem ipsum dolor 13,570 lorem.

lorem

4,823,500 lorem

lorem ipsum, lorem ipsum, lorem ipsum dolor sit. lorem +163,570 lorem.

lorem ipsum dolor →
06 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary
lorem ipsum
Outline
lorem ipsum
Danger
lorem ipsum
Ghost
07 / Forms

lorem ipsum dolor

lorem ipsum — border: #ddd, radius: 4px
lorem ipsum — border: #4db848
lorem — border: #e74c3c
08 / Elevation

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Level 1
lorem / lorem
Level 2
lorem ipsum dolor
Level 3
lorem ipsum
09 / Comparison — freee vs lorem ipsum dolor

freee lorem ipsum

lorem lorem ipsum dolor freee
lorem ipsum dolor #4db848 (Green) #2864f0 (Blue)
lorem font-size 14px(lorem ipsum dolor) 16px(lorem)
line-height 1.5 (21px) 1.7 (27.2px)
lorem weight 500 (medium) 700 (bold)
lorem ipsum dolor lorem ipsum dolor Pro lorem Noto Sans JP / lorem ipsum dolor ProN
lorem ipsum dolor lorem ipsum dolor Helvetica Neue lorem
palt lorem lorem ipsum dolor
CSS Custom Properties lorem Vibes Design System lorem
border-radius 4px(lorem ipsum dolor) 8px(lorem ipsum dolor)
lorem ipsum dolor lorem CSS Vibes(lorem ipsum)