Template documentation
How to edit this template
Everything you can change, where to find it and what it does. Keep this page as a draft or delete it before you publish.
Getting started
Every page is built from stacks and components, so you can change text, colors and spacing without touching code. Start with the color and text styles in the Assets panel: they drive the pages. The code components (buttons, glass, FAQ rows, the ask bar and the mockups) keep the template's ink, paper and Google Sans in their own CSS; change those in the Orbi code file.
•
Colors: Paper (page), Ink (text), Muted and Faint (secondary text), Sky, Lilac and Coral (the orb and gradients).
•
Text: Google Sans everywhere. Display for the hero title, Heading 2 for the screen titles, Body and Small for everything else.
•
Pages: Home, Blog, Blog post (CMS), About, Help center, Help article (CMS), Changelog, Security, Log in, Sign up, Privacy, Terms and 404, plus the template pages: Template licenses, Template changelog and this documentation.
The orb
The orb is the Orb Stage code component. On the home page it sits in the fixed layer behind the screens and drives the scroll story. Select the Orb Stage layer to change it.
•
Mode: Home story (fixed, follows the screens) or Page (a still orb inside a frame, used in the page headers).
•
Screens: one entry per full-height screen of the home page, top to bottom. Each entry sets the orb state (idle, connecting, listening, thinking, speaking, error), its scale (0.9 is the normal size, 1.6 the hero, 9 makes it the background) and its position (center, right or bottom). Hero gradient and Footer tint switch the colored background and the dark footer overlay on for that screen.
•
Color A and Color B: the orb's own colors. Alert A and Alert B: the orange it turns in the error state (the Private by default screen).
•
Speed: how fast the orb breathes. Snap scroll: switch it off to scroll freely instead of screen by screen.
•
Progress dots: the Progress Dots component. It counts the screens by itself; no setting needed.
•
On click: what the orb does when a visitor clicks it. Bounce, bounce and speak for a moment, bounce and switch to the next state, or nothing.
Preloader and cursor
Both are optional. Each is a code component with an Enabled switch, so you can turn them off without deleting anything.
•
Preloader: the Preloader layer at the top of the home page. A short curtain with the orb and the wordmark that fades out when the page has loaded. Set the minimum time, the background and the wordmark, or show it only once per visit. Keep the layer named Preloader so clicks pass through it afterwards.
•
Custom cursor: the Custom Cursor layer in the bottom left corner of every page. A dot with a trailing ring that grows over links and buttons. Set the colors, sizes and lag, and whether the system cursor is hidden. It is off on touch screens and for visitors who prefer reduced motion. Keep the layer named Custom Cursor.
•
To use them on another page, copy the layer to that page.
Glass surfaces
Every card, button and tile has a Glass layer as its first child. It draws the liquid or frosted glass and points its rims at the orb.
•
Surface: Liquid Glass (clear, thin rim) for cards and ghost buttons, Frosted Glass for mockups and primary buttons, Chip for small chips, White for the nav.
•
Radius: match it to the corner radius of the frame it sits in.
•
To add a new card: duplicate an existing one, or drop a Glass component into a new frame as the first layer and set it to fill.
Mockups
The animated mockups are code components with their own text settings in the properties panel: Planner Mockup (the week grid), Mail Mockup (the email that types itself), Chat Mockup (the messages that arrive one by one) and Ask Bar (the prompt field with the popup). Step Cards and Security Card are regular Framer components: edit their text in the component; each has a Small size for Tablet and Phone.
•
Change the copy in the properties panel. The animations run whenever the mockup is on screen and stop when it is not.
•
Ask Bar: On send picks what it does. Demo popup (home) shows what Orbi would do. Search (help center and 404) filters the help articles and opens the first match; on the 404 it sends the words to the help center. Subscribe (changelog) checks the email and thanks the visitor; set Form action to post it to your newsletter tool. Prompts are the placeholder texts it cycles through; Short prompts are used on phones.
Sections and components
Each home screen is a component section (Hero Section, Plans Section, Pricing Section and so on) and the repeating cards are components with variants: Plan Card (Free, Pro, Team) and Quote Card (Nora, Daniel, Mei). Edit the primary variant to change every card at once, or edit one variant for a single card. FAQ rows are the FAQ Item code component, one instance per question.
•
Nav and Footer are shared components: the Nav on every page, the Footer on the home page and the blog posts. The help center, changelog, security, legal and template pages and the help articles carry a copy named Site Footer, and /blog and /about have their own story footer, so update the address and links in those copies too.
•
Buttons are the Button code component: label, link, style (primary frosted, ghost or solid ink), size (small for the nav, regular, large for full width, extra large), an icon (arrow, calendar, pen, bell, grid, shield, book, chat, play) and its side. Scroll to jumps to a home screen (plans, pricing, faq, contact) or to a frame on the same page by its name; Share by mail opens a mail with the page title and link. The hover state is built in.
•
Log in and sign up are designs: link Log in, Create account and Continue with Google to your own app or auth provider (most people connect their own OAuth).
•
Blog: Blog Pills filter the posts by their Category field and Blog Pager shows four posts per page. On a blog post the related posts leave out the post you are reading (the list holds the latest four and shows three).
•
Help articles on a phone: the article list folds away behind the Browse articles button (Nav Toggle) so the title is on the first screen.
•
To reorder the home page, drag the sections in the Layers panel. Screens are 100vh tall; the orb settings are matched by position, so update the Screens list of the Orb Stage after reordering.
•
Keep these layer names, the code finds them by name: Posts List, Category and Empty State (blog filter and pager), Pg Grid and Popular List (help search), Docs Nav (article list on phones), Article Body, Article Steps, Log Details and Latest Posts, the home screens named "... Section" (menu links), and Glass, Orb Slot, Cover, Arrow, Quotes, Plan Cards, Callout Text, Preloader, Custom Cursor, Footer Tint, Log List, Footer and Site Footer. The custom code in Site Settings uses a few more: Card Row, Docs Pn and Legal Toc (pressed states) and Inner, Hero Bottom, Copy Left, Copy and Copyright Row (space for the Made in Framer badge); renaming those only switches that detail off.
Fonts, images and credits
•
Font: Google Sans (Google Fonts). Replace it in the text styles to change the pages; the code components set Google Sans in their own CSS. The "orbi-fonts" block in Site Settings, Custom code (end of head) makes the browser load Google Sans from its small Latin files instead of the full ones (35 KB instead of about 2 MB). Keep it: it only applies to Google Sans.
•
Blog covers are placeholder photos from Pexels and the avatars are initials; replace them with your own.
•
The orb is based on Gooey Orb from VoiceOrbs by Alexis Munoz (MIT License). The full license text is on the Template licenses page and in the header of the Orbi code file.