Instructions

Getting started

Duplicate Lattis from the Webflow Marketplace and open it in the Designer. Start with the Style guide page to see colours, type and components in one place, and the Overview page to see every layout. The template reference pages (Overview, Style guide, Instructions, Licenses, Changelog) are linked from the Navbar and Footer: remove those links and pages before launch if you do not need them.

Theme variables and dark mode

Colours live in the Theme collection, which has two modes: Light (base) and Dark. It holds Base/Black and White, Accent/Primary, Deep, Soft and Muted, Neutral/50 to 900, Surface/Inverse, Feedback/Error and Effect/Glow. Edit a value in each mode and every page follows. The class theme-dark switches any wrapper and everything inside it to Dark, and theme-light pins a block to Light: always-dark bands, CTA panels and code panels use theme-dark, interface mockups inside them use theme-light. The navbar theme toggle adds theme-dark to the page and resets to Light on each page load. To start a page in dark mode, add theme-dark to its Body.

Typography

Geist sets headings and body text, Geist Mono sets eyebrows, badges and code. Both are Google Fonts, added in Site settings › Fonts and bound to the Fonts/Heading, Fonts/Body and Fonts/Badge variables in the Base Collection: change a variable to swap a font everywhere. Font sizes are variables too, with Tablet, Mobile (L) and Mobile modes so the scale steps down per breakpoint. Use heading-style-display and heading-style-h1 to h6 on headings, text-size-large, medium, small and tiny on body text and text-style-badge for mono eyebrows. Keep one H1 per page.

Buttons and cards

Every button is a component in the Buttons group: Button Primary, Secondary and Ghost, each with a Small version. Set Text and Link on each instance, use Ghost on dark sections and wrap rows in button-group. FAQ Item has Question and Answer props. Icon tile takes any icon-*.svg asset as its Icon and follows the theme on its own: an inverted copy of the icon fades in through Effect/Glow, so tiles stay legible in dark mode and inside theme-dark sections. The Cards group also holds Feature row, Security cell, Chip, Logo cell, Story card (Company, Product, Metric, Description, Link) and Release row (Date, Tag, Title, Link).

Section components

Benchmarks has Heading, Heading accent, Note and Image, plus a Rows slot: add Benchmark Row instances, fill Workload, Lattis value, Provider value and Difference, and pick the Variant that sets the Lattis bar (17, 25, 33, 47, 50 or 65%) against the fixed 80% provider bar. Closing Split pairs an image with a dark panel: Eyebrow, Heading, Heading accent, Text and two buttons. CTA Terminal is a grey panel with two buttons and a terminal written as real text (Path, Shell, three command lines, an output line and a status line). CTA panel is a full-bleed image CTA with Heading, Text, Image and two buttons. Lottie card has Label, Text and a Visual slot for a native Lottie. Navbar and Footer are single components: edit them once and every page updates.

Collections

Four collections drive the site. Customers: company, industry and product for the filters, headline, metrics, quote, the challenge, change and result sections, an optional config snippet, before and after bars, and a Featured switch for the top story. Integrations: category, icon, tagline, install command, setup steps and spec rows, a Sort order number (lowest first in the catalogue), a Badge text (Official or Community, kept in line with the Official switch) and Works well with (up to 3 integrations). Releases: version, date, type, product and summary, an optional Snippet (one line per row) and Tags 1 to 3, plus Added, Changed and Action needed for the release page. Articles: category, summary, cover, author name, role and initials (the avatar circle), Heading lead and Heading accent (the two-colour H1), Body, a Contents rich text whose lines link to #heading-id (give the matching H2 in Body the same id) and a Featured switch for the large Blog card.

Adding an item

Open the CMS panel, choose a collection and click New item. Every field has help text with the expected format and length. Optional fields hide on the page when empty, so leave them blank rather than typing placeholders. Covers are 16:9, at least 1600 px wide and under 150 KB. Publish the item and it appears in lists, filters and its own page at /customer/, /integration/, /release/ or /article/ followed by its slug.

Pages and templates

Lattis includes 3 home layouts (Home 1, Home 2, Home 3), 3 product pages (Product 1 Inference, Product 2 Agents, Product 3 Evals), Pricing, Integrations, Customers, Docs, Security, Product changelog, About, Careers, Job, Blog, 3 contact pages (Contact 1 sales, Contact 2 support, Contact 3 minimal), Book a demo, Sign in, Create account, Privacy policy, 404 and 401, 4 CMS templates (Customer, Integration, Release, Article) and the template pages Overview, Style guide, Instructions, Licenses and Changelog. Page names match their slugs (product-1, contact-2 and so on): rename them to fit your product, and on a paid site plan add a 301 redirect in Site settings when you change a published slug. Product changelog holds the demo company's release notes from the Releases collection; Changelog records updates to the template itself. Keep the home you like, set it as the homepage in Page settings and delete the rest.

Video and images

The Home 2 hero uses the native Background Video element with its pause button: select it to swap the video and poster, and keep the pause control for accessibility. Images are WebP, cards and covers under 150 KB, and full-bleed images have square corners. The demo imagery was made for Lattis with Weave and Figma AI; its terms are on the Licenses page. To replace an image, select it, pick a new asset and update the alt text.

Inline SVG and Global Styles

Icons that must follow the theme are inline SVG, not images: the Lattis logo and mark in the Navbar, Footer and sign-in screens, the sun and moon in the theme switch, the navbar chevrons, the mega menu product and page icons, the icon tiles on dark sections (Home 2 security, Home 3 principles), the Home 1 hero waveform, the Integrations hub lines, the integration page sparklines and the customer before and after bars. Each uses fill or stroke set to currentColor, so it takes the text colour of its parent and switches with the theme. To change one, select the svg in the Navigator and edit its path in Settings, or delete it and add a Code Embed with your own SVG (keep fill or stroke as currentColor to keep theme switching). If an icon does not need to follow the theme, swap it for an Image with an SVG asset. The Global Styles component at the top of every page is a Code Embed with CSS only, no JavaScript: font smoothing, a keyboard focus outline for tabindex elements, rich text first and last margins, container centring, 2 and 3 line clamps, the hide, hide-tablet, hide-mobile-landscape and hide-mobile utilities, and the Client-First margin and padding reset classes. Keep it on every page and add any site-wide CSS of your own there.

Lottie animations

The product animations (inference routing, agent sandbox, eval scores) are native Lottie elements with Loop on and the class lottie-fill, and each comes as a light and a dark JSON file. To replace one, upload your JSON through the Designer Assets panel (files uploaded elsewhere do not appear in the Lottie picker), select the Lottie element and choose the new file. Lottie cards and wrappers also keep both file URLs in their data-lottie and data-lottie-dark attributes.

Scroll interactions

Motion runs on native Webflow Interactions (IX3), animates only transform and opacity and plays once when an element enters the view (its top at 85% of the screen). Add the animate attribute to any element to reuse a motion, or remove it to turn motion off: heading-reveal (lines slide up from a mask, 600 ms), fade-up (single blocks, 16 px rise, 600 ms), stagger (direct children fade up 80 ms apart), image-reveal (the wrapper fades in while its image scales from 1.06 to 1), bar-grow (the element grows from the left), bars (bars inside grow from the left 80 ms apart: Inference route card, Benchmarks, customer before and after, Overview), steps (children fade up 100 ms apart while step numbers, year markers, connector lines and arrows grow in) and markers (only the numbers, markers and rail lines, used on Docs steps and changelog entries). The matching interactions are named Lattis and P: in the Interactions panel. Page motion also covers the Integrations hub (nodes scale in, dashed links fade in), the footer wordmark (rises 40 px), the 404 lattice digits, the nav capsule on page load and a 3 px arrow nudge on hover for support cards, job rows, customer cards and release rows. When a visitor turns on Reduce motion in their system settings, every reveal shows its end state at once and hovers stay still.

Theme toggle, FAQ, tabs and filters

Theme toggle: the navbar switch is a real button, so a click, Enter or Space toggles the class theme-dark on page-wrapper; every page starts in Light. Each light Lottie has a dark twin in the same wrapper, and their opacity is bound to the Theme variables Effect/Glow and Effect/Light only, so the two files cross-fade in 200 ms with no extra interaction. FAQ: each FAQ Item opens and closes on click or keyboard (the answer fades in and the plus turns 45 degrees, with no height animation). The Open variant starts expanded: set it on the first item of a list. Tabs: Pricing Monthly and Annual, the Home 2 feature rail and the code samples on Home 3 and Docs are native Tabs with a 200 ms fade in, set in Tabs settings. Filters: the chips on Integrations, Customers, Blog, Careers, Product changelog and the Home 2 FAQ mark the clicked chip as active (combo class is-chip-active, the All chip starts active) and scroll to the list below. They do not hide items, because filtering a Collection List on click needs custom code; for real filtering, replace a chip row with native Tabs and give each tab its own Collection List filtered by Category. The contents rails on Docs and Privacy policy highlight the section in view through the native Current state of their anchor links (docs-rail_link and pp-toc_link, Current state). Screen readers do not hear an expanded or pressed state, because interactions cannot change ARIA attributes.

Forms

All forms are native Webflow forms with their own success and error messages. Set the notification email in Site settings › Forms and connect Make, Zapier or your CRM by form name. Sign in and Create account are demo screens: connect your own auth provider or point the forms to your app, and set the Continue with SSO and Terms links, which are # in the demo. On Book a demo, set Form settings › Redirect URL to your scheduler page. The Job form takes a link to a CV; on a paid site plan you can swap it for a File Upload field. The Job page Share button is a mailto link with the demo URL in its body: change it to your domain. On Contact 2 (support), the Community and GitHub cards link to #: add your URLs. The Security packet form on the Security page collects work email and company for your security team.

SEO and llms.txt

Every page has an SEO title and a 150 to 160 character description in Page settings, and Open Graph copies them. CMS templates pull titles and descriptions from collection fields, so each item gets its own. Upload your Open Graph image, favicon and webclip in Site settings. An llms.txt file is added in Site settings › SEO: replace it with your own product description and key pages.

Design source file

The Figma source file is included with every purchase. Request it through the support contact on the Lattis Marketplace listing, with your order details, and it is sent within 1 to 2 business days.

Help and support

Template support runs through the support contact on the Lattis Marketplace listing. Expect a reply within 48 hours on business days.

Licenses and changelog

Fonts, icons, images, video and Lottie animations used in the demo are listed with their sources and terms on the Licenses page. Updates to the template are recorded on the Changelog page.