SYMPLE Design System
KOOne system
for products that care
SDS gathers the color, typography, component, motion, and voice tokens that run through SYMPLE’s web and products (KKEBI, Duck’s Dream). Each product has its own character, but they look and sound consistent on one shared foundation.
01 · Brand structure
SYMPLE endorses KKEBI and Duck’s Dream. The company carries trust; each service carries its own promise.
SYMPLE
Company (Endorser)
“A mental-health-tech company that understands change first”
KKEBI
B2B service
“Before burnout arrives — through the voice”
Duck’s Dream
B2C service
“Leave the worry to the duck (a pond world)”
02 · Color
One accent per surface over neutral gray. Hierarchy comes from surface tone, not shadows.
Accents — the product’s personality
SYMPLE / Team
#00bf7f
Company · default accent
KKEBI
#fa5454
KKEBI (B2B)
Duck’s Dream
#779966
Duck (B2C)
Neutral · text
Page BG
#f4f5f7
BG 2
#eceef1
Surface
#ffffff
Surface 2
#f1f3f5
Dark
#111111
Text 1
#15161a
Text 2
#5b5e66
Text 3
#989ba3
03 · Typography
Inter + Noto Sans KR for text, Instrument Serif for editorial accents. Sizes scale fluidly with the viewport (clamp).
Display
clamp(36px, 4.8vw, 58px)
Understand change first
H1
clamp(30px, 3.8vw, 44px)
Recovery before you break down
H2
clamp(24px, 3vw, 36px)
Signals seen in the voice
H3
clamp(19px, 2.3vw, 26px)
Personal baseline
H4
clamp(16px, 1.8vw, 20px)
Mind check-in
Body LG
clamp(15px, 1.4vw, 17px)
People do not break down suddenly, one day.
Body
15px
Stress accumulates within the rhythm of daily life.
Small
13px
Source · meta information
XS
11px
LABEL · CAPTION
04 · Radius
sm
8px
md
12px
lg
16px
xl
20px
2xl
24px
full
9999px
05 · Spacing
Three steps: element → block → section. All clamp to the viewport.
06 · Components
Primitives derived from the same tokens. Only the accent changes per product.
Buttons
Chips
Card
Burnout doesn’t arrive overnight
How to notice the change that builds within daily rhythm, earlier.
07 · Motion
Default easing cubic-bezier(.22, 1, .36, 1) · durations fast 200ms / normal 400ms / slow 600ms. Never flashy — just enough to notice change gently.
08 · Voice & copy
The copy formula
Feature → ask “so what?” twice to reach the customer’s moment. The first line starts with the moment a person lives, not the spec. Data (evidence) comes after.
Tone
Calm and honest, a little warmer. No embellishment, no overstatement. The core philosophy: “recovery before you break down.”