Graphic System

The system in one sentence

Everything in Interzo is soft-edged, warm and layered like the rooms in its photographs: rounded shapes on paper and linen, a few light lines, one dark band to anchor a page, and motion that settles slowly.

Principles

Soft, never sharp. Every surface and frame has rounded corners. Buttons and chips are pills, cards have soft corners, photos sit in rounded frames. There are no sharp rectangles in the system.

Layered like a home. Pages are built from warm grounds stacked on each other: linen as the floor, paper for what you pick up, sand for a change of room, espresso for the one moment that needs weight.

Light lines, low shadows. Edges are drawn with hairlines inside the shape or with a faint, wide shadow. Nothing is outlined in black and nothing casts a hard shadow.

Calm motion. Things arrive and react slowly, with a long, soft landing. Motion confirms what happened; it never performs.

Shapes

The interface speaks with six shapes. Each has a role, and roles are not swapped: a button is always a pill, a card always has card corners.

The pill is the most recognizable element of the system after the logo. Every action, filter, tag and badge uses it, and the list of services scrolls across the home page as two rows of large pills. The arch, a window with a fully rounded top, frames the hero image of inner pages.

Surfaces and layering

• Linen is the default ground of a page. Paper and sand bands alternate with it to pace long pages.
• Paper lifts the things people interact with: cards, panels, menus and form fields.
• Sand fills full-width bands to separate sections, and smaller surfaces such as chips and icon discs.
• Espresso fills one feature band per page. Behind its text, two large, heavily blurred circles of cognac and sand give it warmth and depth. They are always soft and out of focus, never a visible shape or gradient stripe.
• Scrims sit between a photo and the text on it: an espresso gradient rising from the bottom, never gray or black.

Line and elevation

Borders are drawn as an inset line in the line color, so they never change the size of a shape and stay as light as the type. Dividers are single hairlines. Cards resting on linen use a two-part shadow: a faint close one and a wide, low one, both tinted espresso. Only elements that float above the page, such as menus and dialogs, and cards being hovered, take the deeper float shadow.

Motifs

The up-right arrow. Every link or button that leads somewhere ends with an up-right arrow, sized to the text. On hover it moves a small step in its own direction. It is the system’s only directional motif.

The pill. Beyond buttons, pills carry tags, filters, map prices and the scrolling list of services. Large pills set in sand or outlined in paper on espresso turn a plain list into a graphic element.

The disc. A sand circle holds the icon that opens a service or a feature. It echoes the pill and keeps icons from floating on their own.

Image treatment

Photos always sit in a rounded frame, with card corners or in the arch. They fill their frame edge to edge, cropped by the frame and never letterboxed. When text sits on a photo, an espresso scrim from the bottom keeps it readable. Photos in cards zoom slightly and slowly on hover. Captions, when needed, sit below the image in small stone text, never on top of it.

Layout and grid

Content lives in one centered container with gutters that grow with the screen. Long reading text keeps to a narrower column. Sections are full-width bands with generous, fluid vertical padding; their backgrounds alternate between linen, paper and sand, with a single espresso band as the dark accent and full-bleed photography at the top of the home page. The exact widths, breakpoints and spacing scale live in the operational design system.

Motion

• Reveal. Content fades up once as it enters the screen, over the slow duration with the calm curve. Hero headlines rise word by word out of a clipped line.
• Hover. Buttons change color, arrows nudge, card photos zoom by 3 to 4% and clickable cards lift with the float shadow.
• Ambient. The service pills scroll in two rows in opposite directions, pause on hover and stop when they leave the screen.
• Smooth scroll softens page scrolling on desktop.
• Reduced motion. When a visitor asks their system for reduced motion, reveals, scrolling pills and smooth scrolling are turned off, and content simply appears. Touch devices use native scrolling.

Putting it together

Three compositions built only with the elements in this book: the logo, the palette, Geist, the icon set, the photography and the shapes and surfaces above. The copy is Interzo’s own.

Correct and incorrect use