Design System

Korean Hanok

Jeong and yeobaek. The warmth of emotional connection balanced with the beauty of embracing empty space. Traditional Korean aesthetics meet modern design.

01

Obangsaek - Five Direction Colors

Color Palette

Obangsaek represents the five cardinal directions and elements of Korean cosmology. Warm earth tones and hanji paper colors complete the natural palette.

Obangsaek - Traditional Colors

South / Fire Red Jeoksaek #B8342A
East / Wood Blue Cheongsaek #1E4A7C
Center / Earth Yellow Hwangsaek #E6B325
West / Metal White Baeksaek #F5F3EE
North / Water Black Huksaek #1C1915

Ogansaek - Intermediate Colors

Green Nokssaek #3D6B4F
Purple Jasaek #5B3E6B
Teal Byeokrok #2D5A5A

Earth and Hanji Tones

Earth Dark Heuk #3D352B
Earth Warm Hwangto #6B5B4D
Wood Namu #6B4F3A
Hanji Cream Hanji #FAF7F0
Hanji Natural Chanho #EDE5D3

"In Korean aesthetics, colors are not mere decoration but carry the harmony of heaven and earth, connecting the five directions with the five elements."

Traditional Korean Philosophy

02

Typography

Typography

Noto Serif KR honors the elegance of Hangul with clean, harmonious letterforms that flow naturally like brush strokes on hanji paper.

Display

56px / Light / 3%

Aa

Heading 1

40px / Light / 3%

Harmony

Heading 2

30px / Regular / 2%

Warmth and Balance

Heading 3

20px / Medium / 1%

Natural Beauty

Body

16px / Regular / 0%

The hanok breathes with the seasons, its wooden beams expanding and contracting, its ondol floor radiating gentle warmth in winter.

Small

14px / Regular / 0%

Supporting text provides context and additional detail with understated elegance.

Label

12px / Medium / 12%

Form Labels and Navigation

03

Yeobaek - Embracing Empty Space

Spacing

Yeobaek is the Korean philosophy of embracing empty space. Unlike Western fear of emptiness, yeobaek celebrates the breathing room that brings harmony and peace.

Space is not absence but presence - it gives room for connection and contemplation

4px
whisper
8px
breath
16px
pause
24px
rest
32px
moment
48px
reflection
64px
stillness
96px
yeobaek

04

Buttons

Buttons

Buttons invite interaction with warmth. Like the welcoming entrance of a hanok, they guide visitors with subtle color and gentle transitions.

Button States

Rest State

Hover State

05

Form Elements

Forms

Form elements are crafted with the texture of hanji paper, providing a natural, comfortable surface for user input.

06

Cards with Changsalmun Patterns

Cards

Cards echo the structure of hanok spaces - enclosed yet connected, with the distinctive lattice window patterns (changsalmun) that filter light beautifully.

Moon Jar

The dalhanari embodies humble beauty - imperfect, asymmetrical, and profoundly serene in its simplicity.

Ondol Warmth

The heated floor system brings family together, radiating gentle warmth that nurtures connection and rest.

Changsalmun Window Patterns

Traditional Korean lattice windows filter light while creating geometric beauty. Each pattern has a name and meaning.

Jeongja-mun
Neunghwa-mun
Ssanggyo-mun

Numbered Cards

01

Jeong

Deep emotional bond and affection that grows through shared experiences and time together.

02

Nunchi

The subtle art of reading the room, sensing unspoken feelings and social dynamics.

03

Heung

Spontaneous joy and excitement, the irrepressible energy that emerges in celebration.

07

Data Table

Data Table

Information organized with clarity and warmth. Rows alternate like the wooden beams of a hanok ceiling, structured yet inviting.

Element Korean Meaning Status Season
Mugunghwa Rose of Sharon Immortality and resilience Blooming Summer
Chuseok Harvest Festival Gratitude and family reunion Celebrated Autumn
Seollal Lunar New Year New beginnings and respect Honored Winter
Boseong Green Tea Fields Tranquility and health Growing Spring
Hanbok Traditional Dress Elegance and cultural pride Timeless All

08

Badges

Badges

Small markers of distinction, like the colorful norigae ornaments that adorn traditional dress with meaning and beauty.

Default Red Blue Yellow Green Outline

Contextual Usage

Status

Active Pending Draft

Categories

Craft Culture Heritage

Seasons

Summer Autumn

09

Design Principles

Design Principles

Korean aesthetic philosophy balances warmth with restraint, connection with space, tradition with natural flow.

Jeong

Emotional Connection

Design should foster warmth and emotional bonds. Unlike cold minimalism, Korean aesthetics embrace the human need for connection and belonging.

Yeobaek

Embracing Empty Space

Empty space is not void but possibility. It provides breathing room for elements to exist in harmony, creating peace rather than anxiety.

Jayeon

Natural Harmony

Design flows with nature rather than against it. Like a hanok built into its landscape, interfaces should feel organic and unforced.

Gyeomson

Humble Elegance

True beauty does not boast. Like the moon jar, elegance comes from restraint, from knowing when enough is enough.

Obangsaek

Balanced Color

The five direction colors create harmony through contrast. Use color meaningfully, with each hue carrying intention and balance.

Ondol

Underlying Warmth

Like the heated floor that warms without being seen, good design provides comfort through invisible, thoughtful details.

Pungnya

Cultivated Taste

Appreciation of beauty requires cultivation. Design educates through example, gradually revealing deeper layers of meaning to those who take time to look.

"The beauty of Korean aesthetics lies not in perfection but in the warmth of human touch, the embrace of nature, and the space left for the heart to breathe."

Korean Design Philosophy