Trial · Oct 25

Max's colors, or Goldito green맥스의 색, 또는 골디토 그린

Pick a photo and Goldito reads the pet's tone. It only changes the 11 colors a skin may change (the app's themes.ts); warnings and the gold tag never change. Try light and dark, then open Max's room, a tamagotchi that only real care moves.사진을 고르면 골디토가 펫의 톤을 읽어요. 스킨이 바꿀 수 있는 11가지 색만 바뀌고 (앱의 themes.ts), 경고와 금색 태그는 그대로. 라이트와 다크를 써 보고, 진짜 돌봄만 움직이는 다마고치, 맥스의 방을 열어 보세요.

Play체험

The pet's photo펫 사진
Test pets (Max and Mochi, recolored)테스트 펫 (맥스와 모찌, 색만 바꿈)
Stress colors: the hardest coats스트레스 색: 가장 어려운 털
Colors색
When the coat has no color (white, black, grey)털에 색이 없을 때 (흰색, 검정, 회색)
Appearance화면 모드
Every color in this phone is a token. Tap the pet card for Max's room.이 폰의 모든 색은 토큰이에요. 펫 카드를 누르면 맥스의 방.

The tokens right now지금의 토큰

Each generated color is checked before it's used: text 4.5:1, outlines 3:1. If a pet's color fails, Goldito darkens it (light) or lightens it (dark) until it passes.생성된 색은 쓰기 전에 확인해요: 글자 4.5:1, 테두리 3:1. 통과하지 못하면 라이트에선 어둡게, 다크에선 밝게 조정해요.

Every screen, for a legibility check모든 화면, 가독성 확인용

The same tokens on ten screens: chat bubbles, a checkout, a trip, alerts, forms. Goldito checks every piece of text against what's behind it; anything under 4.5:1 (3:1 for big text) gets an orange dashed outline.같은 토큰을 화면 열 개에: 채팅 말풍선, 결제, 이동, 경고, 입력. 모든 글자를 뒤의 색과 비교해 4.5:1 미만 (큰 글자는 3:1)이면 주황 점선 테두리.

Runs 24 coat hues (and 3 neutrals) through Tint and Full, light and dark, and lists the weakest pair for each. No photos needed.털 색상 24개 (와 무채색 3개)를 틴트와 풀, 라이트와 다크로 돌려 각각 가장 약한 쌍을 보여줘요. 사진 없이.

How it's built: three layers of tokens만드는 법: 토큰 세 층

The photo never touches a component. It picks one seed color; the seed makes a ramp; the ramp fills the same 11 skin roles the app already has, once for light and once for dark. Components only ever ask for a role.사진은 컴포넌트에 직접 닿지 않아요. 씨앗 색 하나를 고르고, 씨앗이 램프를 만들고, 램프가 앱에 이미 있는 스킨 역할 11개를 라이트와 다크로 한 번씩 채워요. 컴포넌트는 역할만 물어요.

1 · Seed and rampOne hue from the photo사진에서 색상 하나
Built in OKLCH so every step looks evenly lighter, whatever the hue. Chroma is capped so a bright orange cat doesn't shout.OKLCH로 만들어 색상과 상관없이 단계가 고르게 밝아져요. 채도에 상한을 둬서 밝은 주황 고양이도 소리치지 않아요.
2 · Roles (Figma modes)The 11 skin colors × light and dark스킨 색 11개 × 라이트, 다크primary · primaryText · background · surface · accent · border · borderStrong · track · text · textMuted · placeholderExactly SkinColors in frontend/theme/themes.ts. In Figma: the Color collection gets Light and Dark modes; pet tones are made in code, so Figma keeps two or three sample pet modes to design against.frontend/theme/themes.ts의 SkinColors 그대로. 피그마: Color 컬렉션에 Light, Dark 모드; 펫 톤은 코드에서 만들고 피그마엔 디자인용 샘플 펫 모드 두세 개.
3 · ComponentsButtons ask for primary, never for a hex버튼은 hex가 아닌 primary를 물어요Button.primary → primary / primaryText
Chip.selected → accent + primary edge
Switch.off → track · Field hint → placeholderThe app already styles through useThemedStyles, so a new theme is a value swap, not a rewrite. Locked: error, success, warning (and surfaces), gold, cream, media.앱은 이미 useThemedStyles로 스타일링해서 새 테마는 값 교체일 뿐. 잠김: error, success, warning (와 표면), gold, cream, media.

Max's room: the tamagotchi, as a mirror of real care맥스의 방: 진짜 돌봄을 비추는 다마고치

