Documentation
This page explains how the Phase template is put together and how to make it your own. Pair it with the Style Guide page, which shows every color, type style, and button live.
Quick-Start Checklist
The fastest path to a site that feels like yours. Work through this list top to bottom.
1.
Replace the “phase” wordmark and “•” logo mark in the Nav component with your own name and mark.
2.
Swap the cal.com link on every “Try for FREE” / “Start your 14-day sprint” button for your own booking, signup, or contact link.
3.
Update the site title, description, and social image in Site Settings → General, plus the per-page titles and descriptions on each page.
4.
Replace the testimonial quotes, names, roles, and avatars with real customers (or remove the section until you have some).
5.
Replace the client logos in the Client Logos Section and the integration logos in the Integrations Orbit Section.
6.
Rewrite the pricing tiers, features list, and FAQ answers to match what you actually offer.
7.
Replace the four starter blog posts with your own writing, or delete them from the Blog Posts collection.
8.
Read through Privacy Policy, Terms of Use, and Cookie Policy and adapt them to your business — they’re a starting point, not legal advice.
9.
Update the footer copyright line, social links, and email address.
10.
This Style Guide and this Documentation page are reference pages for you, not your visitors — they aren’t linked from the nav or footer. Delete them (or leave them unlinked) before launch.
Editing Text, Images & Colors
Click any text on the canvas to edit it directly — most copy on this site is plain text, not CMS content, so changes are immediate. Double-click an image to replace it from your files or a stock library.
Colors are built from a shared token palette rather than hard-coded values, so changing a color in one place updates it everywhere it’s used. Open the Assets panel (left sidebar) → Colors to see and edit every token — the same list is rendered live on the Style Guide page so you can see exactly what each one looks like before you touch it.
Fonts work the same way: this template uses Satoshi for display/heading text and Inter for body text, both set as reusable text styles under Assets → Text Styles. Changing a text style’s font updates every heading or paragraph using that style across the whole site.
Page & Section Map
Every page in this project, and what it’s for:
/
Home — the main marketing page, built from 14 sections (see below).
/blog
Blog index — lists every published post from the Blog Posts CMS collection.
/blog/:slug
Blog post detail — the template used for every individual post.
/style-guide
This project’s live design reference: colors, type, spacing, buttons.
/privacy-policy, /terms-of-use, /cookie-policy
Legal pages, linked from the footer.
/404
Shown automatically when a visitor hits a broken link.
The Home page top to bottom, with the anchor ID used for links (where one is set):
Hero Section
Headline, subtext, and the primary CTA.
Client Logos Section
Scrolling strip of client/partner logos.
Product Features Bento Section · #impact
The three-card feature grid (Visual Pipelines, One-Click Handoff, Crystal Clear Feedback).
Workflow Highlights Section · #workflow
Ticker of workflow feature cards. Linked from the “Work” nav item.
Audience Solutions Section · #features
Tabbed “For Designers / Managers / Clients” content. Linked from the “Services” nav item.
Integrations Orbit Section
Orbiting integration logos under “Plays well with others.”
ROI Calculator Section
Interactive slider calculating time and cost saved.
Before vs After Comparison Section · #pivot
“How agencies used to suffer” vs. “how forward agencies operate now”.
Customer Testimonials Section
“The word on the street” quote grid.
Pricing Section · #pricing
Starter / Pro / Enterprise tiers. Linked from the “Pricing” nav item.
Integration Stats Section · #playwell
Stat cards (65%, $1k, 87%, 46%).
Blog Preview Section · #blog
Latest posts pulled live from the CMS.
FAQ Section · #faq
Expandable question list.
Final CTA Section
Closing call-to-action before the footer.
Navigation & Footer
The Nav and Footer live in the shared layout template (Assets → Layout Templates → Main-layout), so editing them once updates every page automatically. The Nav component has three states — Desktop, Phone, and Phone Open — but Phone and Phone Open are replicas of Desktop, so most edits (logo link, nav labels, the CTA button) only need to be made once, on the Desktop variant, and they cascade.
The four nav links (Home, Work, Services, Pricing) and the matching footer links under “Product” point to the anchor IDs listed above, using the format “/#anchor-id”. To point a link at a different section, give that section an Element ID (right sidebar → Layout, “Scroll Target” toggle), then update the link’s URL field to “/#that-id”.
The footer’s Legal column links to the three legal pages by path. If you rename or remove a legal page, update the corresponding footer link’s URL to match, or the link will 404.
Call-to-Action Links
Every “Try for FREE” and “Start your 14-day sprint” button currently opens https://cal.com/ in a new tab. Select any of these buttons and update the Link field in the right sidebar — search “cal.com” across the project first (Edit → Find) to make sure you catch every instance, since they’re individual component instances rather than one shared link.
Managing the Blog
Blog posts live in the Blog Posts CMS collection (left sidebar → CMS). Each item has a Title, Short Description, Content (rich text), Cover Image, Author Name, Author Avatar, Published Date, and Read Time. Add a new item and it appears automatically on both the blog index and the Home page’s Blog Preview Section — no extra wiring needed.
The four starter posts are written for a creative-agency audience as placeholder content. Replace them with your own writing, or delete the items you don’t want; the collection works fine with any number of posts, including zero (the index shows an empty state).
Legal Pages
Privacy Policy, Terms of Use, and Cookie Policy are regular pages (not CMS-driven), built with the same section and text-style structure as the rest of the site — edit any paragraph directly on the canvas. The content included is a reasonable generic starting point, but it references “Phase” by name and makes general claims about data handling; have it reviewed by a lawyer before you rely on it for a real business.
Colors, Type & Components
The /style-guide page is a live reference, not a static image — every swatch and text sample on it is the real color token or text style used elsewhere on the site, so it always stays accurate as you make changes. Use it to pick colors and text styles with confidence instead of guessing at values.