Lívia Kiss
Product designer who codes — from brief to browser.
New to Contra
Lívia is ready for their next project!
Logo design isn't my main service.
But when a client asks "do you have any ideas?" — I try.
This is for a cybersecurity company with a connection to Japan.
The kanji means red. The name of the client inspired the color.
He liked it. The website comes next.
Sometimes the best work happens when you say yes to something slightly outside your lane.
0
22
Warm Component System — Design System
Built a complete design system from scratch. Not a concept — a real, coded, documented component library.
The brief I gave myself: what does a design system look like when the palette is warm? Deep olive, burgundy, and cream. Every decision had to earn its place.
Colour tokens, typography scale (Cormorant Garamond + DM Sans), spacing, and a full component library — buttons, inputs, cards, navigation, modals, toasts, badges, avatars. All variants, all states.
Coded version on GitHub — CSS custom properties, component files, live showcase page, physical interactions.
Design in Figma. Code in VS Code. Both delivered.
1
43
Friture Holka — Unsolicited Redesign
A local snackbar with real character — but a website that wasn't showing it. So I made a concept. Warm tones, dark background, appetite-driven layout. Design that actually matches the personality of the place.
Same spot. Different feeling.
1
45
Discovery Museum — Unsolicited Redesign
Nobody asked for this one.
Discovery Museum is a brilliant place — interactive science, exhibitions for all ages, real community value. The website just wasn't keeping up.
I stripped back the chaos, rebuilt the hierarchy, and let the content breathe. Dark background, strong typography, clear visitor paths — children, adults, school groups — all above the fold.
Same museum. Different feeling.
1
46
Moral Me — Unsolicited Redesign
Same brand. Different design maturity.
Moral Me is a gamified social platform built around character development — rewarding meaningful dialogue, not follower counts. The concept is original. The website wasn't keeping up with it.
So I redesigned it. Without being asked.
Three directions, each with a different strategic argument: dark editorial for the serious early adopter, evolutionary for structural improvement, brand-led with orange as the emotional foundation.
The goal wasn't to change what Moral Me is. It was to make you feel it in the first three seconds.
Sent it cold. The founder responded the same day.
1
41
ALIVE Design Studio — Designed & Built From Scratch
This one is personal.
Every designer needs a portfolio. Most use a template. I built mine from scratch — hand-coded in HTML, CSS, and JavaScript, deployed on GitHub Pages with a custom domain.
Not because templates don't work, but because a designer who codes should be able to prove it. The site itself is the proof.
The design system behind it — teal on near-black, chip-style components, teal accent rings, minimal dark aesthetic — is entirely custom. No frameworks, no shortcuts. Every spacing decision, every hover state, every transition written by hand.
It also lives and breathes: Google Analytics, Search Console, a Gumroad integration, and a fully custom client onboarding system connected to a Node.js backend.
Designed it. Then built it. Then shipped it.
1
37
Nami — High-Fidelity Focus Experience
The blueprint was the logic. This is the feeling.
For Nami's second phase, the architectural foundation became a premium dark mode interface designed for deep-work immersion — where colour theory and typography work together to reduce cognitive load and support flow states.
High-fidelity visual design, an interactive clickable prototype for user testing, and a complete developer handoff — style guides, exported assets, and documentation that protects design integrity all the way through the build.
From blueprint to pixel. Nothing lost in translation.
1
43
Product Blueprint — UX Architecture & Logic
Great products are built on solid logic, not just good-looking screens.
For Nami, a minimalist focus app, I mapped user flows, defined information architecture, and built interactive wireframes — all before a single high-fidelity pixel was placed.
The deliverable: production-ready documentation. Flow logic, grid systems, rem-based typography specs, and developer handoff notes that leave zero room for interpretation.
Design and development speak the same language here — because I speak both.
1
44
EchoLocate — Accessibility Diagnostic Tool
What does a website look like to a screen reader? EchoLocate answers that question.
Built under a strict binary constraint — Terminal Green on Obsidian Black — the tool strips away visual design to reveal the semantic skeleton assistive technology actually navigates. No shadows, no gradients. Hierarchy through line weight alone.
Three core flows: Focus Path Mapping visualises the literal tab key journey. The Zoom-In Inspector bridges broken code and real audio friction. Virtual Patching injects ARIA fixes in real time.
Accessibility isn't a checkbox. This makes it visible.
Stack: Inter · JetBrains Mono · 8px grid · #00FF41 · #0F0F0F
1
48