THE LITTLE THINGS THAT MAKE HACHI

A familiar world.
One thoughtful detail
at a time.

A living reference for a kinder learning experience. Warm colors, clear words, tactile controls, and very good pixel companions.

GOOD MEMORIES. GREAT COMPANY.

COLOR EXPLORER / SIX PALETTES

Same Hachi. A fresh feeling.

LIVE PREVIEW

Citrus Studio is the approved palette for the landing page and app. Compare five alternatives here without changing the product theme. Your comparison choice stays in this browser; character artwork keeps its original colors.

01 / PALETTE

Citrus Studio

Fresh ivory, vivid orange, and deep emerald. The approved landing-page and app palette.

Orange invites. Yellow celebrates. Green grounds.

✦ A new memory

Little steps.
Brighter days.

Explore components

MADE FOR YOUR POCKET

Mobile design system

Screen patterns, touch targets, navigation, and accessible mobile components.

Explore mobile

01 / FOUNDATIONS

A palette from the garden.

Use cream as the base, forest ink for reading, and orange to make the next action easy to find.

Canvas#FAFBF5--cream

The main page background.

Forest ink#183D32--ink

Headlines and body copy.

Primary green#187454--green

Supporting actions and growth.

Action orange#FF9848--orange

Primary actions and warm accents.

Accent yellow#F6D84B--yellow

Celebrations and highlights.

Soft border#DCE5DA--line

Quiet divisions between content.

Space to breathe.

Reference spacing steps for new components. Existing layouts also use optical adjustments.

4

8

12

16

24

32

48

Soft edges. Solid footing.

Small controls use 9px corners. Cards use 10–17px. Phone frames use 46px. A hard, offset shadow gives primary buttons their tactile feel.

9px17px46px

02 / TYPOGRAPHY

Friendly, with a clear voice.

MANROPE / 800

Good memories.
Great company.

Display & headings · close tracking, generous presence.

DM SANS / 400–700

A new word, a good idea, or something from your notes. Give your next memory a place to begin.

Body & controls · 16px base, comfortable line spacing.

MONOSPACE / DETAIL

01 / THE MEMORY GARDEN
+10 FRIENDSHIP

Scene markers & small details · a nod to the pixel world.

03 / COMPONENTS

Small actions. Clear feedback.

These examples use the same working components as the homepage. Flip a card, open the deck dialog, or say hello to Hachi.

ACTIONS / DEFAULT, HOVER & FOCUS

Meet the companions

Orange leads. Green supports. Keyboard focus stays visible.

FLASHCARD / QUESTION & ANSWER

A pocketful of Japanese01 / 03

COMPANION / TOUCH & FEEDBACK

Let’s grow together! ♥

Short encouragement, a small movement, and a familiar face.

INPUT / LABEL & HELP TEXTA word worth keeping

A visible label makes the field clear, even after typing.

✦ A new memory● Growing together

04 / COMPANIONS & ARTWORK

A little character goes a long way.

The supplied character collection anchors the visual identity. Keep each silhouette, original colors, and crisp pixel edges intact.

Hachi

Our everyday study buddy.

A new beginning

Every friendship starts small.

Tiger

A little courage.

Shark

A curious explorer.

Dinosaur

Big-hearted company.

Official logo

Use this exact PNG for brand marks and app icons, preserving its white background. Character SVGs are companion artwork, not alternate logos.

Download original PNG ↓

Chunky pixel-art garden with a pond and cottage

A world to come back to.

Chunky pixels, gentle scenery, and open space around the character.

05 / PRINCIPLES

Kind by design.

Encourage, don’t pressure.

Say “A little more practice.” Celebrate effort, without guilt or urgency.

Make the next step clear.

One primary action. Visible labels. Helpful errors beside the field that needs attention.

Let everyone settle in.

Keep keyboard focus visible, respect reduced-motion preferences, and let layouts breathe on small screens.

HACHI / DESIGN SYSTEMBack to the garden ↗

A familiar world.One thoughtful detailat a time.