How We Built the Nippon Colors App: Engineering Beauty

Nippon Colors is powered by a deceptively simple tech stack, but behind the simplicity is a lot of engineering love and attention to detail. In this post, we’ll take you behind the scenes of our development process.

Core Architecture

We built the app using Swift and UIKit, optimizing it for performance and accessibility. Our architectural approach combined elements of MVVM (Model-View-ViewModel) with Coordinator pattern for navigation flow, giving us clean separation of concerns while maintaining testability.

// Example of our color model
struct TraditionalColor: Codable, Identifiable {
    let id: String
    let name: ColorName
    let rgb: RGB
    let cmyk: CMYK
    let season: Season?
    let associations: [String]?
    let historyNotes: String?
    
    struct ColorName: Codable {
        let kanji: String
        let hiragana: String
        let romaji: String
        let english: String?
    }
    
    // ... other nested structures
}

Each color is rendered using calibrated values, with fallback behavior for older devices and screens with limited color gamut. We implemented custom color transformations to ensure consistency across different display technologies.

Data Management

The app uses Core Data for lightweight offline storage, allowing users to access content without requiring a network connection. This was particularly important for us because we wanted the app to be usable in any context — from a designer’s studio to a teaching environment without reliable Wi-Fi.

Our database schema is designed for flexibility, allowing us to expand the information associated with each color as we discover more historical context or usage examples. Each color entry contains:

• RGB/CMYK/HSB values
• Traditional and modern names (in multiple scripts)
• Historical context and cultural associations
• Seasonal connections
• Compatible color pairings

Data-wise, the 250+ traditional colors are parsed from a custom-verified JSON database — built using historical references, linguistic context, and modern color conversions.

Performance Optimizations

To preserve responsiveness, we implemented several optimizations:

1. Lazy loading of color details and associated imagery
2. Image asset optimization for different device densities
3. Deferred expensive UI rendering tasks using GCD (Grand Central Dispatch)
4. Memory footprint reduction through intelligent resource management
5. Background processing for data transformations

These optimizations ensure that the app runs smoothly even on older iOS devices, maintaining our commitment to accessibility.

Accessibility Features

Making Nippon Colors accessible to everyone was a core requirement, not an afterthought. We implemented:

• VoiceOver support with carefully crafted descriptions for each color
• Dynamic Type compatibility for adjustable text sizes
• Proper contrast ratios throughout the interface
• Alternative text descriptions for visual elements
• Color blindness considerations in UI design

For color descriptions, we worked with accessibility experts to ensure that color-blind users could still engage meaningfully with the app through detailed textual descriptions and contextual information.

Animation System

Animations are handled natively to ensure fluidity even on low-end hardware. We built a custom animation system that respects the system’s accessibility settings:

// Example of our accessibility-aware animation system
func animateWithReducedMotionConsideration(duration: TimeInterval, 
                                          options: UIView.AnimationOptions = [], 
                                          animations: @escaping () -> Void, 
                                          completion: ((Bool) -> Void)? = nil) {
    let isReducedMotion = UIAccessibility.isReduceMotionEnabled
    
    UIView.animate(
        withDuration: isReducedMotion ? 0.1 : duration,
        delay: 0,
        options: options,
        animations: animations,
        completion: completion
    )
}

Future-Proofing

In addition to our current codebase, we’ve started prototyping a SwiftUI version for future expansion, keeping scalability in mind. This parallelization allows us to:

1. Experiment with new iOS features
2. Prepare for future device form factors
3. Improve our reactive programming approach
4. Test new accessibility enhancements

The SwiftUI prototype serves as our R&D platform while we maintain and improve the production UIKit codebase.

User Feedback Loop

On the product side, we use TestFlight for user feedback and regularly survey designers and educators to evolve the app’s direction. This continuous feedback loop has been crucial for refining features and prioritizing enhancements.

Our feedback system is integrated directly into the app, allowing users to send us thoughts, bug reports, or feature requests with minimal friction. This has resulted in several community-suggested features that significantly improved the app experience.

More Than Code

Building Nippon Colors wasn’t just about coding — it was about encoding emotion, heritage, and culture in every interaction. Our engineering decisions were always made in service of the cultural experience we wanted to create.

The result is an app that feels both technically robust and emotionally resonant — proving that technical excellence and cultural sensitivity can go hand in hand.