Tactile design

• Decisions. Decide what someone needs to do before choosing how the screen should look.
• Buttons and controls. Primary, secondary, pills, icon buttons, fields, toggles, switches and badges, with their press, hover, focus, disabled and loading states.
• Surfaces. Give cards, fields and menus a clear place on the page, with light and dark mode recipes.
• Layout. Column widths, spacing, where actions go and how much data to show.
• Motion. Use movement to explain a change. The skill includes timings and springs, and tells the agent when to leave things still.
• Mobile. Touch targets, type sizes, dialogs as sheets and how a sheet drags.
• Tokens. Keep your own fonts and colours. Map the rules to your design system.

A button makes a promise: you can do something here. Its shape invites the press; its response tells you the interface felt it.

• The first version gives you a label and a boundary. In the second, the edge and shadow make the button feel raised, something your finger already knows how to use.
• The dark action gives the dialog a clear priority. Cancel stays easy to find without asking for equal attention.
• Press and hold. That small give is the point: the button responds before the next screen has anything to say.

A chart is a way to ask a question of the data. I want the answer to become easier to see as you explore it.

• The grid in the first version carries almost as much weight as the data. Lighter dotted guides leave the bars in charge.
• Hover a bar, or drag across on your phone. The other hours recede and the value appears beside your attention. You can inspect one moment without losing the day around it.
• The current hour pulses because time is the thing changing here. That gives the movement a job.

A good table lets you settle into a rhythm. Once you understand one row, the next should ask very little of you.

• The first version puts a strong border around the information. The second spends more of that visual weight on the headings, where it helps you read.
• Aligned figures let you compare values down a column. Stock keeps its label and gains a coloured dot, so the state is easy to pick out.
• Scroll the sample store data sideways on a phone. The product name stays with you. You should never have to remember which item a number belongs to.

When a sheet follows your hand, you feel in control of it. The moment it stops listening, the interface starts feeling like a sequence you have to sit through.

• Try dragging the sheet down. In the tactile version, it follows your finger, then uses the distance and speed of the gesture to decide whether to close.
• Change your mind halfway and it returns. A little resistance at the upper edge gives the sheet a limit you can feel.
• The page stays visible behind it. You have opened something within the place you were working, and closing it brings you straight back.

A setting is a small commitment. You change it and expect the product to make the new state unmistakable.

• Click through the filters. The moving pill carries the selection from one option to the next, so you can follow the change.
• The switch has a thumb that travels and settles. Its position and colour agree about whether it is on.
• The badges use colour for status. The rest of the card stays quiet enough for that colour to mean something.

Opening a menu should feel like reaching into the control you just pressed. That connection matters when the page is already asking you to keep track of a lot.

• Open the product picker on either side. In the first, the menu appears at once. In the second, it grows from the button, keeping the choice attached to its source.
• The chosen item has a quiet background. You can find your current selection while still reading the alternatives.
• The menu leaves a little faster than it arrives. Once you have decided, the interface should get out of the way.

Writing takes concentration. A text field should protect it, especially on a phone, where a disappearing keyboard can break your train of thought.

• The recessed field gives your words a place to go. Its surface deepens as you type, keeping the attention inside it.
• Send the text with Enter. The field clears, but keeps focus so you can carry on. The send action fades when there is nothing left to send.
• Both versions use 16px text on touch screens to avoid the automatic zoom smaller fields can trigger on iPhone. Some of the most useful design decisions are the ones you never notice.

Run this command in your project’s terminal and choose your coding agent in the installer:

Then ask your agent to use tactile-design on a specific screen, for example: “Use tactile-design to improve this billing page.”

Is tactile-design free?

Yes. The skill and all seven interactive examples are free. You do not need a 4hands account or a purchase to use them.

Is this a component library?

It is a set of design instructions your coding agent reads while working on your project. It guides decisions about layout, controls, surfaces and motion; you do not need to replace your components to use it.

Can I use my own fonts and colours?

Yes. The rules describe relationships: which action gets the most attention, how a control sits on its surface, and how it responds. Apply those relationships with your own typeface, palette and design system.