lorem ipsum dolor No.1

Design System Preview
Chatwork — lorem ipsum

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
98lorem
lorem ipsum
No.1
lorem ipsum dolor
7lorem
lorem 1 lorem
01 / Colors

lorem ipsum dolor

Brand
Brand Red
#f03748
lorem CTA / lorem ipsum dolor
Link Red
#df1c13
lorem ipsum dolor
Yellow Accent
#ffbe2e
lorem / lorem ipsum
Neutral — Dark Navy Scale
Dark Navy
#13202f
lorem / lorem ipsum
Body Text
#191919
lorem ipsum dolor
White
#ffffff
lorem ipsum / lorem ipsum
Surface & Background
Background
#f5f5f4
lorem ipsum(warm stone)
Surface
#ffffff
lorem ipsum dolor
Surface Gray
#f6f6f6
lorem ipsum dolor
Surface Alt
#f8f8f8
lorem ipsum dolor
Surface Warm
#f7f1e7
lorem ipsum dolor sit
Border
#ebebeb
lorem ipsum / lorem ipsum dolor
Semantic
Danger
#f03748
lorem / Brand Red lorem
Success
#22c55e
lorem / lorem
Warning
#ffbe2e
lorem / Yellow lorem
02 / Typography — Design Tokens

lorem ipsum dolor sit

lorem ipsum 98 lorem
--rise--fontSize-other-large: 48px / 800 / line-height: 1.5 / letter-spacing: 2pxlorem ipsum Display
lorem ipsum dolor No.1 — Headline 1
--rise--fontSize-headline1: 40px (2.5rem) / 700 / line-height: 1.5lorem ipsum dolor sit
lorem ipsum dolor sit amet consectetur — Headline 2
--rise--fontSize-headline2: 32px (2rem) / 700 / line-height: 1.5lorem ipsum dolor sit
lorem ipsum dolor sit — Headline 3
--rise--fontSize-headline3: 24px (1.5rem) / 700 / line-height: 1.5lorem ipsum
lorem ipsum / lorem ipsum / lorem ipsum — Subtitle
--rise--fontSize-subtitle: 20px (1.25rem) / 700 / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. line-height: 1.6 lorem ipsum dolor.
--rise--fontSize-body1: 16px (1rem) / 400 / line-height: 1.6 (base)lorem
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor, lorem ipsum dolor sit.
--rise--fontSize-body1: 16px / 400 / line-height: 1.85 (feature)lorem ipsum
lorem ipsum dolor — lorem ipsum dolor sit amet consectetur. Body 2 (14px)
--rise--fontSize-body2: 14px (.875rem) / 400 / line-height: 1.6lorem / lorem
lorem ipsum dolor — lorem ipsum dolor sit | lorem ipsum | lorem ipsum dolor sit amet
--rise--fontSize-caption: 12px (.75rem) / 400 / line-height: 1.5lorem ipsum dolor
lorem ipsum dolor
CTA Label: 21px / 700 / line-height: 1.3 / white on Brand RedCTA lorem
03 / Content — SaaS lorem ipsum

lorem ipsum dolor sit

lorem ipsum dolor sit amet, Chatwork lorem?

Chatwork lorem, lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur adipiscing elit sed, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolor sit

lorem ipsum dolor No.1 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur adipiscing elit.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary CTA (pill, 21px, 700)
lorem ipsum dolor
Primary (16px, 700)
lorem ipsum dolor
Secondary Outline
lorem ipsum
Login Link (text)
Badge
lorem ipsum
Highlight Badge (yellow)
NEW
Brand Badge (red)
05 / Cards

lorem ipsum dolor sit

Industry Cards (radius: 5px)
🏢

IT / lorem ipsum

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

🏗

lorem / lorem ipsum

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

🏫

lorem / lorem ipsum

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

Resource Cards (radius: 16px)
📊

Chatwork lorem ipsum dolor

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

lorem ipsum dolor →
📝

lorem ipsum lorem

lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor →
📱

lorem ipsum dolor sit

lorem ipsum dolor sit Chatwork lorem ipsum dolor sit.

lorem ipsum dolor →
06 / Forms

lorem ipsum dolor

lorem ipsum — border: #ebebeb, radius: 5px, height: 44px
lorem ipsum — border: #f03748 (Brand Red)
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #f03748 (Danger)
07 / Elevation — Depth & Surface Contrast

Depth & Elevation

Level 0: Flat
shadow: none (lorem)
Level 1: Hover
0 2px 8px rgba(0,0,0,.06)
Level 2: Dropdown
0 4px 16px rgba(0,0,0,.08)
Level 3: Modal
0 8px 32px rgba(0,0,0,.12)
Surface Contrast Hierarchy

Chatwork lorem box-shadow lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit.

Background

#f5f5f4 (warm stone)

Surface

#ffffff

Surface Warm

#f7f1e7

Dark Navy

#13202f (footer)

08 / Layout — Spacing & Grid

lorem ipsum & lorem ipsum dolor

Spacing Scale (8px grid)
4px
XS
8px
S
16px
M
24px
L
48px
XL
80px
XXL
Border Radius Scale
4px
Small
5px
Medium
16px
Large
26px
Pill
Container Width
Max Width 1200px
Content Area ~940px
Article / Form ~700px
Grid Demo (3-column, gap: 24px)
Column 1
Column 2
Column 3
grid-template-columns: repeat(3, 1fr) / gap: 24px