lorem ipsum dolor lorem ipsum

lorem ipsum
lorem ipsum

  • Noto Sans JP ＋ lorem ipsum dolor 2 lorem
  • lorem ipsum dolor sit amet 1 lorem ipsum
  • lorem ipsum dolor sit amet consectetur
lorem ipsum dolor lorem ipsum
hero visual

computed style lorem ipsum dolor sit amet consectetur

* 2026-08-24 lorem. LP lorem ＋ /lp/function/
01 / COLORS

lorem ipsum 2 lorem ＋ lorem ipsum 1 lorem

Brand — lorem ipsum dolor sit amet consectetur
UPSIDER Orange
linear-gradient(90deg, #f5833e 0%, #fead48 100%)
lorem CTA lorem.background-image lorem(background-color lorem ipsum dolor)
Grad Start
#f5833e
lorem ipsum dolor sit
Grad End
#fead48
lorem ipsum dolor sit
Ink — lorem 3 lorem
Ink
#1f1f1f
body lorem ipsum / lorem / lorem ipsum dolor
Ink Link
#1f2937
lorem ipsum / lorem ipsum dolor
Ink Button
#27272a
lorem CTA lorem ipsum dolor
Black
#000000
lorem ipsum dolor sit amet
Gray Dark
#373737
lorem ipsum dolor sit
Gray & Surface
Gray Chip
#6b6b6b
lorem ipsum dolor(lorem)
Gray Mid
#9c9c9c
lorem ipsum dolor / lorem ipsum dolor sit
Surface
#f3f3f3
lorem ipsum dolor sit
Background
#ffffff
lorem ipsum
Border
rgba(0,0,0,0.12)
lorem ipsum dolor sit amet
Shadow
rgb(203,203,203)
lorem ipsumlorem. rgba lorem ipsum
Dark Section — lorem ipsum dolor
lorem ipsum 2 lorem 108.58 lorem ipsum dolor
linear-gradient(108.58deg, #000 0 49.99%, #1f1f1f 49.99% 100%)
02 / TYPOGRAPHY

lorem ipsum Noto Sans JP, lorem ipsum dolor

lorem ipsum dolor
lorem ipsum
64px / 700 / line-height: 83.2px (1.3) / letter-spacing: 2.56px (0.04em) ／ "Noto Sans JP"h1 — lorem ipsum dolor sit amet
lorem ipsum dolor sit amet
48px / 700 / line-height: 72px (1.5) / letter-spacing: normal ／ "Noto Sans JP", sans-serifh2
lorem ipsum dolor sit amet consectetur
36px / 700 / line-height: 54px (1.5)h2(lorem ipsum dolor)
lorem ipsum dolor sit amet consectetur
36px / 400 / line-height: 54px (1.5) ／ lorem ipsum —lorem ipsum dolor sit amet consecteturh3
lorem 10 lorem ipsum dolor
30px / 400 / line-height: 67.5px (2.25) — 1 lorem ipsum dolor sit ameth3
10 lorem ipsum dolor sit amet consectetur*
30px / 700 / line-height: 45px (1.5)lorem
lorem ipsum dolor sit amet consectetur adipiscing.
24px / 700 / line-height: 36px (1.5)lorem(lorem)
Web lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit. lorem ipsum dolor / lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing elit.
16px / 400 / line-height: 28px (1.75) ／ lorem ipsum dolor sitlorem
lorem ipsum ／ lorem ipsum dolor ／ lorem ipsum dolor ／ lorem ipsum
14.4px / 400 / line-height: 21.6px (1.5) / color: #1f2937lorem ipsum dolor
STEP01
14px / 700 / line-height: 21px (1.5) ／ Inter, sans-seriflorem ipsum dolor
* lorem ipsum dolor sit amet consectetur adipiscing elit sed
12px / 400 / line-height: 18px (1.5) / color: #9c9c9clorem
font-family(lorem)
loremlorem
lorem ipsum dolor h1"Noto Sans JP" ← generic family lorem ipsum. lorem ipsum, sans-serif lorem ipsum
lorem ipsum dolor / CTA"Noto Sans JP", sans-serif
lorem / 2 lorem ipsumlorem ipsum dolor, YuGothic, lorem ipsum, "Yu Gothic", "lorem ipsum dolor ProN W3", "Hiragino Kaku Gothic ProN", Arial, lorem ipsum, Meiryo, sans-serif
lorem ipsumInter, sans-serif

※ Noto Sans JP lorem Inter lorem ipsum dolor sit ametlorem, Google Fonts lorem ipsum dolor sit. lorem ipsum dolor sit OS lorem ipsum dolor sit, lorem ipsum dolor sit amet.
※ font-feature-settings lorem ipsumnormal。palt lorem ipsum(“lorem 10 lorem”lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur).

UPSIDER lorem ipsum
lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit 3 lorem ipsum dolor sit amet consectetur

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

lorem ipsum
04 / BUTTONS

radius lorem ipsum dolor sit, lorem ipsum

lorem ipsum
Primary(lorem ipsum)
radius 20px / 16px / shadow lorem
lorem ipsum
Primary(lorem ipsum)
radius 30px / 20px
0 5px 15px rgb(203,203,203)
lorem ipsum
Primary(lorem)
radius 100px / 24px
0 0 24px rgb(0,0,0)
lorem ipsum dolor
Secondary
lorem ＋ 1px solid rgba(0,0,0,.12)
radius 20px / lorem #1f2937
lorem ipsum dolor
Tertiary
lorem / lorem ＋ lorem
radius 30px / 20px
lorem ipsum
More
radius 100px / 16px
0 4px 24px rgb(203,203,203)
Chips ＆ Dots
lorem ipsum lorem ipsum dolor lorem ipsum dolor #6b6b6b / lorem 12px / radius 100px / padding 4px 16px
active #373737 ／ lorem ipsum dolor #9c9c9c ／ radius 50%
CTA Bar(lorem)
lorem ipsum dolor sit amet consectetur lorem ipsum dolor lorem ipsum
05 / CARDS

lorem ipsum — lorem ipsum dolor sit amet

lorem

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

UPSIDER lorem

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

Steps
STEP01

lorem ipsum

Web lorem ipsum dolor sit amet consectetur adipiscing elit sed.

STEP02

lorem

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

STEP03

lorem ipsum

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

Case

lorem ipsum SODA

lorem lorem ipsum

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

lorem ipsum
06 / FORMS

lorem ipsum dolor sit

Default — border lorem / lorem 1px rgba(0,0,0,.12) / padding 12.5px 16px 12.5px 0 / radius 0
Focus — lorem #f5833e lorem
lorem ipsum dolor.
Error — lorem #f5833e ＋ lorem ipsum dolor
07 / ELEVATION

lorem ipsum dolor sit amet

Level 0
none — lorem / lorem ipsum
Level 1
0 5px 15px rgb(203,203,203)
Level 2
0 4px 24px rgb(203,203,203)
Level 3
0 0 24px rgb(0,0,0)

lorem ipsumlorem ipsumrgb(203,203,203)（rgba lorem ipsum). lorem CTA lorem ipsum dolor. lorem ipsum dolor sit amet consectetur.

08 / LAYOUT

Spacing ／ Radius ／ Container

Spacing Scale
XS 4
S 16
M 24
L 64
XL 120
XXL 160
Radius
loremlorem
0pxlorem, lorem, lorem ipsum
20pxlorem ipsum dolor(Primary / Secondary)
30pxlorem ipsum dolor
50%lorem ipsum dolor sit
100pxlorem CTA, lorem, “lorem ipsum”
Container / Grid / Breakpoints
loremlorem
Max Width1200px / padding-x 16px
lorem ipsumlorem ipsum / lorem ipsum dolor 2 lorem
lorem ipsum dolorlorem padding160px
Mobile≤ 767px — 1 lorem. lorem ipsum dolor
Tablet768–1023px — lorem ipsum dolor sit
Desktop≥ 1024px — lorem ipsum 2 lorem ＋ lorem ipsum