招牌配方
Parang diagonal sword-tile background
The signature court motif — 45° diagonal sword-blades repeating as a CSS background pattern. Used for hero panels, divider strips, and quiet section dividers. The cream-resist hairline is the gap between blades.
.batik-parang {
background-color: #1F2D52;
background-image:
repeating-linear-gradient(
45deg,
#1F2D52 0px,
#1F2D52 14px,
#6B4124 14px,
#6B4124 28px,
#F0E5C8 28px,
#F0E5C8 30px,
#6B4124 30px,
#6B4124 44px
);
background-size: 60px 60px;
border: 1px solid rgba(240, 229, 200, 0.4);
}
Kawung four-circle interlock
Four interlocking circles — historically a royal-only court motif. Rendered as a tiled radial-gradient background for ceremonial card surfaces and sidebar accents.
.batik-kawung {
background-color: #F0E5C8;
background-image:
radial-gradient(circle at 0 0, #1F2D52 0 9px, transparent 10px),
radial-gradient(circle at 24px 0, #1F2D52 0 9px, transparent 10px),
radial-gradient(circle at 0 24px, #1F2D52 0 9px, transparent 10px),
radial-gradient(circle at 24px 24px, #1F2D52 0 9px, transparent 10px);
background-size: 24px 24px;
background-position: 0 0;
}
Cream-resist hairline border
The canting's wax-line is what gives batik its bounded silhouette. Every card and divider uses a 1px cream-on-cream hairline (or cream-on-indigo for dark surfaces) — never a hard black rule.
.resist-hairline {
border: 1px solid #DDCEA8;
box-shadow: inset 0 0 0 1px rgba(255, 251, 238, 0.6);
border-radius: 8px;
background: #FFFBEE;
padding: 24px;
}
.resist-hairline--on-indigo {
border: 1px solid rgba(240, 229, 200, 0.35);
box-shadow: inset 0 0 0 1px rgba(240, 229, 200, 0.15);
background: #1F2D52;
color: #F0E5C8;
}