← Back to Hatchbench Design & software · Original work

UI concepts.

Five visual systems.
Designed and built by me.

I explore how an interface's visual language changes the experience of using it, then build that language into components and working showcases.

01 / Engineering interfaces

Fieldwork UI

A clear view of a complex system.

Fieldwork operational dashboard with an asset list, map and selected-asset details
Actual local showcase. The dashboard uses simulated assets, telemetry and map data.

The design

A dark operational workspace with restrained typography, fine borders and status colors. An asset list, central map and detail panel share the same selected state.

What I built

A React and TypeScript showcase with asset search, filters, linked selection and reusable interface components. The kit includes panels, detail rows, status indicators and dialogs, plus an aircraft and mission-interface concept.

ReactTypeScriptCSS tokensComponent library
View full screenshot ↗
02 / Hardware-inspired controls

Glyph UI

Digital precision, with a tactile character.

Glyph's graphite component showcase with orange controls and a circular dot-matrix display
Actual local showcase of Glyph's visual system and interactive controls.

The design

Graphite surfaces, square controls, signal orange and dot-matrix details bring the language of physical devices into a web interface.

What I built

A React and TypeScript component kit with buttons, switches, inputs, segmented controls and modal dialogs. The showcase includes component search, density controls, code examples and shared device settings.

ReactTypeScriptDesign tokensSelf-hosted fonts
View full screenshot ↗
03 / Game-inspired patterns

Lore UI 2

Reusable pieces of a game-like interface.

Lore's quest board showing unfinished and completed task cards
The working quest-board component in the local standalone showcase, using sample tasks.

The design

Quest cards, dialogue and feature tiles give tasks and navigation a game-inspired visual language.

What I built

I extracted reusable primitives and patterns from Lore into a standalone React kit: quest boards, chat bubbles, navigation cards, a touch joystick and feedback components. The components use props and callbacks in place of app-specific routing and data dependencies.

ReactReusable patternsComponent extraction
Visit Lore UI 2 ↗
04 / Playful interaction

Bounce

Soft shapes. Expressive feedback.

Bounce's light component kit with colorful rounded buttons, offset shadows and input controls
Actual local component-kit showcase, including visual button states.

The design

A light, colorful system with inflated shapes, outlined controls and hard offset shadows. Motion adds squash-and-stretch feedback to buttons, cards and other interactions.

What I built

A component showcase exploring buttons, inputs, switches, badges, cards, tabs and accordions, with a consistent set of shapes, colors and interaction states.

Interface designCSS motionComponent states
Visit Bounce ↗
05 / Graphic interfaces

Shonen UI

A visual system with energy.

Shonen UI's manga-inspired showcase with ink outlines, dramatic typography and bright orange actions
Actual local theme showcase with navigation, buttons and card specimens.

The design

Manga-inspired ink outlines, halftone textures and hard shadows pair with expressive typography and a focused orange accent.

What I built

A themed HTML and CSS interface kit covering navigation, buttons, cards, badges and progress displays. The specimens explore how a strong graphic style carries across different interface elements.

HTML & CSSTypographyVisual system
Visit Shonen UI ↗
← Back to HatchbenchGet in touch ↗