lorem ipsum dolor sit amet,
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
01 / Colors

lorem ipsum dolor

Brand
STUDIO Blue
#0275fd
lorem ipsum dolor / lorem ipsum
Light Blue BG
#eef9ff
lorem ipsum dolor
Text
Text Primary
#222222
lorem ipsum dolor(lorem)
Text Feature
#333333
lorem ipsum dolor
Text Secondary
#707070
lorem ipsum dolor / lorem
Text on Dark
#f7f7f7
lorem ipsum dolor sit
Surface & Background
Background
#ffffff
lorem ipsum
Surface Light
#f7f7f7
lorem / lorem ipsum dolor
CTA Surface
#222222
CTA lorem ipsum
Light Blue
#eef9ff
lorem ipsum dolor
02 / Typography

lorem ipsum dolor sit

Inter + Noto Sans JP
lorem ipsum dolor sit amet, lorem ipsum.
35.04px / 600 / line-height: 42.048px (x1.2) / ls: normalHero h1
lorem, lorem Studio lorem ipsum.
36px / 600 / line-height: 45px (x1.25) / ls: normalSection h2 / h3
lorem ipsum dolor Web lorem ipsum dolor
24px / 600 / line-height: 36px (x1.5) / ls: normalNews h3
lorem ipsum dolor sit, lorem ipsum dolor sit amet.
15.04px / 600 / line-height: 15.04px / ls: -0.3008pxSub h2
lorem ipsum dolor Web lorem ipsum dolor. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing elit sed. lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.
15.04px / 400 / line-height: 25.568px (x1.7) / ls: normal / color: #707070Body
lorem ipsum dolor  lorem  lorem  lorem ipsum
14px / 500 / line-height: 14px / ls: -0.28px / color: #222Nav
lorem ipsum dolor
14.08px / 500 / line-height: 21.12px / ls: -0.2816pxH4 Company
lorem ipsum dolor
13px / 500 / line-height: 15.6px / ls: -0.26px / color: #f7f7f7 on #222CTA Label
lorem ipsum dolor
12px / 600 / line-height: 16.8px / ls: -0.48px / color: #f7f7f7 on #222Header CTA
Gothic MB101 B (Morisawa)
lorem ipsum dolor
11px / 500 / font: Gothic MB101 B JIS2004Business Label
* lorem ipsum dolor. lorem ipsum Hiragino Kaku Gothic ProN lorem
IBM Plex Mono
FOR BUSINESS
11px / 500 / ls: -0.44px / font: IBM Plex MonoMono Label
DESIGN SYSTEM — STUDIO.DESIGN/JA
IBM Plex Mono / lorem ipsum dolor / lorem ipsum dolor sit
Instrument Serif (CSS lorem ipsum dolor)
Design your website
Instrument Serif / CSS lorem --s-font-b18a84da lorem. lorem ipsum dolor
03 / Composition

lorem ipsum dolor

lorem ipsum dolor Web lorem ipsum dolor

STUDIO lorem, lorem ipsum dolor sit amet consectetur adipiscing Web lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor&lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur adipiscing.

lorem ipsum dolor, lorem ipsum dolor.

lorem ipsum dolor sit amet consectetur, lorem STUDIO lorem ipsum dolor. lorem ipsum dolor sit amet consectetur adipiscing. lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. STUDIO Blue (#0275fd) lorem ipsum dolor sit amet consectetur.

Inter lorem Noto Sans JP lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur. ABCabc 123. lorem letter-spacing(-0.28px)lorem ipsum dolor sit STUDIO lorem ipsum. palt lorem ipsum dolor sit.

04 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor
Primary Pill (r:500px)
lorem ipsum
Secondary Rect (r:4px)
lorem ipsum dolor
Blue Pill (r:500px)
lorem ipsum
Ghost
lorem ipsum dolor
Header CTA (12px/600)
lorem ipsum dolor
Hero CTA (13px/500)
05 / Cards

lorem ipsum dolor sit

lorem ipsum dolor sit amet

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

lorem ipsum →

lorem ipsum dolor sit

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

lorem ipsum →

lorem ipsum dolor sit amet consectetur

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

default / border: #ddd, radius: 4px
focus / border: #0275fd (STUDIO Blue)
07 / Letter Spacing

lorem letter-spacing lorem

STUDIO lorem ipsum dolor sit amet letter-spacing lorem ipsum. Apple lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.

lorem ipsum dolor　lorem　lorem　lorem ipsum
letter-spacing: normal (0px) — lorem
lorem ipsum dolor　lorem　lorem　lorem ipsum
letter-spacing: -0.28px — Nav (14px/500)
lorem ipsum dolor
letter-spacing: -0.48px — Header CTA (12px/600)
FOR BUSINESS
letter-spacing: -0.44px — IBM Plex Mono (11px/500)
lorem ipsum dolor sit, lorem ipsum dolor sit amet.
letter-spacing: -0.3008px — Sub H2 (15.04px/600)
08 / Elevation

Depth & Elevation

Level 0: Flat
lorem. lorem ipsum dolor sit amet
Level 1
0 2px 8px rgba(0,0,0,0.08)
Level 2
0 4px 16px rgba(0,0,0,0.12)
Focus Ring
#0275fd (STUDIO Blue)
09 / Spacing

lorem ipsum dolor

4
8
16
24
32
48
64
80