SaaS Game UI · A playable design system

Make the interface
a place.

A JRPG-inspired design system for SaaS, AI agents, and automations. Characters become assistants. Equipment becomes tools. Actions, dependencies, and results become things you can see and operate in a world.

01 / Play the idea
01 · Embodied interaction

Fieldwork

Walk, collect context, equip your party, and recover a patch. Operate an AI harness through a character.

Enter the field ↗
02 · A world you operate

Creature Works

Walk through Fernhaven with a dinosaur assistant. Hatch an individual companion, buy gear at the outfitter, and take a mission from the town board.

Enter the town ↗
03 · Agent coordination

Relay Guild

Queue party orders. Pass evidence between agents. Watch waiting work resume when its input arrives.

Gather the party ↗
Lv. 3 · Trusted helper
Pattern / Places & companionship

A place for each action.

The keeper moves through the town. The hatchery reveals companions with persistent colors, markings, and proportions; the shop sells tools; the board assigns missions; camp manages routines. Inventory (I) and Character (C) open only when needed. The field stays a playable world.

Walk→Approach→Interact→See the result
Explore Fernhaven ↗
02 / The shared language

Every game action needs a software consequence.

The world is the working surface. A focused command panel exposes the next action; inventory, settings, and evidence appear when requested. Six primitives connect the scene to the application.

Actor

Agent / worker / operator

A named entity with a job, capabilities, and current state. Select its character to inspect and direct it.

search.ts→ context

World object

Input / destination / output

A meaningful resource you can approach, target, collect, or inspect. Objects retain a useful identity.

▸ Research → Archive

Command

Action + target

Choose an actor, choose an action, then its target. Preview the consequence before execution.

Equipment

Context / tool / policy

Changes what an actor can do or how it runs. Wings change duration. A charm changes retry behavior.

✓ 4 checks passed

Feedback

State / progress / result

Movement, labels, and marks reveal what is happening. Completion follows verified work.

00:05 · Scheduled run00:08 · Digest delivered00:10 · Next occurrence

Record

Stats / log / evidence

Open the character’s dashboard for exact values, history, and artifacts. The metaphor has an inspectable truth.

03 / Visual foundations

A quiet frame.
A legible little world.

A readable field and focused game screens. Fieldwork and Relay use smooth 2D art. Fernhaven uses an orthographic 3D town, textured dinosaur skin, warm lighting, and parchment screens. Modern type keeps exact controls legible.

Color has a job

The original studies use midnight, blue, and parchment. Fernhaven uses warm paper, fern green, and amber over a sunlit world. Selection and status always have a text label.

Inter, throughout

Aa 0123

One family. Regular body, medium labels.
10–12px metadata · 14–16px content · 26–36px game titles. Large editorial type belongs outside the game.

Frames, with purpose

Actor → command → consequence

The field fills the game. A destination reveals its own screen; I and C open inventory and character. Thin borders group exact settings. Closing a screen returns you to the same place.

04 / Interaction principles

Keep the play.
Respect the work.

The system is useful when the game makes a relationship easier to understand. These are the rules each study exercises.

  1. Make selection distinct from execution.Approaching an object or selecting an actor opens its available actions. Targeted commands have a confirmation step.
  2. Reveal one layer at a time.The field shows who and where. Selection shows what can happen. A dashboard or log explains the exact state.
  3. Make upgrades change behavior.Equipment controls context, tools, duration, and retries. The creature’s appearance reflects its configuration.
  4. Show dependencies in the world.An agent can wait for an artifact. A handoff transfers that input and lets the queued work continue.
  5. Keep the controls accessible.Keyboard and touch have equivalent commands. Reduced motion removes decorative bobbing and camera easing; navigation remains visible. Native inputs handle exact settings.
  6. Leave the player an exit.Escape cancels active targeting first, then opens the game menu. Resume the scene or return here to understand its design.