Five Elements Colors as UI — Balancing Eastern Aesthetics with Modern Design

 

Color Came First

When designing the Saju app's UI, the first decision wasn't layout — it was color. More specifically, the color system.

Each of the Five Elements (Wood, Fire, Earth, Metal, Water) has a traditional color. Wood is green, Fire is red, Earth is yellow, Metal is silver or white, Water is blue or black. These five colors connect to every element in Four Pillars study. The Heavenly Stem Gap is Wood, so it's green. The Earthly Branch O (午) is Fire, so it's red. This color mapping has persisted for thousands of years.

We adopted it directly as the app's design system. Just as tarot apps might use color to distinguish Major from Minor Arcana, our Saju app uses color to represent the Five Elements. But there's a key difference: tarot colors serve classification, while Saju colors carry inherent meaning.

Designing the Five Colors

Using raw primary colors would be painful on the eyes. Red, green, and yellow jumbled on one screen looks like a festival banner, not a thoughtful app. What a Saju app needs is restrained, Eastern-inspired color sensibility.

We tuned each element's color for a modern app context. Wood's green became an emerald tone — capturing natural vitality while remaining easy on the eyes. Fire's red shifted toward coral — striking but not aggressive. Earth's yellow warmed into an amber tone, conveying soil's stability. Metal's silver became a cool gray with a subtle metallic sheen, expressing quiet sophistication. Water's blue deepened to near-indigo, evoking depth and wisdom.

For each of these five colors, we defined four variants: a main color, a light version for backgrounds, a dark version for text, and a medium version for borders. Each elemental color has four expressions. Once this color system was defined, every subsequent UI component naturally grew from it.

The Chart Table: The Face of a Saju Reading

The Chart Table (Myeongsikpyo) is the most important visual element in a Saju app. Four pillars — Year, Month, Day, Hour — stand side by side, each layered with Heavenly Stems (Cheongan), Earthly Branches (Jiji), Hidden Stems (Jijanggan), and Ten Gods (Sipsin).

How to visualize this? The traditional approach is a table format: 4 columns for the pillars, 4 rows for the components. Functionally adequate, but flat for a mobile app experience.

We chose a card-based layout. Each pillar gets its own card-like region. The Heavenly Stem sits at the top, the Earthly Branch dominates the center in the largest font, and the Hidden Stems and Ten Gods occupy the bottom. The crucial detail: each character is colored according to its Five Element.

Gap is Wood, so it gets a green background. O (午) is Fire, so it gets a red background. The moment a user sees the Chart Table, the color distribution alone communicates an intuitive impression: "This chart has a lot of green (Wood) and red (Fire)." The Five Elements balance is conveyed visually before a single number or word is read.

The Day Pillar is slightly emphasized over the others — a thicker border, a subtle shadow — to visually communicate "this is your Day Master, the center of your chart." Even first-time users naturally understand that the highlighted middle pillar represents them.

Glassmorphism Meets Hanji Texture

What defines the overall atmosphere of the app isn't individual components but the sense of space.

For the Tarot app, we used a starry night sky background — the mystical vibe matched tarot's identity. Using the same approach for Saju would make it feel like a fortune-telling app. Four Pillars study positions itself as a systematic discipline rooted in Eastern philosophy. The visual tone had to match.

For the background, we combined CSS gradients with noise patterns to create a hanji (traditional Korean paper) texture. A subtle beige-cream tone with fine noise overlaid produces a feel reminiscent of writing on traditional paper. This background doesn't clash with the Five Elements colors while creating an atmosphere that's "Eastern but contemporary."

Components got a glassmorphism treatment: semi-transparent backgrounds with blur effects. The Chart Table cards, interpretation panels, and Five Elements charts float like glass above the hanji-textured background. Glassmorphism is a modern UI trend, but combined with hanji, it produces a unique visual layer — "modernity atop tradition."

Micro-interactions were intentionally restrained. In the Tarot app, the card-flip animation was a core experience. In the Saju app, accurate information delivery takes priority over flashy animations. We limited motion to a gentle fade-in for the Chart Table and smooth transitions for the Five Elements chart. Users visiting for their Saju reading want to see results quickly — they didn't come to watch animations.

