Layout

Precision is one of Patepang’s principles: a grid of four, line heights in multiples of four, corners by rank, one type family. Every value on this page is a token in the app and is kept by a check on the sites, so nothing is measured by eye.

Every distance is a step of one scale. The app’s runs from 4 to 64; the sites keep eight of those steps and add two for the room between a page’s sections.

Under 4 is for optical touches only: a line of 1, a nudge of 2.

A corner says what rank a thing has. The larger the thing and the higher it floats, the rounder; what is pressed is a capsule.

The sites draw with four: 4, 8, 12, 24, with a pill for buttons and a circle for round things. 4 for a highlight in text, 8 for small controls and badges, 12 for notes and fields, 24 for panels, large cards and screenshots.

Separation comes from tone and thin lines first. A shadow is kept for what truly floats over the page: a dialog, a sheet, a toast, a menu.

The app has three levels: flat, with a thin line; raised, with a very soft shadow; and overlay. On dark grounds a shadow hardly shows, so raised surfaces are a lighter tone instead and only the overlay keeps one.

On the sites, cards and the search field are flat and bounded by a thin line. The one exception is the raised store buttons on patepang.com.

Everything is read in one column. In the app that column is 680 wide on every screen, so titles and content keep their left edge from screen to screen. On the sites the reading column is 660, about 70 characters a line.

Every action in the app can be hit in an area of at least 48, even where what is drawn is smaller: the round button of a header is 40 to the eye and 48 to the finger, and a small control of 36 keeps an area of 48.

On the sites the least is 44, and the main controls are 48.

Do

• Take every distance, corner and size from the scale. A value that repeats becomes a token.
• Keep one column, at one width, on every screen.
• Put the main action where a thumb reaches it: in the foot of the screen or the sheet.
• Let a list be divided by thin lines, not built of stacked cards.

Never

• A distance, a radius or a type size written by hand.
• A shadow under something that does not float.
• A column as wide as the window, or a different width for each screen.
• A control smaller to the finger than 48 in the app or 44 on a site.

Off the screen, what is settled is the logo: it is never narrower than 20 mm, it keeps a clear space of its panyecek’s width on every side, and with one ink it prints in deep blue.

Values for print inks (CMYK, spot colors) and templates for printed pieces have not been set. Until they are, a printed piece is made from the logo files and the colors’ hex values, and checked against this site.

See the logo’s sizes and the colors.

In the app every value has a name. On the sites a check refuses a distance, a corner or a type size that is off the scale.

/* patepang.com: values from the scale, kept by pnpm check:design */
padding: 16px var(--gutter);
border-radius: 12px;

// the app
padding: space[4],          // 16
borderRadius: shape.card,   // 20
minHeight: touchTarget,     // 48