TERVUNE

TERVUNE v1.0 is a fictional workflow product and an editable Framer template. Replace the demo identity, claims, people and business details before using it for a real business.

Recommended order: 1. Replace brand → 2. Update colors and type → 3. Replace product visuals → 4. Update CMS → 5. Connect forms → 6. Configure booking → 7. Review responsive layouts → 8. Update SEO → 9. Test → 10. Publish when your checks are complete.

Keep a working copy while you customize. The Style Guide contains visual specimens; this page explains the practical setup.

Need the visual design system? Open Style Guide ↗

02 / Brand

Edit the TERVUNE wordmark and compact T in Navigation/Tervune Side Menu, the Marketing Layout footer, and Home’s Intro wordmark layer. Update native marks inside software illustrations separately. The adaptive header wordmark uses the shared navigation’s light/dark behavior.

In Site Settings, replace the favicon, dark favicon where used, social image, site title and description. On light internal headers, select the particle component and replace Particle Image with your own transparent logo. Preserve its size hierarchy and title-safe space. Dark Integrations and Pricing headers do not use logo particles.

Use assets you own or have permission to redistribute. Replace fictional portraits, company names and product claims with your own verified material.

03 / Colors & type

Core palette: ivory #F3F2EE, black #000000 and brand orange #FA4601. Edit the existing semantic colors in Assets. Text/Orange Accessible (#B23400) is for small text on light surfaces; keep brand orange for fills and accents. Use black labels on orange fills.

Unbounded is the display family, Fraunces Bold Italic supplies expressive words, and Manrope handles body and interface text. Edit existing text styles and their breakpoints rather than adding competing styles. Inspect component Font controls for any local overrides.

Color tokens do not replace every code-component accent automatically. Review exposed Accent controls and light/dark states after a palette change. Keep the existing heading hierarchy and readable contrast.

04 / Navigation

Desktop uses the shared left rail: MENU, Book a demo, reading progress and an adaptive TERVUNE wordmark. Phone uses compact navigation at the top. The large close X, keyboard focus and Escape behavior belong to the shared menu.

Open Navigation/Tervune Side Menu in Assets to edit its native links. Review the matching footer destinations in Marketing Layout. Action Button exposes its label and destination. Preserve the Book a demo label on modal triggers and test each changed destination in Preview.

05 / Pages

Home (/) presents the main platform; /home-automation is the alternative automation story. /product presents the Workspace; /features and /features/routing explain capabilities. /solutions and /solutions/operations address team use cases.

/integrations is the connection catalog; /pricing compares plans; /enterprise supports tailored enquiries. /customers presents case studies. /about introduces the team; /careers lists roles. /resources contains articles; /changelog records releases; /help answers common questions.

/contact starts an enquiry; /waitlist demonstrates interest collection. /sign-in is Client Access, a configurable gateway with no authentication included. /coming-soon is a temporary launch page. /privacy, /terms and /404 are utility pages. /style-guide and /getting-started are buyer documentation.

Five reusable CMS detail templates complete the set: Resource Article, Case Study, Integration Detail, Career Detail and Changelog Detail. There are 25 static pages and 5 detail templates, not 30 separate CMS collections. Keep only the intentional pages your product needs and update their links.

Client Access

Use Client Access as a SaaS login gateway, customer portal entry, member-area link, dashboard access page or demo workspace launcher. The existing /sign-in route is retained so current links continue to work. Authentication is not included by default.

On the Client Access page, select Client Access settings in the copy column. In its Framer controls, choose Access Mode: Demo CTA, External Login Link or Login Form Placeholder. Set Workspace Portal URL for Enter workspace and Workspace; set Sign In URL for the account link and Support URL for help. Change these shared controls on Desktop; Tablet and Phone inherit the destinations. No code editing is needed to point these links to an existing external app or customer portal.

Demo CTA is the default and opens the fictional Product workspace. External Login Link uses your configured destination; changing the mode alone does not provide authentication. Login Form Placeholder shows read-only Email and Password fields with an inactive Sign in control. It does not accept credentials, submit data or simulate a successful login.