The Instant Display Strategy: Two-Phase Rendering

The trickiest UI decision was "when to show what."

When a user enters their birth data and taps "Analyze," two things begin simultaneously: the rule engine building the four pillars and performing analysis (instant), and AI generating the comprehensive interpretation (several seconds).

The key strategy: show the rule engine results first.

In phase one, the rule engine's results appear on screen almost instantly. The Chart Table (Heavenly Stems, Earthly Branches, Hidden Stems, Ten Gods for all four pillars), Five Elements ratio chart, Favorable Element, and major combinations and clashes. For anyone who understands Saju, this alone is highly valuable. And even for newcomers, seeing the colorful Chart Table gives them a first impression of "so this is what my chart looks like."

In phase two, the AI interpretation streams in. Below the Chart Table, an interpretation area fills with text that appears as though being typed in real time. Users naturally explore the Chart Table while the interpretation flows in alongside.

The effect of two-phase rendering is dramatic. Staring at an "Analyzing..." loading screen for 3-5 seconds versus immediately seeing your Chart Table while interpretation streams in — these are fundamentally different experiences. Technically they take the same time, but perceived wait time drops to near zero.

What AI Did Well in UI

While building the Saju app's UI with AI, there was a clear split between what AI excelled at and what needed human adjustment.

AI was outstanding at consistently applying the Five Elements color system. Once we defined color constants and said "build the Chart Table component using this color system," every element received consistent coloring. Heavenly Stem colors, Earthly Branch colors, Ten Gods label colors, Five Elements chart colors — all unified under one system.

Component architecture was another strength. "Compose the Chart Table from 4 PillarCard components, each with HeavenlyStem, EarthlyBranch, HiddenStems, and TenGods subcomponents." Clean, reusable structure emerged naturally.

Responsive layout was handled well too. Desktop shows four pillars horizontally; mobile stacks them vertically or shifts to a 2x2 grid. AI implemented these responsive behaviors accurately when instructed.

What Humans Adjusted

On the other hand, AI's initial UI output was "functionally complete but aesthetically in need of tuning."

First, spacing was insufficient. AI tends to pack information densely. The gaps between the Chart Table and interpretation area, between each pillar card, between sections — all needed generous expansion. In Eastern aesthetics, whitespace isn't emptiness; it's breathing room.

Second, the typography hierarchy was flat. AI tends to generate similarly-sized text throughout. In the Chart Table, Heavenly Stems and Earthly Branches should be large while Hidden Stems and Ten Gods should be smaller. In interpretations, headings should be large, body text moderate, and supplementary notes small. This hierarchy required manual adjustment to create visual flow.

Third, color contrast needed fine-tuning. The Five Elements colors AI applied were faithful to the system, but on actual screens certain combinations were jarring. Earth's yellow background with white text lacked contrast. Water's deep blue background reduced text readability. These micro-adjustments required human eyes on real screens.

Fourth, emotional tone needed unification. Individual AI-generated components looked fine in isolation, but viewed together the app could lack a cohesive feel. Shadow intensity, corner radius, hover effect subtlety — aligning these across the entire interface required a human scanning the full screen and making holistic adjustments.

The Philosophy of "Showing"

Designing the Saju app's UI taught me this: in apps for traditional Eastern cultural domains, "how you present" matters as much as "what you present."

The same analysis results displayed in an Excel-like table feel like a data analytics tool. Wrapped in Five Elements colors and hanji texture, they feel like "ancient Eastern wisdom, interpreted for the modern age." Same functionality — but completely different impression and trust level.

The Five Elements color system isn't mere decoration. It's a translation of a meaning system accumulated over millennia in Eastern culture into a visual language. When this translation succeeds, users naturally learn "green is Wood, red is Fire" while using the app. Design becomes education.

Coming Up Next

The app's internals — analysis engine, AI interpretation, UI — are complete. But even the best app is meaningless if users can't find it. In the next installment, we'll tackle SEO strategy for the Saju domain, overcoming SPA search optimization limitations, and mass-producing SEO content with AI.