All tools
Design System v0.7

Tools, made like
one product

The interface is monotone black. Every tool owns one colour and one character.

01 / 06

Palette

1 brand · 12 app stops
Kalsentic Orange
#FF6B1A
255, 107, 26
brand only — never an app
Watermelon
#FF5E54
255, 94, 84
p01
Hot Magenta
#FF7BC0
255, 123, 192
p02
Lilac Bloom
#C9A7F5
201, 167, 245
p03
Amethyst Bellflower
#7B81FF
123, 129, 255
p04
Azure Cornflower
#1283EB
18, 131, 235
p05
Powder Sky
#A8D8F0
168, 216, 240
p06
Mint Lagoon
#22C7AE
34, 199, 174
p07
Light Malachite
#2BBF5D
43, 191, 93
p08
Moss Olive
#A8BC3A
168, 188, 58
p09
Lemon and Banana
#FFE459
255, 228, 89
p10
Sand Clay
#E8C89A
232, 200, 154
p11
Creamy Milk
#F8F3EC
248, 243, 236
p12
Pure Black
#000000
0, 0, 0
page
Signal Black
#121212
18, 18, 18
surface / hover

The ring rotates through hue, not category.

02 / 06

App Colour Map

12 stops · 18 tools
001 Percentage Calculator Money Watermelon #FF5E54
002 Character Counter Text Azure Cornflower #1283EB
003 D-Day Calculator Time Lemon and Banana #FFE459
004 Loan Interest Money Light Malachite #2BBF5D
005 Shorts Safe Zone Visual Amethyst Bellflower #7B81FF
006 Take-Home Pay Money Sand Clay #E8C89A
007 Ladder Game Random Hot Magenta #FF7BC0
008 Thumbnail Preview Visual Mint Lagoon #22C7AE
009 Korean Age Time Lilac Bloom #C9A7F5
010 AI Shot Timing Time Moss Olive #A8BC3A
011 Image Resize Visual Powder Sky #A8D8F0
012 Team Divider Random Sand Clay #E8C89A
013 Currency Converter Money Lemon and Banana #FFE459
014 Roulette Spinner Random Watermelon #FF5E54
015 Horse Race Random Light Malachite #2BBF5D
016 Random Number Random Azure Cornflower #1283EB
017 Winner Draw Random Amethyst Bellflower #7B81FF
018 Pomodoro Timer Time Watermelon #FF5E54

One tool, one colour.

Colour no longer encodes category.

03 / 06

Character Marks

one per tool

One flat character per tool.

Percent
Coin
Dome
Lines
Stack
Hex
Frame
Arrow
Drop
Clock
Asterisk
Ladder
Quatrefoil
Triangle
Wheel
Flag
Dice
Ticket
Tomato

Nineteen bodies, eighteen tools.

Characters are drawn, system icons are not.

04 / 06

Typography

Archivo · IBM Plex Mono · Pretendard
Display — Archivo 800 · fitted to the container · tracking −5.5%
Light Tools
Band name — Archivo 700 · clamp(21 → 50px) · black on fill
Percentage Calculator
GNB — Archivo 800 · 17px · uppercase
Home · Apps · System
Micro label — IBM Plex Mono 500 · 12px · tracking +19%
Free Web Tools · No Install · No Account
Korean — Pretendard 800 / 500 · never uppercase, never mono
모두를 위한 가볍고 필요한 도구들

Scale

--t-micro12pxmono labels
--t-meta13pxcaptions
--t-body16pxbody
--t-lead17–22pxlead
--t-h323pxcard titles
--t-h223–36pxsection titles
--t-num-s22pxitem numbers
--t-num-l36–64pxsection numbers

Korean never goes uppercase.

05 / 06

Components

2px lines only
Solid Ghost → Apps
dark surface · border 2px rgba(248,243,236,.28) · radius pill · no fill until hover

Mega menu tile

001 Percentage Calculator 005 Shorts Safe Zone 007 Ladder Game
152 × 152 · radius 18px · gap 2px · hover scale 1.045 + 2px ring

On a tool surface

Tabs · segmented
Actions
Amount input · unit · presets
Annual salary
KRW
Chip input
가온✕ 나래✕ 다솜✕
Drop zone
Drop an image here or click to choose · nothing is uploaded
Result panel
Monthly take-home 3,412,880
82%18%
Gross4,166,666
Deducted753,786
Rate18.1%
Table
Item Rate Amount (KRW)
Pension4.5%187,500
Health3.545%147,708
Employment0.9%37,500
light surface #F8F3EC · inner card #F0E8DC · result panel takes the tool colour

Line weight

2px · Dim Structure that recedes.
2px · Mid Components at rest.
2px · Full Focused Section rules and focus.

One thickness. Three strengths.

06 / 06

Scale & Slide

motion foundation

Surfaces move in two ways and no more.

Scale

A surface grows from the element that was touched.

240ms · cubic-bezier(.65, 0, .2, 1.06)

Slide

A surface is revealed along one edge.

220ms · cubic-bezier(.65, 0, .2, 1.06)

Colour handoff

The two colours meet directly.

220ms · cubic-bezier(.65, 0, .2, 1.06)

Two surfaces are never half-transparent at once.

Nothing runs longer than 250 milliseconds.