Structural UI: Designing with Hard Constraints

When you strip away border-radius, drop shadows, gradients, and overlapping absolute positioning, what are you left with? You are left with structure.

In modern web design, we often use CSS flourishes to create hierarchy. A soft shadow tells the user a card is clickable. A rounded button tells the user it's an interactive element. But when we look at print design — specifically Swiss International Style and early computer manuals — hierarchy is established entirely through grid mathematics, typographic scale, and solid colour blocking.

The Ticketing System

Consider the design of a boarding pass or a Japanese train ticket. They are masterpieces of high-density information architecture. Every piece of data is boxed, labelled with tiny monospaced text, and separated by hairline rules. There is no ambiguous whitespace; space is used deliberately to group logic.

By applying these constraints to digital interfaces, we force ourselves to make harder decisions about what information actually matters. The resulting interface feels less like a fluid document and more like a tactile, living machine.

Implementing the Grid

The key insight from Swiss print design is that the grid is not a layout tool — it is a meaning tool. A two-column layout where the left column is always metadata and the right column is always content creates a reading contract with the user. Break it once and you break trust.

.job-entry {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  border: 2px solid var(--rule-color);
  padding: 2.5rem;
}

The border is not decorative. It is structural. It says: this is a discrete unit of information.

Typography as the Last Affordance

Without shadows and gradients to establish depth, typography becomes the primary affordance system. Size, weight, and font family are the only tools:

• Display (Bebas Neue): Section headings, project titles — the loudest element on the page.
• Body (Inter): Readable prose at comfortable sizes.
• Mono (IBM Plex Mono): Technical metadata, dates, reference codes — signals "this is data, not prose".

The combination creates clear hierarchy without a single box-shadow.