Project 01 · 2024 → in progress
kira.
A styling app I built for myself, to stop guessing in the morning, dress in the colors that actually flatter me, and feel like I shine.
personal projectiosswiftuixcodefigmadesign system
The why
why I built this
For a long time I had a closet full of clothes I liked but still couldn’t put together. I leaned on the basic color wheel to figure out what went with what, but never quite felt like I looked the way I wanted to. Then I found seasonal color analysis, probably somewhere on Instagram, and I got curious: what was my palette? I fell into learning which colors actually flatter a person, in clothing, in makeup, and especially near the face, and which ones work against you. It’s more folklore than science, I know, but it named the exact thing I’d been missing.
Working with Claude
finding my colors
So I started working with Claude. I sent over a handful of photos of myself in good light, and from my hair, eyes, skin tone, and undertones, Claude placed me as a soft summer, muted, cool, low-contrast. From there we worked out the specifics together: which soft-summer colors genuinely look good on me, which ones I can wear together, and which ones do the most work right near my face, the shades to reach for first when I’m shopping.
Beyond the palette
dressing what I already own
It didn’t stop at a palette. Black isn’t a soft-summer color, but I love wearing it, so Claude and I worked out how to wear it in a way that still flatters my coloring. Same for the patterned tops and dresses I already own: how to carry my palette into pieces that technically aren’t in it. I didn’t want to throw out a closet I’d already paid for and start over, that’s a waste, so a lot of it was working out what to keep and how to wear it now, then phasing the right pieces in slowly, over time. We went through seasons, essentials, shoes, jewelry, and makeup, makeup especially, because I love it. Every guide is written around the things I actually wear, and how I actually wear them.
What Kira is
it isn't a color-analysis app
This isn’t another seasonal color-analysis app, honestly, it isn’t a color-analysis app at all. It’s where I took everything Claude and I worked out about dressing my best and put it somewhere beautiful I can open every morning: inspiration, the answers I’d been hunting for, a hand while I shop, and the simple feeling of looking like my best self. It holds 127 soft-summer colors, and not even all of them. You won’t find a single yellow; there are soft-summer yellows, they just don’t love me back, so they’re left out on purpose. It’s tuned to my height, my taste, and my closet. It is, entirely, about me.
What shipped
what's on my phone today
On my phone right now: a home that surfaces today’s pick, the weather, and a live color picker; the full palette; the colors most flattering near my face; style and makeup guides written for my body and my clothes; Olive, a chat stylist I can ask anything outfit-shaped; plus a wishlist and a journal. It began with the palette and the guides, then grew the smaller delights, the wishlist, the color picker, as I found myself wanting them. I built Kira purely for me. But it’s personal enough that I sometimes wonder what it would take to give everyone this, not their season dropped into my app, but everything I know about dressing me, rebuilt around them: every guide, rule, and small delight tuned to their face, their body, their closet. All the personalization I have for myself, made personal for anyone, their own stylist app.
Motion
soft tells, not flourishes
Motion does quiet work here: lists settle in with a gentle, staggered reveal instead of a snap, and the little moments ease in rather than pop. There’s even a hidden one, long-press the greeting and Kira’s flower mark blooms open. Nothing bouncy, nothing flashy; I wanted motion that feels quiet and a little delightful, the kind you barely notice, but that keeps pulling you back to open the app again.
The screens
a look around the app
Design system
kira · design system
calm by default. swappable to any season.
white page · grey cards · periwinkle on actions only
the name & the mark
why kira, why a lotusKira
find your light
Kira comes from kira-kira, the Japanese word for the way light glints and shimmers. It names the feeling the app is after: not a makeover, but the small lift of seeing yourself in the right light. The icon is a lotus built from a personal palette, each petal one of your colors, opened into bloom. Drawing the obvious “color wheel” was the easy answer; this was the deliberate one. A name should carry the soul; a mark should carry the meaning.
The name says shine. The flower says these colors are yours.
surfaces
the near-white systemWhite well
a raised inset inside a grey card
White is the page, grey is the card, defined by a periwinkle hairline. No drop shadows.
page
#FFFFFF · bg
card
#F5F4F9 · surface
hairline
#DEDCE8 · border
ink
#2D1928 · text
secondary
#7C6C77 · text2
accent
#A0A9C8 · lav
rose
#D6A5B8 · anchor
Color comes from the swatches, almost never the chrome.
palette
season-swappablePurples & Berries
Blues & Steels
Greens & Teals
Pinks & Mauves
Reds & Wines
Neutrals
Soft summer today. Read a face → the whole ramp recolors to that season, bright winter’s cobalt, true spring’s coral. The grey-and-ink chrome never moves.
type
three voices, strict lanesserif · lora
Soft Summer.
titles · hero names · one serif-italic stylist note
sans · sf pro
Aa Bb Cc 0123, every label, list row, chip and hex.
the hard rule: text ≤13pt → sans, never serif.
script · caveat
saved for one hero label.
exactly once, never repeated down a list
components
a peekSave lookSkip
segmentedColored topAll-black
filter pillsBluesLavendersPinks
FACEHAIRWORKSCASUALAVOID
list rowiconography
hand-drawn doodlessparkle
heart
star
bow
hanger
dress
shoe
mirror
- ·stroke-only line work, never filled SF Symbols
- ·round caps & joins, a hand-drawn ~1.2 weight
- ·one ink tint; periwinkle only when active
- ·a single playful detail, the dress's little smile
default
active
Line doodles, not icon-font glyphs, warmth without the clutter.
motion & haptics
spring & micro-hapticssnappysmoothgentlebouncy
haptics · hover to feel ittap
a light tap on any button
toggle
flip a switch, the knob slides over
long-press
press & hold swells, then releases
success
a celebratory pop when something lands
shake
a sharp shake when something's wrong
Design story
the mark, the color & the name
How each one landed, the directions we explored, the ones we set aside, and why.
the first mark
a flower made of your colors
It began as a palette-bloom: six petals, one per color family, radiating from an open center, soft and pale, your purple leading at the top. A flower built from your palette. From there we explored.
Explorations
Icon treatments, we pushed the bloom three ways. Matte beat shimmer (iridescence dates), and leading with purple kept your hero color in front.
Iridescent
holographic, magical, but trend-bound & abstract
Periwinkle-led
accent up top, cooler, but buries the hero
Purple-led ✓
your color leads, soft, matte, timeless
The form, a pinwheel blurred at small size and leaned close to a familiar photos icon, so we opened it into a lotus: petals in rows, each color on its own.
Tulip
tight cup · fewest colors
Fan
widest · most ‘palette’
Lotus ✓
richest · still one calm mark
In context, name, icon & widget together. The shimmer looked like a filter; the matte looked like a brand.
iridescent · set aside
Kira
KIRA
Soft SummerToday’s colors
Mauve + sky
matte · chosen
Kira
KIRA
Soft SummerToday’s colors
Mauve + sky
And the app grew up with it. Today’s Pick began as a small contained card of swatch tiles, it became an immersive, full-bleed color hero, and the home screen shed its clutter (a quote card, corner tiles) and gained a dedicated Face tab.
before
now
Your Palette followed, a grid of swatch cards became a single swipeable color band, the families relaxed into a clean vertical list, and the page itself washes to the active family.
before
now
Wearing Black was the biggest UX fix, one long scroll with two scenarios stacked together became a single toggle. Pick ‘Colored Top’ or ‘All-Black’ and see just that path: same depth, none of the overwhelm.
before
now
And the small things add up. In the jewelry guide, pairings started as a grid of big swatch tiles, they became compact pills with a color dot, and the section label dropped from a soft serif to quiet uppercase sans. Clearer, calmer, less ink.
before
now
the name
the icon is color, the name is the soul
The name took longer than the mark. A dozen made the shortlist, and fell away:
Chromatoo technical, a crowded aisleHuedalready a brandOpala screen-time app got there firstLustreregistered, and busy in beautyAuroralovely, but everyone’s word
Kira
find your light
Kira won. From kira-kira, the Japanese word for the glint of light catching something and making it shine. It names the feeling, not the function, a page from Apple’s book: a name should carry the soul, the icon should carry the product, and the two don’t need to match. So the word says shine, the lotus says these are your colors, and where they meet, you get Kira.