← Blog Eugene Arutyunov April 7, 2026

The Page Composition Rule

Page composition follows a single rule:

A section can consist of one or more widgets, or of a text-content block; but a section cannot contain more than one text-content block, and a section cannot have widgets and text content sitting side by side.

Three primitives:

Section — rectangular container, full width, occupying the full column.
Widget — interactive element or data presentation, rendered as a card with rounded corners.
Text-content — free-form HTML with shared styles.

Why such strict rules?

First: it brings maximum clarity about what developers can expect from designers — and what designers can expect from developers. The rule is defined once and applies everywhere.

Second: the rules aren't actually that strict. One section can hold any number of widgets. Another can hold rich freeform text. Nesting and composition happen at the section level upward, not inside the section.

The gain is in isolating objects so they don't affect each other. A widget never needs to know about text; text never needs to adapt to widget presence. Each object is responsible for itself.

Part 2. Mobile Responsiveness Out of the Box

Prototypes support mobile responsiveness out of the box.

The primary target is desktop, but mobile matters. A mobile layout isn't a separate initiative — it's basic accessibility. Getting it wrong means the product becomes unusable for a portion of users before any deliberate mobile work begins.

The solution is to get layout and navigation right once and maintain responsiveness at the component level. The intermediate layer is the widget-and-text-block rule: because widgets and text blocks are isolated, each adapts independently without side effects on its neighbors.

Full mobile optimization is a somewhat different problem: interactive charts, controls sized for fingers, correct behavior under slow connections, offline states, and so on. All of that can be built on top of the pre-prepared foundation whenever the time is right.

The distinction matters. "Mobile-ready" means the structure holds. "Mobile-optimized" means the experience is designed for it. The design system provides the former; the latter is deliberate product work on top.

Part 3. Adjusting the Type Scale

We’ve adjusted the text scale and layout width.

The design system is built to allow these adjustments. The base font size, the text-width cap, the spacing — all of these are tokens, and the whole system reacts when any of them change.

Feedback from the team was that the font felt too large, and also that there was a shortage of horizontal space. Large type and narrow width are, in a sense, the same problem.

The advantages of large text in a narrow column:

easy to read
the width constraint is disciplining
it forces thinking about composition
human attention is limited; a narrow column forces building a coherent narrative
when the base font is well above the minimum, it allows meaningful contrast with larger headings and smaller captions

The disadvantages:

can feel unnatural in a platform-product context
makes it hard to fill tables and horizontally extended components
less fits on screen vertically

It's useful to start a design project with less space than you think you need. Constraints are generative.

But having designed enough and run into real constraints, we decided to listen and move toward more breathing room. The base font went from 125% to 118%, and the text width widened slightly.