# glossar.app

Source: https://glossar.app/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, organic, calm, friendly, warm, elegant, trustworthy
Colors: #fcfcfc, #060505, #06809b, #d6d6d8, #8f8f8f, #5aacbe, #535454, #9ec7d0
Type (h1): -apple-system · 40px/48px · 510 — "Fluencyatglances."
Type (h2): -apple-system · 32px/38.4px · 510 — "Curated to expand your vocabulary. From foundational A1 basics to complex C2 col"
Type (h3): -apple-system · 34px/34px · 700 · tracking 0.34px — "Library"
Type (body): -apple-system · 16px/normal · 400 — "Glossar is an iOS app and Home Screen widget that facilitates passive German voc"
Type (button): -apple-system · 15px/normal · 500 — "Buy now $2.99"
Button (primary): "Buy now$2.99" — fill #07819c, text #ffffff, radius 12px, border 1px, padding 0px 7px 0px 22px, height 54px, type 15px/500
Radii: 6px (8), 28px (5), 20px (4), 42px (3), 36px (3)

## Images

- Hero (desktop): https://media.lvly.design/library/glossar-app/hero.webp?v=4ae30d52
- Page crop (mid-1): https://media.lvly.design/library/glossar-app/mid-1.webp?v=8e99ead6
- Page crop (mid-2): https://media.lvly.design/library/glossar-app/mid-2.webp?v=0dbf90f0
- Hero (mobile): https://media.lvly.design/library/glossar-app/mobile-hero.webp?v=769f346b
- Full page (desktop): https://media.lvly.design/library/glossar-app/full.jpg?v=823e291d
- Full page (mobile): https://media.lvly.design/library/glossar-app/mobile-full.jpg?v=33967d28
- Clip preview (mp4): https://media.lvly.design/library/glossar-app/video-zou729.preview.mp4?v=258df04c

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.

## Steal-worthy details

- The pinned nav is a black pill that reveals a second, teal "Buy now · $2.99 →" pill directly beneath it — nav and checkout stacked as two rounded bars of equal width, price right-aligned, arrow in a lighter square.
- The primary CTA is a black pill containing a nested teal pill for the price ("Download for iOS  $2.99") — the price is a badge inside the button, not text beside it.
- Full-width page panels with ~42px radii float off a near-white ground; inner cards drop to 28/20px, chips to 6px — a strict radius ladder that maps to nesting depth.
- Dark-mode app screens are shown at true scale with real content (German word + English gloss list, cyan play buttons, a native picker for A1–C1 levels) rather than staged marketing mocks.
- Hand-painted Bavarian landscape art is used as the only imagery, first as a window behind the phone and finally as a full-bleed footer, giving a utility app a strong sense of place.
- The footer's meta row is a set of tiny gray chips ("Font: SF Pro", "Framework: Next.js", "Last Updated: …") — colophon as UI.
- Two-column feature captions: a bold two-word label on the left ("Truly yours.") and one gray sentence on the right, nothing more.

## Style recipe

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.