Tactile design

What it covers

• Decisions. What to settle first: the hierarchy and the next step. Then how much data, where things go, components, surfaces, type, colour, motion and phone.
• Buttons and controls. Primary, secondary, pills, icon buttons, fields, toggles, switches and badges, with their press, hover, focus, disabled and loading states.
• Surfaces. Ground, panel, raised, well and overlay, with shadows for light and dark. Modals, sheets, menus, toasts, cards and tables.
• Layout. Column widths, spacing, where actions go and how much data to show.
• Motion. Whether to animate at all, then curves, durations and springs with exact values.
• Mobile. Touch targets, type sizes, dialogs as sheets and how a sheet drags.
• Tokens. Roles instead of hex codes, so you can map it to your own typeface and colours.

Buttons

A dialog with a primary and a secondary button. Press and hold them on both sides.

• The dialog and the secondary button swap their border for a 1px ring and a soft 1px drop.
• Primary gets a lit top edge and a short shadow underneath.
• Both shrink to 97% when pressed, over 160ms.
• Hover goes one step lighter, only on devices with a mouse.

Charts

Sessions per hour from an overview page. Hover the bars, or drag across them on your phone.

• The card sits on a tight tactile shadow.
• Dotted lines over a hairline baseline instead of a solid grid.
• The scale moves to the right, in mono, so the numbers line up.
• Hover a bar and it stays lit while the rest dim to 35%, with its value on a pill.
• Bars get 3px rounded tops, and the current hour pulses.

Tables

A table filled with placeholder store data. Hover the rows.

• White rows in a 0.5px frame with a small drop shadow, instead of a 1px border.
• The header goes full black and columns get 0.5px dividers.
• One typeface across the whole table, with tabular numbers so the figures line up.
• Stock shows as a coloured dot.
• When it scrolls sideways on a phone, the product column stays put.

Drawers

A bottom sheet on mobile. Drag it down or flick it away, then tap the switcher at the bottom to bring it back.

• A white grab handle sits just above the sheet. Drag it, or tap it to close.
• The sheet follows your finger from anywhere on it and closes after a short pull or a quick flick. Otherwise it springs back.
• Pull it up and it gives a few pixels, then stops.
• It slides up in 320ms and down in 200ms, over a 30% dim with a slight blur.
• Organizations sit in one raised card, with their button underneath at full width.

Controls

A settings card with a filter, a switch and status badges. Click around.

• The card sits on a tight tactile shadow.
• The selected filter sits on a white pill that slides over on a spring.
• The switch knob gets a shadow and springs across.
• Badges are fully rounded, with a thin edge and a soft shadow in their own colour.

Dropdowns

A product picker on an order card, filled with placeholder store items. Open it on either side.

• The button swaps its border for a thin ring and a small shadow, and shrinks to 97% when you press it.
• The menu sits on a crisp shadow and grows out of the button in 150ms, then shrinks back in 120ms. Before, it just blinks in and out.
• Items get rounded highlights, and the one you picked turns grey instead of bold.
• The chevron flips over while the menu is open.

Inputs

A plain text field with Enter at its right end. Sending what's in it empties the field. Both sides use 16px text on touch screens, because an iPhone zooms in on any field set smaller and stays zoomed.

• The field drops its border and sits in the card as a grey well, one step darker while you type.
• Enter stays a flat icon, but it darkens and presses in when you tap it or hit Return, and fades out when there's nothing to send.
• Tapping Enter keeps your cursor in the field, so a phone's keyboard stays up.

Install