utopia — a tiny world with frens who aren't busy

logo

three pieces — lockup, mark, wordmark — each in a dark and a light variant. pick the variant that matches the surface you're placing it on. keep clear space around the mark equal to half its height, never recolor the axolotl, and never stretch the wordmark.

lockup · dark

dark icon + black wordmark. for light surfaces — cream, white, anything reading as bright.

png · transparentpng jpeg · on creamjpeg

lockup · light

light icon + white wordmark. for dark surfaces — OLED black, deep purple, anything reading as moody.

png · transparentpng

mark · dark

axolotl in the dark icon container. for light surfaces. app icons, favicons, tight spaces, avatars.

1024 × 1024png 1024 × 1024jpeg

mark · light

holographic axolotl in the light icon container. for dark surfaces. same shape as the dark mark — swap 1:1 when the bg goes black.

1024 × 1024png 2048 × 2048 · no framepng

wordmark · dark

black text only. for light surfaces. anywhere the mark would compete with surrounding imagery.

png · transparentpng jpeg · on creamjpeg

wordmark · light

white text only. for dark surfaces. swap 1:1 with the dark wordmark when the bg goes black.

png · transparentpng jpeg · on blackjpeg

color

two themes. dark is primary — design for OLED black first, then adapt bright. tap any swatch to copy its value.

utopiaprimary. pure black, brand purple, warm sunset accents.

brightcream background, violet accent, pastel sunset supporting colors.

axolotlpulled from the mascot's holographic sheen. use for blobs, text gradients, soft washes — never as UI chrome.

typography

bricolage grotesque for web. sf pro rounded in the iOS app. one rule across both: every piece of copy is lowercase. always.

h1 · 72 / 500

frens who aren't busy

h2 · 48 / 600

the people in your life are busy

body · 17 / 500

other feeds take from you. this one gives. real friends who remember your name, your bad days, and the thing you only said once.

caption · 13 / 700

a softer kind of social

familybricolage grotesque (web) · sf pro rounded (iOS)

weights500, 600, 700, 800

tracking-0.035em display · -0.005em body

casealways lowercase

voice

intimate, lowercase, anti-corporate. your coolest friend's group chat — not enterprise onboarding.

always lowercase

corporate capitalization kills the intimacy. lowercase reads like a friend, not a product page.

yes

continue with google

no

Continue with Google

intimate, not corporate

talk like the coolest friend in the group chat, not an onboarding flow.

yes

hi there

no

Welcome to Utopia!

curiosity over features

make the visitor ask a question. don't answer it until they're in the app.

yes

150 people live here. come meet them.

no

Chat with 150 AI personalities powered by advanced language models.

short, punchy, one thought per line

whitespace is part of the voice.

yes

someone's already thinking about you.

no

We're excited to introduce a social experience where AI companions proactively engage with you throughout the day.

imagery

pixel art. bold flat color blocks, crisp edges, 16-bit video game aesthetic. warm sunset palette — amber → coral → lavender → purple. the axolotl is the only recurring character.

ambercorallavenderpurple

generate with google imagen 4.0 ultra via runcrate
start prompts with "a portrait pixel art flat color illustration of…"
aspect ratio 9:16 for mobile backgrounds, 16:9 for landscape
specify the mood ("warm, playful, alive, inviting") not just the subject
pastel UI accents — lavender, peach, mint, gold, rose
no people. no realistic humans. no stock photography.

principles

short rules that hold the whole thing together.

do

dark mode first — design at #000 then adapt
flat fills on dark surfaces — no gradients on cards or bubbles
0.5px borders at 6% white as the glass-edge on dark
off-white #F5F5F7 for text on dark, never pure #FFF
one thought per line; let whitespace breathe
FadeUp entry (14px translate, 480ms, 220ms stagger)

don't

purple gradient mesh, glowing nodes, 3D blobs
stock photography of people
emoji in ui chrome (inside character quotes is fine)
capitalized titles, headers, buttons
“revolutionary,” “seamless,” “unlock,” “powered by”
tech marketing — nobody cares how the AI works
floating/tilted card layouts — use vertical flow
shadows on black — they’re invisible, use borders

this is utopia.