NICHLYST’s interface is designed to deteriorate alongside its story: over a forty-day narrative, visual changes make the archive feel increasingly worn without adding colors beyond the game’s five-color palette. Eugene Kozlovsky describes the approach in his September 23, 2026, DEV Community article, “Building NICHLYST: The Architecture of Afterlife — Designing Post-Final UI Decay in CSS.” Its central design challenge is to make the interface look less intact while keeping the choices players need to make usable.
Why make the interface decay?
In NICHLYST, the player is an archivist cataloging the final archive of a dead language. Kozlovsky treats the interface as part of that premise, rather than as decorative chrome that remains untouched while the story changes. As he puts it, “The UI is not separate from the story.” The design therefore uses changes to the interface itself to signal the passage of the game’s forty days.
As an Amazon Associate I earn from qualifying purchases.
The constraint is expressive as much as technical: how can an interface suggest age and damage without expanding its palette? Kozlovsky’s answer is to alter the treatment of existing colors and surfaces—using opacity, desaturation, text effects, borders, noise and gradients to make the same visual system feel less pristine over time.
Free tools Windows power users keep installed
One-click scans. No signup required.
How the eight decay levels track the story
The progression is divided into eight levels, indexed 0 through 7. The effects accumulate across the timeline, moving from restrained wear to a final collapse effect.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
| Level | Game days | Reported visual changes |
|---|---|---|
| 0 | 1–15 | Pristine interface. |
| 1 | 16–18 | Subtle desaturation and reduced opacity on secondary elements. |
| 2 | 19–21 | Deeper versions of those changes, plus an ink-bleed-like text shadow. |
| 3 | 22–24 | Stronger desaturation, a screen border and slight blur on mood text. Choice buttons remain near full opacity and unfiltered. |
| 4 | 25–28 | Paper grain made with an SVG feTurbulence effect. |
| 5 | 29–32 | A narrower content column, increased letter spacing and substitution of an existing palette token for some text. |
| 6 | 33–36 | Further desaturation and a hover glitch on choice buttons. |
| 7 | 37–40 | Scan lines, a pulsing border and a final collapse effect. |
These are the stages Kozlovsky describes for this project, not a general CSS standard or an independently inspected implementation. The schedule gives the visual system a narrative rhythm: early days preserve clarity and order, while later days add increasingly conspicuous signs of wear.
Age the surface without adding colors
Kozlovsky says NICHLYST enforces a five-color palette at build time: #1A1C1C, #2D3131, #7D7263, #BCB2A1 and #EDE6D8. Rather than introduce new hues to imply damage, the described system simulates aging through opacity and saturation changes, palette-token substitution, SVG noise and gradients.
That distinction matters for a tightly art-directed interface. A palette can remain consistent while its colors appear weaker, its paper surface more distressed and its text less crisp. The result is deterioration expressed through treatment and texture instead of an expanding collection of colors.
Protect the actions players still need to read
Visual decay creates a usability trade-off: effects that make mood text seem blurred or worn can also make essential controls harder to see. Kozlovsky says the design protects interactive choices from degradation that would undermine their use. At level 3, for example, the mood text receives slight blur while choice buttons retain near-full opacity and no filter; a hover glitch is described later, at level 6.
The article also reports a contrast guard, mobile-specific effect adjustments and support for prefers-reduced-motion. These are implementation claims by the author, not the findings of an independent accessibility audit. The article mentions contrast figures, but does not establish an independent verification of them. For another project, the useful principle is to distinguish atmospheric content from controls on which a user must act: decide which elements may lose clarity, and verify that interactive states remain perceivable under the effects actually used.
Why the reported implementation moved away from chained filters
Kozlovsky reports that chaining blur and drop-shadow filters caused performance problems and thermal throttling in a budget Android WebView, citing a Redmi Note 9 Pro. He says he replaced dynamic filter combinations with static noise tiles and pre-calculated opacity steps. He reports 60 fps on that device after the change, without thermal throttling, and also mentions an AMD A4 laptop.
Rank #4
Those figures describe the author’s reported experience, not an independently replicated benchmark. The article does not provide a published test protocol, raw measurements or independent testing, so the result should not be treated as a performance guarantee for other devices or WebViews. The design trade-off it illustrates is more general: layered visual effects can carry a rendering cost, while static assets and precomputed states can reduce the amount of work done dynamically. Whether that exchange is worthwhile depends on the effects, target hardware and actual testing.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
What this design approach offers—and what it does not establish
- Narrative legibility: A staged progression ties visual change to the forty-day structure instead of applying a single undifferentiated “old” effect.
- Palette fidelity: Aging is simulated with treatments of existing colors and surfaces rather than additions to the five-color palette.
- Usability boundaries: The described design distinguishes atmospheric text and surfaces from choice controls that need to remain usable.
- Rendering trade-offs: The author’s account favors static noise and precomputed opacity steps over chained dynamic filters after reported device performance problems.
The article is a first-person account of one game’s design and implementation. It offers a concrete example of treating interface deterioration as part of narrative structure, but it does not independently establish accessibility compliance or performance on a broader range of hardware.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
