Style guide
How this template is put together, and where to change each part. The page is hidden from search; keep it while you edit, delete it before launch if you like.
Set up in six steps. Most buyers are done in an afternoon.
1. Name and details
Change the wordmark in the Navigation component and the footer, your email, phone and city in the footer and on Contact, and each page’s title in its page settings.
2. Colours
Edit the colour styles below. Accent colours links and small details. The story-ring gradient sits in four places: the Ring component’s Ring colours, the hero slider’s Fill gradient, and the withStoryRing and withStoryRingLast overrides.
3. Type
Text styles use Inter Display for headings and Inter for text. Code components have their own Font controls: set them to the same family, written the way Framer loads it.
4. Content
Everything that repeats lives in the CMS. Change a client in Work and its case page, home story, ring, insights and service page follow.
5. Forms
Choose where the Contact form sends in its form settings. Give the Monday note a Form URL; until then it shows its thank-you without sending anything.
6. Hero
The hero stickers come from the Stickers collection. The lens lines and the proof strip are code components: select them in the hero to change their controls.
Colours. One accent, used sparingly, and the story-ring gradient in four places.
Page
#FFFFFF
Surface
#F5F5F7
Fill
#F2F2F5
Track
#E3E3E8
Line
#E5E5EA
Ink
#1D1D1F
Soft
#636368
Muted
#6B6B70
Accent
#C13584
Accent tint
#FBE8F2
On ink
#FFFFFF
Story ring: #F58529, #DD2A7B, #8134AF, #515BD4
Type. Inter Display for headings, Inter for everything else, in sentence case.
Display
80 / 58 / 38
Social media
Page title
64 / 52 / 40
Work that got answered.
Heading
56 / 44 / 32
The people on your account.
Prose heading
32 / 28 / 25
The first hour
Title
28 / 24 / 22
Low Water Coffee
Lead
19 / 18 / 17
One team runs your Instagram, TikTok and LinkedIn.
Prose
18 / 18 / 17
The hour after a post goes up decides how far it travels.
Body
16
Every comment and message answered within the hour.
Small
14
Coffee bar, East Austin
Other palettes. Values to paste into the colour styles and the gradient controls.
Story ring (as built)
Accent #C13584 · tint #FBE8F2 · gradient #F58529, #DD2A7B, #8134AF, #515BD4
Lagoon
Accent #0E7C86 · tint #E0F3F4 · gradient #7BDFF2, #2EC4B6, #0E7C86, #1D3557
Ember
Accent #C2410C · tint #FDEBDF · gradient #FFB703, #FB8500, #D9480F, #9D0208
Graphite
Accent #1D1D1F · tint #ECECEF · gradient #C7C7CC, #8E8E93, #48484A, #1D1D1F
Components. What each does and where to edit it.
Sticker
A working story sticker: poll, question, countdown, slider or link, on a client’s story photo.
Home hero. Content from Stickers.
Lens lines
The hairlines behind the hero that bend around the pointer in the story-ring colours.
Home hero. Spacing, angle, bend, radius, colours, sweep time.
Proof strip
Replying now, comments answered this week, and the rating, under the navigation.
Home hero. All text and the count.
Headline slider
The draggable slider inside the headline, and the rating sliders under reviews.
Home. Value, fill, fill gradient.
Ring
A client or team photo in a story ring that draws itself; on home it opens the client’s story.
Home, Work, Services, Studio, 404.
Story case
A three-part story: the brief, the posts, the result. Taps skip, holding pauses.
Home and each case page. From Work.
Insights
See insights: a sheet with reach, saves, shares, follows and who saw the post.
Home and each case page. From Work.
Poll bar
One poll answer that fills to its share.
Home and Services. From Services.
Caption edit
A caption edited as you scroll: [-cut words-] and {+new words+}.
Home. Caption, photo, labels.
Typing reply
A typing indicator, then the answer, inside each question.
Question component. Text from FAQs.
Live reactions
Hearts that drift up the closing story; faster on the Start a project link.
Home closing. Comments, colours, rates.
Monday note
The newsletter sign-up, asked like a phone’s notification prompt.
Home and Journal. Form URL.
Send button
The Contact form’s button, with sending, sent and error states.
Contact. Labels per variant.
Collections. What each one feeds.
Work
Clients: rings, home stories, the Work page, each case page, insights, results and reviews that point to them.
Services
The poll on home, the Services page and each service page. Each case picks its service here.
Team
The people on the Studio page.
Journal
Notes on home, the Journal page and each post.
Stickers
The working stickers in the home hero.
Month
The four weeks of a month on home.
Results
The notifications on the home lock screen; each points to a client.
Reviews
Owners’ quotes and rating sliders on home.
Replies
The comment-and-reply cards that drift under the home statement.
FAQs
Questions on home and the Services page.
Legal pages
Not a collection: Privacy, Terms and Cookies are three plain pages under /legal. Placeholder copy, replace it before you publish.