Type sets the hierarchy, whitespace does the rest. Color and decoration only appear when they carry functional weight
Intro
The term "new utilitarian" originates from the concept of utilitarianism, which philosopher Jeremy Bentham defined as the pursuit of maximizing "utility," understood as happiness and well-being.
Victionary, the publisher that introduced this term along with a publication of the same name, points to its roots in 1950s Swiss design, emphasizing order, precision, and geometry.
In interface design, new utilitarian means typography as the primary carrier of hierarchy, an achromatic or very limited palette, and grid-based layouts.
Every visual element justifies its presence. The final effect engages the user without the need to wade through visual noise.
Content separation is most often achieved using straight lines. Victionary describes this style as the "new Swiss graphic style," a reinterpretation of the popular typographic style for the digital context.
Summary
listed
Sep 2026
Also known as
Neo-Swiss, Type-Led Design, Functional Minimalism
Sources
https://victionary.com/products/new-utilitarian
Featured designers
asiagawron.com, obys.agency, Mane Tatulyan
Typography
Type is sans-serif in the Swiss tradition — Helvetica, Akzidenz-Grotesk, Univers, or contemporary grotesques cut in their image. Since there is little else on the page, typography does all the hierarchical work: scale jumps are large, weights are few, and alignment is strict. Text is set flush left, ragged right, and rarely centred.
Color palette
The palette is most often just black on white. Grays appear for secondary text and hairlines, and an accent colour is admitted only when it has a job: marking a link, a state, an active item. Colour is never atmospheric; there are no tinted backgrounds or decorative fields.
Illustrations
There are no illustrations. Imagery, when it exists at all, is photography — usually documentary, often black and white or desaturated — placed in the grid like any other block. Visual interest comes from type, rule, and proportion.
Corner rounding
Corners are square. Buttons, inputs, and cards are hard rectangles, consistent with the print origins of the style, where a rounded corner was an exception rather than a default. A radius, if it appears, signals that the project has drifted toward a softer style.
Frame shapes
Containers are rectangles whose edges fall on the grid — column boundaries, gutters, baseline increments. Nothing is placed by eye; every block starts and ends on a line the system already defines. This produces the characteristic modular look, where a page reads as a set of proportionally related fields.
Gradients
No gradients. Every surface is a solid fill, almost always white or black. This is a direct inheritance from Swiss print, where flat colour was both a technical constraint and a stylistic principle, and the digital version keeps it as a rule.
Borders
Borders are frequent and prominent: 1px, solid, black on white. They outline tables, cards, inputs, and image frames, and they are meant to be seen as part of the composition. Combined with square corners, they give the interface the look of a well-set form or a printed timetable.
Separators
Content is separated in one of two ways: a solid black rule, usually running the full width of its column or the page, or a generous band of empty space. Both are used with discipline — rules are hairline to 1px, whitespace is measured in grid units rather than eyeballed.
Containers
Containers are flat fields with clearly marked limits and generous internal padding. Content sits well inside the boundary so each block reads as a discrete unit with air around its contents.
Transparency
Surfaces are fully opaque. Overlays, menus, and modals have solid fills and hard edges; nothing shows through, and there is no glass effect of any kind. This keeps the interface in the same material register as the printed page.
Shadows
Elevation is not part of the vocabulary. Depth, where needed, is handled by black-and-white inversion: a dark panel on a light page, or the reverse.
Iconography
Icons are rare. Actions and navigation are labelled in words — "Menu", "Close", "Next" — instead of symbols, in keeping with the typographic basis of the style. Where a graphic element does appear it is a simple geometric form — a circle, an arrow, a square — and it carries a function: indicating a state, marking a direction, standing in for a bullet.
