Hero
The landing page hero, and the reference layout for every marketing page.
It holds the site nav with the wordmark and an eyebrow in overline (the small line above the headline). Then comes the headline in Familjen Grotesk hero, with one green word, and a lead in body-lg. Below sit two control-lg buttons, filled first and outline second. The caret, drawn large, is the only art. A proof row of three plain facts closes it.
- The headline has 12 words at most. On phones it drops to
hero-smand the caret shrinks above the text. - One layout gives two variants. upmo.ai (shown): eyebrow “Open source · managed or self-hosted”, filled “Start on Upmo Cloud”, outline “Install Upmo”, proof row “Open source, AGPL”, “Your keys stay yours”, “Costs shown, never guessed”. upmo.dev: eyebrow “Open source · self-hosted”, filled “Install Upmo”, outline “See a task run”, proof row “Docker Compose, one Postgres”, “Your data stays on your server”, “Costs shown, never guessed”.
- There is no motion beyond the landing loader. The caret draws once on load. The page scrolls down.
- See Marketing kit for the other layouts, words and assets.