Design System

lorem ipsum,
lorem ipsum.

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

VIEW MORE →
01 / Colors
lorem ipsum dolor
Brand
Brand Red
#bf0023
VIEW MORE lorem / CTA
Dark Nav / Footer
#181d22
lorem / lorem ipsum dolor
Text
Text Primary
#222222
lorem / lorem(lorem)
Text on Dark
#ffffff
lorem ipsum dolor sit amet
Text Secondary
#666666
lorem ipsum dolor(lorem)
Surface & Border
Background
#ffffff
lorem ipsum / lorem ipsum
Background Alt
#f7f7f7
lorem ipsum dolor(lorem)
Border Default
#dddddd
lorem ipsum dolor(lorem)
Card Shadow
lorem ipsum dolor sit amet
rgba(47,60,72,0.03) ±4px 24px 40px
02 / Typography
lorem ipsum dolor sit
CX Platform
90px / weight 400 / line-height 1.0 / letter-spacing -0.02em / font-feature-settings: normallorem ipsum dolor sit(lorem ipsum)
lorem ipsum,
lorem ipsum dolor.
58px / weight 700 / line-height 1.45 / letter-spacing 0.11emHero H1(lorem)
Our Services
21px / weight 700 / line-height 1.0 / letter-spacing 0.067emlorem ipsum dolor sit
lorem ipsum dolor
20px / weight 700 / line-height 1.0 / letter-spacing 0.07emlorem ipsum dolor sit amet
lorem ipsum dolor sit, lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur.
21px / weight 400 / line-height 1.8 / letter-spacing 0.12emBody Lead(lorem ipsum dolor)
CX lorem ipsum dolor KARTE lorem, lorem 1 lorem ipsum dolor sit amet consectetur / lorem, lorem ipsum dolor sit amet consectetur adipiscing. EC lorem, lorem, lorem ipsum dolor sit amet consectetur adipiscing.
14px / weight 400 / line-height 1.9 / letter-spacing 0.1em / font-feature-settings: "tnum"lorem(lorem)
KARTE  |  lorem ipsum dolor  |  lorem ipsum
14px / weight 400〜700 / line-height 1.65 / letter-spacing 0.06em / color #ffffffNav Link(lorem ipsum)
lorem ipsum   lorem ipsum   lorem ipsum dolor sit
12px / weight 400 / line-height 1.65 / letter-spacing 0.07em / font-feature-settings: "palt"Footer Nav
03 / Article — lorem ipsum

CX lorem ipsum dolor sit amet, lorem ipsum dolor

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

lorem CX lorem ipsum dolor sit

lorem ipsum dolor, lorem ipsum dolor sit amet consectetur. lorem ipsum dolor sit amet, “lorem ipsum dolor sit amet consectetur”lorem ipsum dolor sit amet. KARTE lorem ipsum dolor sit amet consectetur, 1 lorem ipsum dolor sit amet consectetur adipiscing elit sed.

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

lorem ipsum dolor sit amet consectetur

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

lorem ipsum dolorlorem ipsum dolor sit →

04 / Buttons & CTA
CTA / lorem ipsum dolor sit
VIEW MORE →
Primary CTA（Text Link Red）
lorem ipsum
Text Link（Plain）
VIEW MORE →
CTA Link Red（on Dark）
lorem ipsum dolor sit
Text Link White（on Dark）
※ Plaid lorem ipsum dolor sit amet consectetur CTA lorem, lorem ipsum dolor sit amet consectetur.
05 / Cards
PRODUCT

KARTE for App

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

VIEW MORE →
PRODUCT

KARTE Datahub

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

VIEW MORE →
CASE STUDY

lorem ipsum: lorem EC lorem ipsum dolor

KARTE lorem, lorem ipsum dolor sit amet consectetur CVR lorem 132% lorem. lorem ipsum dolor sit amet consectetur.

VIEW MORE →
06 / Forms
lorem ipsum dolor(3 lorem)
lorem ipsum — border: #dddddd, radius: 4px, height: 44px
lorem ipsum — border: #222222, box-shadow: rgba(34,34,34,0.12)
lorem ipsum dolor sit amet consectetur adipiscing
lorem — border: #bf0023 (Brand Red), box-shadow: rgba(191,0,35,0.12)
07 / Elevation
Level 0 — Flat
border: 1px solid #dddddd
lorem
Level 1 — Card Shadow
rgba(47,60,72,0.03) -4px 24px 40px 0px,
rgba(47,60,72,0.03) 4px 24px 40px 0px
(lorem ipsum dolor sit amet)
Level 2 — Dropdown
0 8px 24px rgba(47,60,72,0.08)
lorem ipsum dolor / lorem ipsum dolor
Level 3 — Modal
0 16px 48px rgba(47,60,72,0.12)
lorem ipsum / lorem ipsum
08 / Layout
lorem ipsum dolor
Container Max Width 1200px
Card Padding 52px 50px 55px(lorem / lorem / lorem)
Spacing Scale(lorem 8px lorem ipsum)
XS 8px
S 16px
M 24px
L 48px
XL 80px
XXL 120px
Card Grid（3-Column）
Card 1
Card 2
Card 3