Design System Preview

lorem ipsum
lorem ipsum dolor

DESIGN.md lorem ipsum dolor sit amet consectetur adipiscing. Koburina Gothic(TypeSquare)lorem ipsum dolor Zen Kaku Gothic New lorem. lorem ipsum palt lorem, lorem ipsum dolor sit.

lorem ipsum dolor DESIGN.md lorem
01 / Colors

lorem ipsum dolor

Primary & Text
Primary
#000000
--color-primary
Dark Gray
#32322e
--color-darkgry / lorem ipsum dolor(lorem ipsum dolor)
Gray
#676767
--color-gry / lorem ipsum dolor
Gray 2
#828181
--color-gry2 / lorem ipsum dolor
Dark CTA
#333333
lorem ipsum dolor CTA lorem
Blue / Link
Strong Blue
#0277c3
--color-strong-blue / lorem / CTA
Hover Blue
#0860a8
--color-hover / lorem ipsum dolor
Sea Blue
#287fcc
--color-sea-blue
Accent / Service Category
Brilliant Azure
#2da1d6
--color-brilliant-azure / lorem ipsum
Moderate Purple
#8b6cc6
--color-moderate-purple / lorem ipsum
Light Violet
#b47fd9
--color-light-violet / lorem ipsum
SDGs Yellow
#fee101
SDGs / lorem ipsum dolor
Surface & Border
Page Background
#ffffff
lorem ipsum
Warm Surface
#f7f6f4
lorem ipsum dolor(lorem ipsum dolor)
Main Heading BG
#f5f5f5
--bg-mainHeading
Breadcrumb BG
#f3f7fb
--bg-breadcrumb
Menu BG
#ececec
--bg-menu
Light Gray
#cccccc
--color-lightgry / lorem ipsum
Border Default
#707070
--bdr-default
Tag BG
#a9a9a9
--bg-tag
02 / Typography — lorem

lorem ipsum dolor sit

Display English Heading
Roboto / 36px / 600 / line-height: 1.11 / ls: 0.05emlorem ipsum dolor sit amet
lorem ipsum
Zen Kaku Gothic New / 64px / 300 / line-height: 1.34 / ls: 0.1em / palt: loremlorem ipsum dolor sit amet consectetur
Section Heading English
Roboto / 36px / 700 / line-height: 1.11 / ls: 0.05emlorem ipsum dolor sit
lorem ipsum dolor sit
24px / 600 / line-height: ~0.83 / palt: loremlorem ipsum dolor
lorem ipsum dolor — Emphasis
18px / 600 / line-height: ~1.11 / palt: lorem
lorem ipsum dolor — lorem ipsum“lorem ipsum”lorem ipsum dolor sit amet consectetur, lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit sed. line-height 1.25 lorem ipsum dolor sit amet consectetur adipiscing.
16px / 400 / line-height: 1.25 / palt: loremlorem ipsum dolor(lorem)
lorem ipsum dolor CTA lorem ipsum — lorem letter-spacing lorem line-height lorem ipsum dolor sit amet. lorem ipsum dolor sit amet consectetur adipiscing elit sed.
16px / 400 / line-height: 1.7 / ls: 0.1em / palt: loremlorem ipsum dolor CTA
Brand Page English UI — Inter 14px 600
Inter / 14px / 600 / ls: 0.08emlorem ipsum dolor sit UI
03 / Article — lorem ipsum

lorem ipsum dolor sit amet consectetur

lorem EdTech lorem ipsum dolor

lorem ipsum“lorem ipsum”lorem ipsum, lorem ipsum dolor sit amet

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

lorem ipsum dolor sit amet

lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur adipiscing. lorem, lorem ipsum dolor“lorem ipsum dolor sit”lorem ipsum dolor sit amet.lorem ipsumlorem, lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor.

2024 lorem ipsum dolor sit, lorem ipsum dolor sit amet consecteturlorem ipsum dolor sit 23%lorem. lorem, lorem / lorem ipsum dolor sit amet consectetur adipiscing. ABCabc 123

lorem ipsum dolor sit amet consectetur

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

04 / Buttons

lorem ipsum dolor sit

Brand Page — Pill
lorem ipsum dolor
Primary Pill
bg: #333 / radius: 40px / ls: 0.1em
lorem ipsum
Outline Pill
bg: #fff / radius: 40px
SCROLL ↓
Scroll CTA
Inter 14px / 600 / radius: 30px
Functional
# lorem ipsum dolor
Tag Filter
radius: 12px / border: rgba(51,51,51,0.1)
lorem ipsum dolor →
Text Link
--color-strong-blue
SDGs lorem ipsum dolor
SDGs Accent
bg: #fee101 / radius: 30px
Service Category CTA
lorem ipsum dolor
Strong Blue
#0277c3
lorem / lorem
Moderate Purple
#8b6cc6
lorem / lorem
Brilliant Azure
#2da1d6
lorem / lorem ipsum
Light Violet
#b47fd9
05 / Cards

lorem ipsum dolor sit

Image Placeholder
lorem

lorem ipsum dolor“lorem ipsum dolor”lorem

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

lorem ipsum →
Image Placeholder
lorem

lorem ipsum“lorem ipsum”lorem ipsum dolor sit amet consectetur

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

lorem ipsum →
Image Placeholder
lorem

“lorem ipsum”lorem ipsum, lorem / lorem / lorem ipsum

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

lorem ipsum →
06 / Forms

lorem ipsum dolor

lorem ipsum dolor
lorem ipsum — border: #cccccc / radius: 4px
lorem ipsum — border: #0277c3 (--color-strong-blue)
lorem ipsum dolor sit amet consectetur
lorem — border: #c0392b
lorem ipsum / lorem ipsum dolor
lorem ipsum dolor sit amet consectetur
07 / Elevation

Depth & Elevation

Level 0: Flat
lorem, border: 1px solid #cccccc
Elevation 1
lorem / lorem ipsum
0px 2px 4px rgba(0,0,0,0.08)
Elevation 2
lorem / lorem ipsum dolor
0px 4px 12px rgba(0,0,0,0.10)
Elevation 3
lorem ipsum / lorem ipsum
0px 8px 24px rgba(0,0,0,0.14)
Focus Ring
border: #0277c3
box-shadow: 0 0 0 3px rgba(2,119,195,0.15)
08 / Layout

lorem ipsum & lorem ipsum dolor

Header
Header Height 100px (--header-height)
100px
Content Width
Max Content 1080px
Article Body 720px
Form Area 400px
Line Height
1.25
lorem ipsum dolor(lorem)
1.4
--line-height-s
1.6
--line-height-m
Font Feature
palt: ON(lorem ipsum dolor)
“lorem”lorem“lorem”lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.
palt: OFF(lorem)
“lorem”lorem“lorem”lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing.