OpenTag
tryopentag.com/
OpenTag is a Productivity & Collaboration product. See its tryopentag.com landing page design in full — desktop and mobile screenshots plus close-ups of the heroes, footers, pricing, faqs and blog pages. It's built with Next.js and Tailwind CSS. Its type is set in stkEarlRegular, anchored by a #49144a palette. Study how OpenTag structures its messaging, layout and visual hierarchy, then explore more of the best Productivity & Collaboration website designs.
- Category
- Productivity & Collaboration
- Style
- LightColorful
- Stack
- Next.jsTailwind CSS
- Fonts
- stkEarlRegularLatoInter
- Palette
- Meta title
- OpenTag | AI Coworker for Slack and Team Workflows
- Sections
- 5
- Updated
OpenTag's landing page, section by section
Each section below is cropped straight from OpenTag's live page — useful references for productivity & collaboration landing page design.
OpenTag design review: how the homepage is built
The page runs from a centred hero over a Slack window mockup to a logo row, a tabbed use-case block, a four-step explainer, three alternating knowledge rows, an integrations list, a scatter of model tiles, two link cards, a ten-question FAQ, a closing call and a gradient footer. The desktop capture is 10237 pixels tall. An off-white ground keeps it quiet, while Slack-purple #49144a frames every window mockup and blue #3a95fb colours the spiky mascot. STK Earl sets the serif headings and Inter the body. Mascots in four colours peek over the mockups, giving a Slack add-on its own character.
Above the fold
Seven links run from "Home" to "Blog", with a grey "Login" and a navy "Get started free" at the right. In the centred headline "Your AI coworker for Slack", the blue mascot stands between the first two words holding a Slack logo. A pill reads "Slack Marketplace approved" beside "Backed by" Y Combinator, above "Book a demo" and "Get started free". Below, a purple Slack window shows "# general" beside an open "Thread".
Use-case tabs and the four-step explainer
After "Trusted by teams at" and a logo row, "It helps across your connected company systems" sits over eight pill tabs, from "Research & answers" to "Documents & spreadsheets". The active tab pairs a paragraph and two app chips with a tall thread mockup. "How OpenTag works" lists four steps on a wavy vertical line; only "Review important actions" is dark, the other three fade to grey.
Knowledge rows, integrations and models
"Build shared knowledge" introduces two rows that swap sides, "Keep your company wiki current" and "Keep context when people leave", each beside a thread citing sources. "Works with the tools your team already uses" links "50+ integrations" and offers "Request integration" beside a fading list of app toggles with Gmail on. "The best model for every task" sits among a dozen scattered tiles, each a model logo over a blurred photo.
FAQ, closing call and footer
Two white link cards, "Explore OpenTag for Slack" and "Compare OpenTag and Slackbot", lead into "Frequently asked questions", ten rows with plus icons starting at "What is OpenTag?". A waving coral mascot tops "Turn requests into results" with "Book a call" and "Get started free". The footer fades into a blurred pastel gradient with "Product", "Resources", "Legal" and "Socials" columns, and a giant serif OpenTag wordmark runs off both edges.
On mobile
At 390px the headline breaks over three lines with the mascot still inline, and the hero buttons stack full width. The desktop window shrinks to a phone-style "Thread" card. The use-case tabs become a swipeable carousel with dot indicators, as does "How OpenTag works". Model tiles line up in two scrolling rows, and the footer columns pair up two by two above the cropped wordmark.
Worth borrowing
- Standing the mascot inside the headline, between its first two words, makes the brand character part of the claim.
- Greying out all but one step under "How OpenTag works" turns a static list into a reading order.
- Fading the integration toggles at both ends suggests a longer list than the eight names shown.
