Ana Anes
All work
MESH · project cover

UI SYSTEM · RESPONSIVE DESIGN / 2026

MESH

A reusable product UI library demonstrated through WAYFIND across desktop and mobile.

Explore the interaction states

MY ROLE

Product and UI design, component states, responsive layouts and handoff specifications.

CONTEXT

Independent system · Design specifications
Desktop and mobile · 6 interaction states · handoff

The experience at a glance

  1. Rules

    Colour, type and spacing

  2. Components

    A shared language

  3. States

    Consistent feedback

  4. Product

    Desktop and mobile

Projects, review, handoff, activity
4 contexts
From action to feedback
6 states
The same hierarchy
Responsive
Context and design decisions

PROJECT OVERVIEW

01 / PROBLEM

Reusable UI breaks down when components, states and handoff are inconsistent.

02 / RESPONSE

Build one scalable system and prove it across desktop and mobile contexts.

03 / PROOF

488 items · 113 component sets · 122 showcase instances. No production deployment claimed.

KEY DESIGN DECISIONS

Keep actions in one place

Keep the action in the same place across interaction states.

One system, four contexts

Reuse the same hierarchy and state language across four contexts.

Resize the task, not the logic

Simplify the navigation on mobile without changing what matters most.

TOOLS
Figma · Variables · Components and variants
WHAT I MADE
A 488 item UI library with 113 component sets, demonstrated in WAYFIND, a product review and handoff workspace.
EVIDENCE & STATUS
122 live MESH instances across 15 component families, 3 desktop and 4 mobile contexts. No production deployment is claimed.
THE TASK

The system in a product

WAYFIND tests MESH in realistic review and handoff contexts.

01 / WAYFIND Projects
01 / Projects
02 / WAYFIND Issue review
02 / Issue review
03 / WAYFIND Handoff
03 / Handoff
04 / WAYFIND Activity
04 / Activity
Read the thinking
The premise

A system needs a real task

MESH is an independent UI system exploring consistent states, hierarchy and action patterns across mobile and desktop. I used WAYFIND, a product review and handoff workspace, to test the components in a realistic product context.

My role covered product and UI design, reusable components, responsive layouts and accessibility specifications. The question was whether one interaction language could carry a task across different moments and screen sizes.

Application

One product. Four contexts

Projects, issue review, handoff and activity show how the same components and state patterns work together. The hierarchy stays recognisable while the task and density change.

COLOUR & TYPE

Colour has a role

Obsidian #171816 Foundation
Vellum #EEE9DF Surface
Petrol #174B4A Action & focus
Oxblood #5B1F2A Destructive
Brass #8A7440 Secondary accent
Oxide #A65332 Warning
Fog #BFC8C6 Quiet contrast
DISPLAY / INSTRUMENT SANS

Clear at
every scale.

UI TEXT / GEIST

Details that
stay legible.

Reading, labels and the everyday details of the interface.
Read the thinking
Visual language

Colour and type stay restrained

Neutrals carry the product. Material colours are reserved for active states, review, threshold and progress. The identity comes from proportions, seams and state placement.

Instrument Sans is used for display, headings and large numeric information. Geist supports UI text, reading and labels.

Material colour Role
Obsidian Primary text and primary action
Vellum Canvas and quiet grouping
Petrol Active, focus and stable states
Oxblood Review, destructive actions and errors
Brass Threshold and progress
Oxide Warning and emphasis
Fog Quiet data and neutral states
ACTION STATES

Stable action. Changing feedback

The action stays in place while feedback changes around it.

Default state of the MESH action dock

01 / DefaultReady for the next action.

Read the thinking
Design decision

Keep the action dock in the same place

Default, focus, loading and destructive states share one geometry. Feedback changes through labels, colour and a focus rail; the next action does not move when its state changes.

Actions

Six states. One steady structure

The action dock keeps the same geometry across default, hover, focus, loading, destructive and disabled states. State changes communicate progress or consequence without shifting the layout.

In context, the dock attaches to the task boundary: changes remain local until the user publishes. The relationship between the secondary action and primary action stays predictable.

COMPONENTS & STATES

One component logic

The same surface, seam, focus and status language carries across core components.

BUTTON / STYLE × STATE
Action Action Action Action
SEARCH FIELD / STATE
Search
Search
Search
TABS / ACTIVE × STATE
Overview Components Patterns Overview Components Patterns
TOGGLE / STATE
CARD / STATE
Homepage refresh

Review the final navigation label before publishing.

Component families reproduced from the current MESH UI Kit in Figma: Button, Search Field, Toggle, Tabs, Card, Toast, Result State and Focus Ring.

Read the thinking
FEEDBACK / TONE
Update available A newer version is ready.
Review required Check this state before publishing.
Something went wrong Try again or return to the previous view.
RESULT STATE / TONE
All set
! Something went wrong
! Review required
i Heads up
FOCUS RING / STYLE
Default Strong Inset
ACROSS SCREENS

New layout. Same task

Desktop shows the workspace; mobile narrows to issue review without changing hierarchy or action priority.

WAYFIND desktop workspace showing projects, activity and status
Keep the wider view.Projects, activity and status in one workspace.
What stays
The issue, its severity and the action hierarchy.
What changes
Navigation and density adapt to the screen.
The trade-off
Mobile focuses on the review task, with less workspace context visible at once.
Read the thinking
Desktop workspace

The same product at a different scale

Navigation, project metrics, recent work and activity sit on one continuous workspace surface. The desktop view keeps context broad without changing the system language.

WAYFIND is a sample product created to demonstrate MESH, not an existing product or measured customer deployment.

Responsive behaviour

The layout changes. The task does not

The review task keeps its information hierarchy, state treatment and action dock from desktop to mobile. Navigation condenses as space becomes smaller; review context and primary actions keep their priority.

FLOW & HANDOFF

From review to handoff

488 Reusable items
113 Component sets
44 px Minimum target specification
  1. 01 / AUDIT Find the issue

    Keep hierarchy and severity visible.

  2. 02 / RESOLVE Make the decision

    Use explicit state and a clear commitment action.

  3. 03 / HANDOFF Carry context forward

    Files, checks and activity stay attached to the work.

Independent design specifications; no live adoption or coded accessibility audit is claimed.

Read the thinking
State flow & handoff

From issue review to handoff

Audit, issue review and handoff use the same status language, action hierarchy and responsive rules. Files, checks and activity remain part of the same system instead of becoming a separate handoff layer.

The handoff includes tokens and variables, reusable components, contrast specifications of at least 5.64:1, keyboard order guidance, visible focus and 44 px targets. These are design specifications, not results from a coded accessibility audit.

MESH is an independent system exploration. No live product adoption or user testing outcome is claimed.

  • ≥ 5.64:1, Contrast specification
  • 44 px, Target size specification
  • 1, Shared interaction language
WHAT THIS PROJECT SHOWS

What the system needed to hold together

Systems thinking Build rules, not isolated screens.
Responsive components Preserve logic across responsive contexts.
Handoff discipline Specify states for reliable handoff.

NEXT PROJECT

SENSORY View all work