Layout & Grid Logic
Layout follows image attitude: closeness, directness, no overdesign.
Desktop (1440px): 12 columns, 24px gutter, 80px outer margin
Mobile (375px): 4 columns, 16px gutter, 20px outer margin
Image priority – images get space
Whitespace as design element – min. 80px between sections
Asymmetry allowed – left-aligned standard, centered only for hero headlines
No decorative elements – no lines, background shapes, non-functional shadows
Hard corners: a shape is either square or has no corners at all. Surfaces, tiles, cards, badges, note boxes, image frames and buttons are square, in every medium. Natural shapes without corners are allowed, meaning circle and pill: the CTA button on the web as a pill, the status pill, the ball, a round image crop or a round sticker. The only thing ruled out is the in-between, a rectangle with rounded corners. The exception is speech bubbles in recreated chat and messenger interfaces, for example in chat ads: they are rounded as in real messengers, with the corner on the side of the person writing set sharper. This applies to the speech bubbles only, not to cards, tiles or buttons in the same visual. A card, index card or tile with soft corners is a rectangle and is set with square corners. This also applies to supplied slides and templates: the PowerPoint shape "Rectangle: Rounded Corners" is switched to a plain rectangle. Screenshots of the live shop in mockups show the interface as it is. Rounded tiles or cards in the live shop are, however, no model for new design.