For a real member area, connect an external SaaS dashboard/login URL or implement authentication separately using a provider such as Supabase Auth, Clerk, Memberstack or Outseta. Provider setup, protected routes, session handling and account recovery must be implemented and tested separately; no provider is connected in Tervune. Replace the placeholder with your provider-backed form before enabling credential entry, then review the demo notice and links before launch.

06 / CMS

The seven collections are Resources (articles), CaseStudies (customer stories), Integrations (connections), Careers (jobs), Changelog (releases), Capabilities (shared feature content) and Questions (FAQs). The first five have connected detail pages; Capabilities and Questions supply reusable page content.

Open CMS, choose a collection and add or duplicate an item. Give it a unique slug, then replace title, category, summary, body and image fields where present. Fill the SEO description. Use meaningful image descriptions and real Heading 2/body structure in articles.

Preview the listing and the item’s detail page after saving. Check image crops, references and next/related links. Plans, comparison rows, team cards, testimonials and demo requests are native page/component content, not additional collections.

07 / Product visuals

The Home product carousel has a fixed central device and moving screens, arrows, autoplay, drag and Phone swipe. Replace its screen content in the existing frames; preserve the central device and responsive sizing.

The Workspace story below the video is a different system: persistent software with stage cards that dock through a scroll sequence. Edit the native Workspace UI and story labels in place. Do not apply carousel logic to this scene.

Product uses native software compositions and its own anchors. Integrations uses network/pipeline code visuals and the connected catalog. Feature imagery uses existing image frames and native illustrations. Replace assets and copy without renaming layers used by motion overrides.

08 / Images & motion

Replace images inside their current frames and update descriptive alt text. The shared hover moves the outer frame with restrained depth and the inner image with a counter-motion. Touch and reduced motion simplify pointer effects.

Image strips assemble on entrance and replay after leaving and re-entering the viewport. Section entrances, one-time drawing dividers, masked headlines and italic light sweeps form the existing motion language. Use one divider per boundary.

Internal page links use the shared grid/slice transition. Local anchors and controls stay on the page. Keep expressive italics light on light backgrounds and textured/luminous on approved dark backgrounds. Preview every replacement at more than one width.

09 / Forms

Contact, Waitlist, mini contact, profile contact and Book a demo are demonstrations. Validation and inline confirmations run locally; they do not create accounts or send/store submissions. Keep the demo disclosures until a real service is connected.

Contact uses native fields with its demo handler. Waitlist has its page-specific demo logic. Embedded and global demo forms share TervuneDemoDialog; profile contact lives in the portrait component. Connect your chosen form service deliberately and test required fields, errors, success and privacy messaging before accepting real information.

10 / Attachments

Add files displays local file metadata such as filename and size/type; it does not upload or store file contents. The current demo permits up to 3 files, 10 MB per file, in PDF, DOCX, PNG or JPG format. Removal and inline validation belong to the existing form.

To accept real attachments, integrate Uploadcare or another compatible upload provider with your form destination. Configure allowed formats, size/count limits and access rules, then connect the returned file reference to the submission. This provider is not preconnected. Update the demo disclaimer only after end-to-end upload, removal, error and submission tests pass.

11 / Book a demo

All Book a demo triggers open one shared global modal in Marketing Layout. SEND A REQUEST contains the enquiry form and attachments. BOOK A MEETING contains the scheduler. Both modes are demo-only until configured.

Edit the shared modal’s title, description and available controls once for global use. Keep its close X, backdrop, Escape handling, focus trap and return focus. Do not create a second modal for individual CTA instances.

12 / Meeting booking

Demo mode lets visitors choose a date and time, then shows a confirmation; it does not reserve a meeting or create a calendar event.

To connect Cal.com: 1. Create and test your event in Cal.com. 2. Select the global TervuneDemoDialog instance in Marketing Layout. 3. Set Booking Provider to Cal.com. 4. Enter your Cal.com Booking Link. 5. Test the destination and its availability settings.

