lorem ipsum dolor,
lorem ipsum dolor sit

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

lorem ipsum dolor → lorem ipsum dolor sit →

Brand Gradient: linear-gradient(90deg, #ebeefa, #fde3ed)

Colors

lorem ipsum dolor

Brand
Brand Blue
#3959cc
CTA / lorem / lorem ipsum
Accent Pink
#e34b83
lorem ipsum dolor / lorem
Surface Lavender
#e4e8f6
lorem / lorem ipsum
Gradient
#ebeefa → #fde3ed
lorem ipsum dolor sit amet
Text
Text Primary
#20242c
lorem / lorem ipsum
Text Secondary
#3d4454
lorem / lorem / lorem
Text Tertiary
#6d727e
lorem / lorem ipsum
Text Default
#333333
body lorem
Semantic
Success
#16a34a
lorem(lorem)
Danger
#dc2626
lorem(lorem)
Warning
#d97706
lorem(lorem)
Surface & Border
Background
#ffffff
lorem ipsum
Surface Light
#f7f7f7
lorem ipsum dolor
Surface Footer
#f9f9f9
lorem ipsum
Border
#9ca0a8
Outline CTA / lorem
Footer Dark
#3d4454
Copyright lorem
Typography

lorem ipsum dolor sit

lorem ipsum dolor sit
A1 lorem ipsum B (Zen Maru Gothic) / 72px / 400 / line-height: 1.4 / letter-spacing: 0.05emlorem ipsum h1
News
Open Sans / 24px / 700 / line-height: 1.4 / color: #e34b83lorem ipsum dolor h2
lorem Ubie lorem, lorem ipsum dolor sit amet consectetur adipiscing elit
A1 lorem ipsum M (Zen Maru Gothic) / 20px / 400 / line-height: 1.6 / letter-spacing: 0.05emlorem ipsum p
lorem ipsum dolor sit
Noto Sans JP / 13px / 700 / line-height: 1.7 / letter-spacing: 0.05emlorem ipsum h3
Ubie lorem ipsum
Noto Sans JP / 14px / 900 / line-height: 1.2 / letter-spacing: 0.05emlorem ipsum dolor p
lorem ipsum dolor -- lorem ipsum dolor sit amet consectetur. line-height: 1.8 lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor letter-spacing: 0.05em lorem ipsum.
Noto Sans JP / 14px / 400 / line-height: 1.8 / letter-spacing: 0.05emlorem p
2026/06/04
Noto Sans JP / 15px / 400 / line-height: 1.4 / color: #6d727elorem
lorem ipsum
Noto Sans JP / 12px / 700 / line-height: 1.4 / color: #fffffflorem ipsum CTA
media lorem ipsum dolor Media
Noto Sans JP / 12px / 400 / bg: #e4e8f6 / radius: 16px / padding: 6px 8pxlorem ipsum dolor
Service

lorem ipsum dolor sit amet consectetur

AI lorem, lorem
lorem ipsum dolor

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

lorem ipsum dolor“lorem”

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

lorem ipsum dolor AI lorem

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

Buttons

lorem ipsum dolor sit

lorem ipsum dolor →
Primary CTA (#3959cc, r:8px)
lorem ipsum
Accent CTA (#e34b83, r:8px)
lorem ipsum dolor sit →
Outline (border #9ca0a8, r:12px)
lorem ipsum dolor sit →
Text Button (r:4px)
media
Tag (#e4e8f6, r:16px)
lorem ipsum dolor
Tag (lorem)
Media
Tag (lorem)
Cards

lorem ipsum dolor sit

media 2026/06/04

Ubie, lorem AI lorem ipsum dolor sit amet consectetur

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

lorem ipsum →
lorem ipsum dolor 2026/05/20

lorem ipsum dolor sit amet consectetur adipiscing

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

lorem ipsum →
Media 2026/05/10

AI lorem ipsum dolor 1,700 lorem ipsum dolor

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

lorem ipsum →
Forms

lorem ipsum dolor

lorem ipsum -- border: #9ca0a8, radius: 8px
lorem ipsum -- border: #3959cc (Brand Blue)
lorem -- border: #dc2626 (Danger)
Elevation

Depth & Elevation

Level 0: Flat
lorem(lorem ipsum)
Elevation 1
lorem ipsum dolor sit
Header
rgba(0,0,0,0.15) 0 2px 10px 2px
Elevation 2
lorem ipsum dolor
Elevation 3
lorem ipsum / lorem ipsum
Focus Ring
#3959cc (Brand Blue)
Layout

lorem ipsum dolor sit amet consectetur

Content Widths

Max Container 1200px
Content Area 940px
Article Body 620px

Spacing Scale (8px Grid)

4px
8px
16px
24px
48px
80px
100px
140px

Border Radius Scale

4px
8px
12px
16px

lorem ipsum

Ubie lorem ipsum lorem ipsum dolor Ubie lorem ipsum dolor sit lorem ipsum

lorem ipsum

lorem ipsum lorem ipsum dolor lorem ipsum dolor

lorem ipsum

lorem ipsum Ubie lorem lorem ipsum

lorem ipsum

lorem ipsum dolor sit lorem ipsum dolor sit lorem ipsum
Generated from ubie.life DESIGN.md -- awesome-design-md-jp / computed style lorem(2026-06-21)