Design System Preview
KUMON — lorem ipsum dolor sit amet

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum, lorem ipsum dolor, lorem ipsum dolor sit amet. computed style lorem ipsum dolor.

lorem ipsum dolor sit DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Brand
KUMON Blue
#00a9e0
lorem ipsum dolor
CTA Orange
#faaf18
CTA lorem
Secondary Blue
#7dcdf4
lorem / lorem
Subject Colors(lorem ipsum)
lorem / lorem
#00a9e0
Math Blue
lorem
#ff5700
English Orange
lorem
#69be29
Japanese Green
lorem ipsum
#f0ab00
Zunzun Gold
Surface Colors(lorem)
Light Blue
#d0f0ff
lorem ipsum dolor
Warm Beige
#f2f1e6
lorem ipsum dolor
Cool Blue
#e1ecf2
lorem ipsum dolor
Cream Yellow
#fff0be
lorem ipsum
Light Sky
#dcf4ff
lorem ipsum
Subject Tints(lorem ipsum)
lorem Tint
#ffe7db
lorem ipsum dolor sit
lorem Tint
#edffe0
lorem ipsum dolor sit
Text & Semantic
Text Primary
#1e1e1e
lorem ipsum dolor
Background
#ffffff
lorem ipsum
Danger
#ff3f2f
lorem ipsum dolor
Badge Pink
#fa978d
lorem ipsum dolor sit
02 / Typography

lorem ipsum dolor sit

lorem ipsum dolor
44px / 700 / line-height: 1.36 / bg: #00a9e0 / shadow: 0px 6px 0pxlorem ipsum dolor
lorem ipsum dolor sit KUMON lorem 3 lorem ipsum dolor
40px / 700 / line-height: 1.35lorem ipsum
lorem ipsum dolor sit
36px / 700 / line-height: 1.7lorem ipsum dolor
lorem 60 lorem ipsum dolor sit amet consectetur KUMON
34px / 900 / line-height: 1.24lorem ipsum
lorem / lorem lorem lorem lorem ipsum
28-32px / 900 / lorem. lorem ipsum dolor sitlorem ipsum
lorem ipsum dolor sit amet consectetur — Card Title (h3)
20px / 700 / line-height: 1.2lorem ipsum dolor
lorem ipsum dolor — KUMON lorem, lorem ipsum dolor“lorem!”lorem ipsum dolor sit, lorem ipsum, lorem ipsum dolor sit amet consectetur. 50 lorem ipsum dolor sit, lorem 60 lorem ipsum dolor sit amet consectetur. ABCabc 123
16px / 400 / line-height: 1.7 / letter-spacing: normal / palt: loremlorem
lorem ipsum
14px / 700 / bg: #7dcdf4 / radius: 3pxlorem ipsum dolor
03 / Education — lorem ipsum dolor

lorem ipsum dolor sit amet

KUMON lorem ipsum

lorem ipsum dolor, lorem ipsum dolor sit amet, lorem ipsum dolor sit amet“lorem ipsum dolor”lorem, “lorem ipsum dolor!”lorem ipsum dolor sit amet, lorem ipsum dolor sit amet consectetur.

lorem ipsum

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

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

04 / Subject Cards — lorem ipsum

lorem ipsum dolor sit

lorem

lorem / lorem

lorem ipsum dolor sit!lorem ipsum dolor, lorem ipsum dolor sit amet.

lorem / lorem ipsum dolor
lorem

lorem

lorem ipsum dolor sit amet consectetur!E-Pencil lorem ipsum dolor sit amet.

lorem ipsum dolor
lorem

lorem

lorem ipsum dolor sit amet!lorem ipsum dolor sit amet.

lorem ipsum dolor
lorem

lorem ipsum

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

lorem ipsum dolor sit
05 / Buttons

lorem ipsum dolor sit

lorem ipsum dolor sit
Primary CTA (pill, orange)
lorem ipsum dolor
CTA Oval
lorem ipsum dolor
Arrow (white, pill)
lorem / lorem ipsum dolor
Section (light blue, pill)
lorem ipsum dolor
Section + Border
lorem ipsum dolor sit amet
Arrow (white)
lorem ipsum dolor
Arrow (white)
lorem ipsum
Header Badge (#7dcdf4)
lorem ipsum
Nav CTA (orange, small)
06 / Cards — lorem ipsum dolor

lorem / lorem ipsum

0–2 lorem

lorem ipsum dolor

3 lorem

lorem ipsum dolor

lorem

lorem ipsum

lorem

lorem ipsum dolor

lorem

lorem ipsum

lorem 1 / 2 lorem

lorem ipsum

lorem 3 / 4 lorem

lorem ipsum

lorem 5 / 6 lorem

lorem

lorem / lorem

lorem ipsum

lorem / lorem

lorem ipsum

07 / Accordion — lorem ipsum dolor

FAQ

lorem ipsum 1 lorem ipsum dolor sit amet, lorem ipsum dolor?
lorem ipsum dolor sit amet consectetur adipiscing elit.
lorem ipsum dolor sit amet consectetur?
08 / Forms

lorem ipsum dolor

lorem ipsum — radius: 3px, search btn: #faaf18
Pill — radius: 48px, font-weight: 700
lorem ipsum — border: #00a9e0
lorem — border: #ff3f2f
09 / Elevation

Depth & Elevation

Level 0: Flat
lorem(lorem ipsum dolor)
Card Shadow
rgba(0,0,0,0.1) 0px 6px 0px 0px — lorem ipsum dolor sit
Nav Shadow
rgba(239,239,239,0.8) 0px 5px 10px 0px — lorem ipsum dolor
10 / Layout

lorem ipsum dolor

White (#ffffff) lorem ipsum / lorem ipsum
Cool Blue (#e1ecf2) lorem ipsum dolor
Warm Beige (#f2f1e6) lorem ipsum dolor sit
Light Blue (#d0f0ff) lorem ipsum dolor / lorem
Cream Yellow (#fff0be) lorem ipsum dolor