Overview
Ichie is a project that bridges the gap between high-concept philosophy and practical digital utility. The challenge was to design a networking tool that didn't feel like a cold CRM (Customer Relationship Management) system, but rather a warm, personal repository of human connection.
The Design Challenge
How do you design an interface that encourages "presence" rather than "scrolling"?
Most networking apps are built for speed and volume. Ichie is built for depth and memory. The design system had to reflect this:
- Calmness: Avoiding bright, "attention-grabbing" colors.
- Intentionality: Every interaction should feel deliberate.
- Longevity: A UI that feels timeless, not trendy.
Design System: "Washi"
I developed a design system called Washi, named after traditional Japanese paper.
- Typography: Using a mix of serif for storytelling and sans-serif for utility, creating a hierarchy that feels both literary and modern.
- Color Palette: A "Noren" palette — deep indigos, charcoal greys, and warm parchment whites.
- Grid & Spacing: An 8pt grid system with generous "Ma" (negative space) to allow the content to breathe.
From Design to Development
The transition from Figma to React was a core part of this project.
- Tokens: Defined a comprehensive set of design tokens (color, spacing, typography) that were shared across Figma and the CSS/Tailwind configuration.
- Component Mapping: Every Figma component was meticulously mapped to a React component, ensuring that the "hand-crafted" feel of the design was preserved in the code.
- Motion Design: Framer Motion was used to implement "soft" transitions — fades and subtle scale changes — that mimic the natural flow of thought and memory.
Impact
Ichie demonstrates that "design engineering" is about more than just writing code; it's about translating a philosophical vision into a tangible, high-performance digital experience.