Responsiveness in Kookie UI.

Most responsive design starts and ends with screen width. One breakpoint at 768px decides whether the screen is a phone, whether text gets bigger, whether a sidebar fits, and whether a card has room for two columns. These look like one question, but they are three, and width answers only one of them well. Every app solves this again, screen by screen, and the result is different every time. Responsiveness is a pattern, and a design system is the right place to decide a pattern once.

The first question is what touches the screen. A finger is less precise than a cursor, and a phone is held close to the eye, so on touch Kookie UI makes controls and text larger. A size 2 button grows from 32 to 44 pixels, its label from 14 to 16, and the icon and checkbox beside it grow with it. Kookie UI reads the pointer for this, and the width does not matter. Apple uses one text size table for iPhone and iPad, and a width rule would give an iPad in landscape the small text of a desktop. A laptop window made narrow keeps its reading sizes. It loses only the largest headline sizes, because a long headline does not fit a narrow line.

The second question is how much room one component has. A card in a sidebar and the same card in the main area sit in the same window, but they have very different space. Kookie UI lets a region measure its own width, so the layout inside it changes with the space it actually gets, wherever it is placed.

The third question is which interface the app shows. Here the window does matter, but the window is not the device, because people run apps in split views and small windows on every platform. Kookie UI has three window sizes, narrow, regular and wide, named for room. They pick the navigation: a sidebar on a wide window, a rail on a regular one, and a tab bar on a narrow one. An app gets all three answers from the system, and its screens stay consistent on every device.