01
Template guide
Make this site yours.
A ten-minute walk through the pieces: styles, content, search, the contact form and publishing. Delete this page when you are done.
01
Rename it
Swap the logo mark and the word Tracewell in the Nav and Footer components, then set your site title, description and language in Site Settings.
02
Set your colours
Open Styles. The colour styles hold the dark theme. The light theme lives in the Theme Switch component, one line per colour style.
03
Change the type
Three fonts: Host Grotesk for display, Geist for text and Geist Mono for labels. Edit the text styles and every page follows.
04
Write your content
Posts holds both articles and changelog entries, told apart by Type. Docs uses Section and Order to build the sidebar and the index.
05
Update search
The Search component lists your pages. Docs, blog and changelog links on the open page are added automatically.
06
Point the form
The contact form uses Framer Forms. Add your email under Site Settings, Forms, and send a test message.
07
Check motion
Reduced-motion visitors get still states. Load order and timings are in the Motion section below.
08
Publish
Publish to staging, click through every page in both themes, then connect your domain.
02
What is inside
Components and their variants.
Console
Trace, Evaluate, Deploy
Product visual used in the hero, the story and the feature pages. Wide and Compact sizes.
Button
Primary, Secondary, Text
Label and link are controls. Hover states are built in.
Pricing
Monthly, Yearly
The switch updates prices and billing labels together.
FAQ Item
Closed, Open
Question and answer are controls.
Feature Explorer
Runs, Evals, Deploy
Tabs change the console beside them.
Submit Button
Default, Pending, Success, Error
Wired to the contact form.
Theme Switch
Dark, Light
Code component. Edit the light colours in its panel.
Search
Command palette
Code component. Opens with Cmd K or the slash key.
Count Up, List Filter, Doc Toc
Code components
Metrics, chip filters and the live table of contents.
03
Content fields
What each field does.
Posts
Title and slug: the link and the h1
Type: Article appears in the blog, Changelog in the changelog
Date, Category, Summary, Author, Read: card and header text
Version: shown on changelog entries
Cover: optional on changelog entries
Featured: one article leads the blog
Body: rich text with code blocks
Docs
Title and slug: the link and the h1
Section: groups the sidebar and the index
Order: sort order inside a section
Summary: subtitle and index text
Updated: shown above the article
Body: headings feed the table of contents
04
Motion
Quiet by default.
Reveals use opacity and a short rise, 400 to 650 ms, one time. Hovers take 240 ms. The headline on every page is visible at first paint. Visitors who prefer reduced motion see the final state of every element. Layers whose name ends in (motion) are held still by the Motion Guard component.