The configured mode hands off to your calendar; it is not an embedded booking service. If you need inline booking, replace the demo scheduler area with Framer’s official Cal.com component and configure it for your event. Keep the modal’s accessible close behavior.

13 / Contact sections

Shared internal contact instances sit near the end of internal pages. Select Shared internal contact to edit Title and Description, keep Embedded contact enabled, and use Enable Attachments to show or hide the attachment field. Remove that page’s instance to omit the section.

The field design and demo logic are shared in TervuneDemoDialog; a source-level change there affects every instance. Title and Description values are instance overrides, so changing one does not rewrite all pages. To apply identical copy globally, update the matching instance controls consistently.

An existing Book a meeting link opens the shared modal in meeting mode. Preserve its label and destination behavior when editing nearby contact links; it does not book automatically.

14 / Resources & articles

The Resources listing draws from Resources CMS. Edit title, category, summary and featured image, then review the editorial crop and linked article.

The article detail template supplies the header, featured image, reading layout, local table of contents, next article and related content. Use ordered headings in the Body field so the TOC stays useful. Check next/related items after changing slugs or references. One template change affects all articles.

15 / Pricing

Pricing uses editable native plan cards and comparison rows. Update Plan name, Plan price, Plan description and Included capabilities in the existing instances. Edit the Action Button label/destination for each plan.

The middle card is the current dark recommended plan. Keep its Plan emphasis text consistent with that position; the existing styling follows the middle card. Update comparison labels and values together with the plans. Prices are fictional and no checkout is connected.

16 / Responsive

Desktop begins at 1200px and uses the permanent rail and multi-column layouts. Tablet covers 834–1199px with reduced grids. Phone below 834px stacks content and uses the compact top navigation.

Carousel hover/drag adapts to swipe; the Workspace story switches to normal flow on narrow or short viewports. Modals adapt to available height and retain accessible close controls. Cursor effects require a fine pointer.

Review 1440, 1200, 1024, 834, 430, 390 and 360px after replacing copy or imagery. Check long labels, form errors, image crops, scrolling and tap targets. This page’s local index becomes a compact section chooser on Tablet and Phone.

17 / Accessibility

Keep visible keyboard focus, useful labels, meaningful link text and clear required-field feedback. Test menu, tabs, accordions and overlays with the keyboard; Escape must close overlays and return focus to the trigger. Aim for touch targets around 44px or larger.

Use accessible small-text colors and check both light and dark surfaces after edits. Reduced motion keeps content visible, static logo fields and a simplified Home intro, while removing intensive travel and autoplay. Do not remove these fallbacks.

18 / SEO & launch

Before launch: set the site title and description, favicon and social/OG image; review each page’s SEO and social preview. Replace fictional business details, team information and product claims. Review Privacy and Terms for your actual services.

Connect and test forms, attachments and booking; confirm real success/error states and data handling. Check all navigation, CMS detail routes, mobile layouts, keyboard controls and reduced motion in final Preview. Configure your domain and publish only after your own checks pass.

Documentation describes setup, not release certification. Search and cookie/consent tools are not included; choose any required services for your real site. Keep a backup and perform a final live-site check after publishing.

19 / Coming soon

/coming-soon is a standalone temporary launch page with editable status/progress copy and an email demo. Its signup does not send or store information until you connect a provider.

If using it as a temporary homepage, preserve the normal Home in your working copy and update the homepage assignment and links intentionally. Share Framer Preview for private review rather than treating the public Coming Soon page as access control. Restore normal Home at / before launch and retest the final routes.

20 / Support

CREATED BY — Printically. For template customization or a template issue, contact Printically with the page, breakpoint, reproduction steps and a screenshot. Do not send passwords, keys or private form data.

For Framer hosting, billing, account or platform issues, contact Framer Support through Framer’s Help Center. Keep template questions with Printically and platform questions with Framer.

SUPPORT — info@printically.com ↗

/CONTACT

Let’s make the next step clear.

Have a question, a project in mind, or want to talk through the workflow? Send a note.