Design System Preview
freee.co.jp

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. freee Vibes Design System lorem ipsum dolor sit amet consectetur computed style lorem ipsum dolor.

lorem ipsum DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Primary(lorem ipsum)
Primary Blue
#2864f0
CTA / lorem / lorem ipsum
Primary Hover
#285ac8
lorem ipsum
Primary Dark
#1e46aa
h3 lorem / lorem ipsum
Primary Darkest
#143278
lorem ipsum dolor
Blue Scale
Blue 50
#ebf3ff
Blue 100
#dce8ff
Blue 200
#aac8ff
Blue 300
#73a5ff
Blue 500
#2864f0
Blue 600
#3264dc
Blue 700
#285ac8
Blue 800
#1e46aa
Blue 850
#23418c
Blue 900
#143278
Semantic(lorem ipsum)
Danger
#dc1e32
lorem / lorem
Warning
#ffb91e
lorem / lorem
Success
#00963c
lorem / lorem
Orange
#fa6414
lorem / lorem ipsum
Neutral(lorem ipsum)
Text Heading
#323232
lorem / lorem ipsum dolor
Text Body
#595959
body lorem ipsum
Text Muted
#8c8989
lorem ipsum dolor / lorem
Heading Blue
#1e46aa
h3 / lorem ipsum dolor
Surface & Border
White
#ffffff
lorem ipsum dolor sit
Background Light
#f7f5f5
lorem / lorem ipsum dolor
Background Lighter
#f0eded
lorem ipsum dolor
Border
#e9e7e7
lorem ipsum / lorem ipsum
Input Border
#cccccc
lorem ipsum dolor(lorem)
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor — H2 Hero (40px)
40px / 500 / line-height: 1.5 / letter-spacing: 0.04em / color: #323232lorem ipsum dolor sit
lorem ipsum dolor — H2 (34px)
34px / 500 / line-height: 1.5 / letter-spacing: 0.04em / color: #323232lorem ipsum dolor sit
lorem ipsum dolor — H2 Blue (24px)
24px / 500 / line-height: 1.5 / letter-spacing: normal / color: #2864f0lorem ipsum dolor sit
lorem ipsum — H3 (24px)
24px / 500 / line-height: 1.5 / letter-spacing: normal / color: #1e46aa (Primary Dark)lorem ipsum dolor sit
lorem ipsum — Label (18px)
18px / 700 / line-height: 1.5 / color: #2864f0lorem ipsum dolor sit
lorem ipsum dolor — lorem ipsum dolor sit. freee lorem / lorem ipsum / lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.
16px / 400 / line-height: 1.5 / color: #595959 (Text Body)lorem ipsum dolor sit
lorem ipsum dolor sit — Nav Link (14px)
14px / 400 / line-height: 1.5 / color: #323232lorem ipsum dolor
lorem ipsum dolor — Caption (12px)
12px / 700 / line-height: 1.5 / color: #1e46aalorem ipsum dolor sit
Vibes lorem ipsum UI lorem ipsum dolor
lorem ipsum UI lorem ipsum — 0.875rem (14px) / 400 / line-height: 1.5. lorem ipsum dolor(-apple-system, lorem ipsum dolor ProN)lorem.
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Hiragino Kaku Gothic ProN, Arial, MeiryoVibes
03 / Article

lorem ipsum dolor

lorem / lorem ipsum dolor sit amet

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

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur adipiscing, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit 80%lorem ipsum dolor. AI lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet.

lorem ipsum dolor sit amet

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

lorem ipsum

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

※ freee lorem ipsum dolor sit amet consectetur(2025 lorem)
04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA
radius: 8px / border: 2px
lorem ipsum
Secondary
radius: 5px / border: 1px
lorem ipsum
Danger
radius: 8px
lorem ipsum
Success
radius: 8px
lorem ipsum dolor
Pill (Vibes)
radius: 99rem
05 / Cards

lorem ipsum dolor sit

freee lorem

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

lorem ipsum

freee lorem ipsum

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

lorem ipsum

freee lorem

lorem / lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur, e-Tax lorem ipsum dolor sit amet.

lorem ipsum
shadow: 0 0 1rem rgba(0,0,0,0.1), 0 0.125rem 0.25rem rgba(0,0,0,0.2) / radius: 0.75rem (12px) / Vibes dual shadow
06 / Forms

lorem ipsum dolor

lorem ipsum — border: 1px solid #cccccc, radius: 4px
lorem ipsum — border: #2864f0 (Primary Blue)
lorem — border: #dc1e32 (Danger)
07 / Elevation — Vibes lorem ipsum dolor

Depth & Elevation

Level 0: Flat
lorem, lorem ipsum dolor
Card
0 0 1rem rgba(0,0,0,0.1),
0 0.125rem 0.25rem rgba(0,0,0,0.2)
Floating
0 0 1.5rem rgba(0,0,0,0.1),
0 0.25rem 0.5rem rgba(0,0,0,0.2)
Popup
0 0 2rem rgba(0,0,0,0.1),
0 0.375rem 0.75rem rgba(0,0,0,0.2)
Transition: 0.2s(lorem ipsum dolor)/ 0.3s(lorem ipsum)
08 / Layout — Spacing & Radius

lorem ipsum

Spacing Scale(4px lorem)
XS
4px
S
8px
Base
16px
L
24px
XL
32px
XXL
48px
Border Radius Scale
4px
8px
12px
16px
24px
99rem
Container
Max Width 70rem (1120px)