Light blue-gray background (#E3ECF1) is the statement. Not white. Not cream. A specific, identifiable cool tone that sets the entire mood before any content loads. White cards pop against it with high contrast. The deep navy text (#102341) is a classically beautiful choice. Navy on cool blue-gray reads as nautical, clean, established.

Inter at weight 700 for headings with tight letter-spacing (-1.5px). Bold and compressed. These headings feel like product labels. Thick, punchy, designed to be read at glance speed from a coffee shop shelf. The 1.389 type scale creates noticeable size jumps that work for product showcase layouts.

Body text at regular weight (400) with 1.71 line height is extremely generous. At 14px base size, the text is compact but the line height stretches it vertically. That combination of small text with wide leading creates a magazine-editorial reading cadence. Clean paragraphs with room to breathe. The contrast between the aggressive headings and the relaxed body text creates a rhythm that feels curated, not random.

The heaviest shadows in this batch. 32 pixels deep at 30% opacity. Cards don't just sit on the surface. They press into it. The weight creates real, physical depth. Elements feel like objects with mass. The lift hover effect raises cards up from that heavy shadow, creating a satisfying before-and-after depth change. The surface opacity at 0.4 makes card surfaces slightly translucent, letting the blue-gray background tint everything from behind. The whole system feels like looking through sea glass.