Translating "Atmosphere" Into Code — The Role of AI in UI/UX Design

 

An Efficient App and an Immersive App Are Different Things

Building "an app that is easy to use" and building "an app you get lost in" are entirely different challenges. This was the very first question I faced when designing the tarot app's visual layer. For a typical SaaS tool or e-commerce site, you follow standard UI guidelines — button colors, spacing, font sizes — and you are most of the way there.

But a tarot app demanded a different approach from the start. For users to take the card flip seriously and focus on the result, the screen itself needs to feel like a space. Like sitting in a dim room with a single candle, cards spread out before you. How do you create that atmosphere in code?

The problem is that "atmosphere" is hopelessly abstract. "A mystical feeling." "Night-sky depth." "Elegant yet approachable." These requirements would produce different interpretations even if handed to a professional designer. Would an AI do any better?

Turning Abstract Sensation Into Concrete Code

My first question to AI was straightforward: "Recommend a color palette that suits a tarot card reading app." The response was predictably generic — purple, black, gold. The kind of combination anyone could come up with.

I changed my approach. "I want the background to capture the feeling of looking up at the night sky — a sense of depth. Pure black feels too flat. Something in the dark navy range would work. There should be tiny points of light like stars, but text readability must be maintained." With this sensory description, the results shifted completely.

Among the AI's suggestions, a dark navy background at #0a0a1a caught my eye. Compared to pure black (#000000), this color carries the faintest blue undertone, and it makes a remarkable difference on screen. A black background feels like the screen is off. This navy feels like a deep night sky. A subtle distinction, but the sense of space the user perceives is completely different.

Gold, Purple, Ivory — Three Colors in Harmony

After the background, I needed accent colors. Gold is inseparable from traditional tarot imagery. But pure gold (#FFD700) on a digital screen can look too bright and tacky. After experimenting with several tones, I settled on #d4a853 — a slightly darker, warmer gold that evokes "antique gold leaf" against the navy background.

For a secondary color, I chose #7b5ea7, a muted purple. If gold conveys "preciousness," purple carries "mystery." Applied to button hover states and selected-card glow effects, it adds a subtle magical quality to the screen. The two colors meet on the navy background without competing, filling the screen with richness.

Text color required the most deliberation. Pure white (#FFFFFF) looked too harsh against the navy — fatiguing on extended reading. Ivory #e8e0d4 solved the problem. This warm-toned light color blends naturally with the navy background while providing sufficient contrast. It has the quality of text on parchment, which fit the tarot aesthetic perfectly.

The Surprisingly Large Impact of Font Choice

Font selection had as much influence on atmosphere as color. This is where AI conversation was especially useful. When I asked for "a serif font that fits a tarot card app and is available as a web font," several candidates came back. Among them, Cinzel stood out.

Cinzel is a typeface inspired by ancient Roman inscriptions. Its capitals are especially beautiful, and titles like "THE FOOL" or "CELTIC CROSS" look stunning in it — the atmosphere practically completes itself. The fact that it is freely available on Google Fonts was a major bonus.

For Korean body text, I chose Noto Sans KR. A clean sans-serif works better for readability with long interpretation paragraphs than an ornate display font. Noto Sans KR supports various weights while staying clean, pairing well with Cinzel's classical feel without sacrificing body text legibility. Classical titles, modern body copy — this combination matched the concept of "traditional yet approachable tarot app" perfectly.

The Art of Communicating "Feel" to AI

The biggest lesson from this process was learning how to make design requests to AI. "Make it pretty" produces generic results. "Imagine reading cards by candlelight on an old wooden table under the night sky" produces an entirely different level of suggestion.

The key is pairing sensory descriptions with technical constraints. A request like "verify whether gold text on a navy background meets WCAG AA accessibility standards" lets you pursue aesthetics and technical correctness simultaneously. AI can calculate contrast ratios and suggest alternatives if the standard is not met.

Another tip: provide concrete references. "Like the magic scenes in Harry Potter" is less useful than "like the lighting along Seoul's Cheonggyecheon stream at 9 PM — dark but warm." Specific sensory anchors help the AI generate more targeted suggestions.

A Single Color Defines the App's Character

Once the palette was applied to actual screens, unexpected issues emerged. The gold that looked beautiful on navy turned out to have poor readability at small text sizes. I ended up reserving gold for headings and emphasis elements only, with ivory handling all body text. These fine adjustments are impossible to catch without testing on real screens.

I did not use AI's color suggestions as-is. Testing across different conditions — mobile, bright environments, dark rooms — was essential. Tarot apps are likely to be used in dim settings, so I also had to consider how colors rendered on OLED displays.

In the end, four colors and two fonts. That was enough to create a space that feels completely different from a standard web app. The core lesson: with nothing more than color and typography — no complex graphic assets — you can create "atmosphere." And throughout this process, AI served as an excellent interpreter, translating sensory language into technical code.

Next Up

The foundational mood is set with colors and fonts. But the real magic begins with motion. In the next part, I will cover how I built a starfield background and a 3D card-flip animation using nothing but CSS and a bit of Framer Motion. How far can you go with zero extra libraries? I will explore the limits and the possibilities.