hachi.← Design system
HACHI / MOBILE DESIGN SYSTEM

A little world.
Made for your pocket.

Mobile patterns for calm, comfortable learning. Shared colors and character, with room for thumbs, safe areas, and one small action at a time.

01 / SCREEN PATTERNS

One companion.
Three little moments.

Explore Study, Hachi, and Create using the tabs in the phone. These are interactive web prototypes for the mobile design language.

  1. Recall, then reveal.A single card keeps attention on the question. Rating actions appear after the answer.
  2. Make progress feel personal.Friendship points connect learning with your companion’s growth.
  3. Capture a small discovery.Visible labels, generous fields, and feedback beside the action.
Preview frame: 360px wide. App content adapts to narrower screens. Native safe-area values come from the device, not a fixed inset.
YOUR DAILY PRACTICE

A little wiser.

A pocketful of Japanese1 / 3

One card at a time.
You’re doing great.

02 / MOBILE FOUNDATIONS

Comfort is in the details.

44 × 44

Touch target

Minimum target for this mobile web system; allow space between neighboring controls.

20px

Page gutter

A calm default inset, reduced only when narrow viewports need it.

16px

Input text

Readable field text and comfortable entry on mobile browsers.

52px

Primary action

Full-width actions with a clear label and a tactile pressed state.

4 · 8 · 12 · 16

Spacing rhythm

Use 24 and 32px to separate groups; keep related items closer.

Device-driven

Safe areas

Add platform safe-area insets above and below the content and navigation.

A readable mobile scale.

Screen title28 / 34 · Manrope 800
Section title20 / 26 · Manrope 700
Body & inputs16 / 24 · DM Sans 400
Controls14 / 20 · DM Sans 700
Supporting labels12 / 18 · DM Sans 500

Values are CSS px / line height for this web reference. Native implementations should use scalable platform text styles.

03 / INTERACTION PATTERNS

Predictable, from tap to tap.

Bottom navigation

Three labeled destinations. Keep the active state visible with text and shape, not color alone. Preserve each screen’s draft while switching.

Cards & feedback

The whole card is a button. Reveal by touch or keyboard. Offer a retry without penalty, and announce progress through a status message.

Forms & errors

Keep labels above fields. Explain what needs attention without clearing the draft. Show success near the primary action.

Sheets & keyboards

For a native app, use a dismissible sheet for quick capture. Keep the action above the keyboard and restore focus after dismissing.

04 / INCLUSIVE BY DEFAULT

A gentler pace for everyone.

  • Support larger text and narrow screens without horizontal scrolling.
  • Retain visible keyboard focus and descriptive control names.
  • Keep foreground copy in forest ink; reserve pale colors for surfaces.
  • Respect reduced motion. Progress must stay clear without animation.
  • Keep essential actions available without swipe-only gestures.
  • In native implementations, verify VoiceOver, Dynamic Type, and keyboard-safe layouts on real devices.

This page documents the mobile design direction and working web component examples. It is not a shipped native iPhone app.