glossar.app

Glossar's landing page is an Apple-grade indie app site: an SF Pro system stack on a near-white #f5f5f7 ground, one short serif-free headline ("Fluency at glances.") under a lone teal app icon, and everything else pushed into large rounded panels that read as the app's own surfaces. The interest is in the contrast between two textures — crisp, dark iOS chrome (a pinned black pill nav with a teal "Buy now $2.99" drawer, dark mode Library and Settings screens with cyan play buttons) and soft, painterly Alpine landscape illustrations (meadows, chalets, onion-dome church, edelweiss and gentians) that bleed behind the phone mocks and finally take over the footer. It is a very long, scroll-pinned page — 10k px — where sections cross-fade in place, so the copy is sparse and each panel gets the whole viewport. Warm, quiet and confident, with a single one-time price repeated as the whole call to action.

Set the page on #f5f5f7 with white #fcfcfc panels; use the Apple system stack (-apple-system, SF Pro, Helvetica Neue) at 510 weight for headings (40px/48px, no tracking) and 400 for 16px body in mid-gray #535454/#8f8f8f. One accent only: deep teal #07819c (lighter tints #5aacbe, #9ec7d0 for secondary fills) against near-black #060505 chrome. Build layout from large rounded containers with a radius ladder — 42/36px for full-width page panels, 28px for cards, 20px for inner tiles, 12px for buttons, 6px for chips — and let nesting depth pick the radius. Make every control a pill: black primary buttons 54px tall with 15px/500 text, and put secondary values (a price, a count) inside a nested teal pill at the trailing end. Show product UI as real dark-mode screens with hairline separators and a single cyan action color. Pair the hard, dark UI with one soft painterly illustration style — muted greens, slate-blue mountains, small wildflowers — used both as a backdrop cropped inside panels and as a full-bleed footer. Keep copy to a two-to-four-word bold label plus one gray sentence per section; pin sections and cross-fade content on scroll instead of stacking many short blocks. No drop shadows on the ground plane; depth comes from panel tone and the dark screens alone.