The owner can't feed this pet; Chloe's 5-second checks do. So it never asks Robert for chores and never guilts him. It uses the same sticker and the same tone, so the photo, the colors and the room are one idea. Tap a step to see it in the phone.보호자는 이 펫에게 밥을 줄 수 없어요; 클로이의 5초 체크가 줘요. 그래서 로버트에게 일을 시키지도, 죄책감을 주지도 않아요. 같은 스티커와 같은 톤을 써서 사진, 색, 방이 한 아이디어가 돼요. 단계를 누르면 폰에 보여요.

A mirror, not a chore일이 아닌 거울Only real check-ins move the meters (meal, walk, nap). No owner buttons, no streaks.진짜 체크인만 미터를 움직여요 (밥, 산책, 낮잠). 보호자 버튼도, 연속 기록도 없어요.
Never sad, never gone슬퍼하지도, 사라지지도 않아요An empty meter reads "Waiting for the walk", not "Max is sad". Meters start fresh each morning.빈 미터는 "맥스가 슬퍼요"가 아니라 "산책 기다리는 중". 매일 아침 새로 시작.
It rests between stays머무는 사이엔 쉬어요When Max is home with Robert, the room sleeps and keeps its shelf: one sticker per day of care.맥스가 로버트와 집에 있으면 방은 잠들고 선반을 지켜요: 돌봄 하루에 스티커 하나.
Calm by default기본은 차분하게Breathing, one hop on a new check-in, all off with Reduce motion. Concept B (Full Tamagotchi) showed how loud this can get.숨쉬기, 새 체크인에 한 번 점프, 동작 줄이기면 모두 꺼져요. 컨셉 B가 얼마나 시끄러워질 수 있는지 보여줬어요.

What we need to decide정해야 할 것

1. On by default, or a choice after the first photo?1. 기본으로 켜기, 아니면 첫 사진 후 선택?My pick: a choiceAfter the first photo: "Use Max's colors?" with a preview, Not now keeps Goldito green. Changing the theme without asking feels like the app broke.첫 사진 후 미리보기와 함께 "맥스의 색을 쓸까요?", 나중에는 골디토 그린 유지. 묻지 않고 바꾸면 앱이 고장난 것처럼 느껴져요.
2. The whole app, or just the pet's own screens?2. 앱 전체, 아니면 펫 화면만?My pick: the pet's screensMax's room, his Diary, his photos when he's picked. With All pets (Max and Mochi) the app is Goldito green, otherwise it flips between cream and orange.맥스의 방, 다이어리, 맥스를 고른 사진. 모든 펫 (맥스와 모찌)일 땐 골디토 그린, 아니면 크림과 주황 사이를 오가요.
3. Tint or Full?3. 틴트 아니면 풀?My pick: TintGreen buttons stay recognisable as Goldito, and a pink or yellow primary is hard to make readable. Full is fun for the room only.초록 버튼이 골디토로 알아보기 쉽고, 분홍이나 노랑 primary는 읽히게 만들기 어려워요. 풀은 방에서만 재미있게.
4. White, black and grey coats4. 흰색, 검정, 회색 털My pick: keep greenMax is white: his coat has no hue. Borrowing from the photo means the theme changes with the bed he lies on. Keep green, and let the grounds take his coat's warmth.맥스는 흰색이라 털에 색상이 없어요. 사진에서 빌리면 누운 침대에 따라 테마가 바뀌어요. 초록을 유지하고 바탕이 털의 따뜻함을 가져가게.
5. Pick once, or follow every new photo?5. 한 번 정하기, 아니면 새 사진마다?My pick: once, from the profile photoThe tone comes from the pet's profile photo and stays until that photo changes. Feed photos never change the colors.톤은 펫 프로필 사진에서 오고 그 사진이 바뀔 때까지 그대로. 피드 사진은 색을 바꾸지 않아요.
7. The color blocks in dark mode7. 다크 모드의 컬러 블록Found while testingMint, peach, butter and blush have no dark values yet; this page proposes four. They stay the same for every pet. Muted text failed on blush (4.4:1), so text on a block is always full strength.민트, 피치, 버터, 블러시는 아직 다크 값이 없어요; 이 페이지가 네 개를 제안해요. 모든 펫에 같아요. 블러시 위 흐린 글자가 4.4:1로 떨어져, 블록 위 글자는 항상 진하게.
6. Dark mode for the demo?6. 데모에 다크 모드?My pick: System, after the freezeIt's one more mode on the same 11 roles plus dark status colors. Real work is checking every screen; before Oct 28 I'd only do it if the team has a free day.같은 11개 역할에 모드 하나와 다크 상태 색을 더하는 일. 진짜 일은 모든 화면 확인; 10월 28일 전엔 여유가 있을 때만.