Batik

Wax-Resist Dyeing Design System

A design language drawn from the ancient Indonesian art of batik — where hot wax meets indigo dye, crackle lines trace imperfection into beauty, and flowing organic motifs carry centuries of Javanese meaning. Recognized by UNESCO as an Intangible Cultural Heritage of Humanity since 2009.

01

Color Palette


Traditional batik uses natural dyes — indigo from the Indigofera plant for deep blues, soga bark for warm browns, and turmeric for golden yellows. Colors carry meaning: indigo represents trust and stability, brown connects to the earth, and gold signifies prosperity.

Indigo

Indigo Deep
#091832
Indigo Dark
#0E2240
Indigo
#1B3A5C
Indigo Light
#2C5280
Navy
#152D4A

Soga Brown

Umber
#3E2723
Soga Dark
#4E2A1C
Soga
#6B3A2A
Soga Light
#8B5A42
Brown
#5C3D2E

Earth & Gold

Terracotta
#A85C3B
Rust
#9C4422
Sienna
#B07040
Gold
#C4982A
Turmeric
#D4A030

Natural Cotton & Cream

Parchment
#E8DBC4
Cream
#EDE3CC
Cotton
#F5ECD7
Linen
#FAF4E8
White
#FEFCF6

Accent — Leaf & Plum

Leaf Dark
#2A4E36
Leaf
#3B6B4A
Leaf Light
#4E8A5E
Plum
#6B3054
Plum Light
#8A4570
02

Typography

Elegant serifs for display and headings echo the flowing organic curves of batik motifs. A clean sans-serif body font ensures readability while honoring the craft's precision.


Display / Cormorant Garamond 700
Parang Rusak Barong
3.5rem / 56px · Line height 1.1
Heading 1 / Cormorant Garamond 600
Kawung: The Sacred Lotus
2.75rem / 44px · Line height 1.15
Heading 2 / Cormorant Garamond 600
Mega Mendung Cloud Motifs
2rem / 32px · Line height 1.2
Heading 3 / Libre Baskerville 700
Canting Tools and Copper Tips
1.5rem / 24px · Line height 1.3
Heading 4 / Libre Baskerville 700
Wax Application Techniques
1.125rem / 18px · Line height 1.4
Body / Work Sans 400
The batik process begins with drawing patterns on cotton or silk using a canting, a small copper cup with a spout attached to a bamboo handle. Hot wax is applied along the design lines, resisting the dye and preserving the cloth's natural color beneath. The fabric is then immersed in indigo vats, sometimes dozens of times to achieve the deepest blues. Where wax cracks under the dye bath's pressure, fine veins of color seep through — the celebrated crackle effect that makes each piece unique.
1.0625rem / 17px · Line height 1.7
Body Small / Work Sans 400
Batik tulis (hand-drawn batik) can take weeks or months to complete, with master artisans in Solo and Yogyakarta passing techniques through generations. Each region has its signature patterns and color combinations.
0.9375rem / 15px · Line height 1.6
Caption / Work Sans 400
October 2, 2009 — UNESCO designates Indonesian batik as an Intangible Cultural Heritage of Humanity.
0.8125rem / 13px · Line height 1.5
Overline / Work Sans 600
Traditional Javanese Textile Arts
0.75rem / 12px · Uppercase · Letter spacing 0.15em
03

Spacing Scale

A 4px base unit provides the foundation, scaling through six stops like the layered wax applications of the batik process.


XS (4px)
--space-xs
SM (8px)
--space-sm
MD (16px)
--space-md
LG (32px)
--space-lg
XL (64px)
--space-xl
2XL (96px)
--space-2xl
04

Buttons

Button styles reference the layered dyeing process — deep indigo as the primary action, warm soga bark as secondary, and gold for emphasis.


Standard Variants

Sizes

Button Group

05

Forms

Form elements carry the same warmth and precision as the canting tool tracing wax onto cloth.


We will use this to send your certificate.
06

Cards & Panels

Content containers with the textural quality of dyed cloth — each card carries its own pattern and story, like individual batik panels on a sarong.


Classic Pattern

Parang Rusak

The broken knife pattern, once reserved for Javanese royalty. Its diagonal S-curves symbolize the ocean's waves and the continuity of life's struggles.

Sacred Motif

Kawung

Four-lobed shapes resembling the cross-section of a sugar palm fruit. One of the oldest batik patterns, representing purity and self-control.

Coastal Batik

Mega Mendung

Layered cloud motifs from Cirebon, influenced by Chinese aesthetics. Graduated indigo blues create a sense of depth and celestial movement.

Panels

The Canting Tool

The canting (pronounced "chan-ting") is the artisan's primary instrument for batik tulis. A small copper cup with a narrow spout is attached to a bamboo or wooden handle. The artisan dips the cup into molten wax and draws freehand on the cloth, controlling the wax flow through the spout's diameter and the angle of the tool.

Batik Tulis vs. Batik Cap

Batik tulis (hand-drawn) is the most labor-intensive and valued form, where every line is drawn by hand with a canting tool. A single sarong can take months to complete. Batik cap (stamped) uses copper stamps to apply wax, allowing faster production while maintaining characteristic batik patterns. Both techniques produce authentic batik with the distinctive crackle texture.

UNESCO Recognition

On October 2, 2009, Indonesian batik was inscribed on the UNESCO Representative List of the Intangible Cultural Heritage of Humanity. This date is now celebrated annually as National Batik Day, when Indonesians wear batik to honor this living tradition.

07

Alerts

Status messages styled with the natural dye palette — ocean blue for information, leaf green for success, turmeric for caution, and rust for errors.


Indigo Vat Ready
The dye bath has reached the proper alkaline level. Fabric may be immersed for the first round of dyeing.
Pattern Registered
Your batik design has been successfully catalogued in the national motif archive.
Wax Temperature Warning
The wax is approaching 90 degrees Celsius. Reduce heat to avoid scorching the cotton fibers.
Dye Penetration Failure
Wax barrier was compromised during the second immersion. Affected panels must be re-waxed before proceeding.
08

Navigation


09

Tables

Data presentation with the structured rhythm of batik's repeating geometric elements.


Pattern Name Region Symbolism Status
Parang Rusak Solo / Yogyakarta Power, continuity of life Royal
Kawung Central Java Purity, self-control Royal
Mega Mendung Cirebon Patience, the heavens Regional
Truntum Solo Guidance, blooming love Ceremonial
Sido Luhur Solo Nobility, elevated character Ceremonial
Jlamprang Pekalongan Indian-influenced geometry Coastal
10

Design Principles

Four principles drawn from the philosophy and process of batik making.


01

Layered Process

Like the repeated waxing and dyeing cycles that build depth and complexity, design decisions should layer progressively — from structure to detail, from background to foreground.

02

Intentional Imperfection

The crackle lines of batik arise from wax breaking under pressure. Embrace organic textures and subtle irregularities that give interfaces a human, handcrafted quality.

03

Symbolic Color

Every color in traditional batik carries meaning — indigo for trust, brown for earth, gold for prosperity. Use color purposefully, not decoratively, so each hue communicates clearly.

04

Flowing Continuity

Batik patterns flow endlessly across the cloth, connecting elements in organic harmony. Layouts should create natural visual flow, guiding the eye through content without harsh interruptions.

11

Badges & Tags


Filled

Indigo Soga Gold Leaf

Outline

Batik Tulis Batik Cap UNESCO Heritage
12

Dividers & Ornaments

Decorative separators inspired by batik's repeating motifs and border patterns.


Kawung Divider

Dot Border Divider

Crackle Line Divider

Wax-Resist Dot Border