00

Client guide

Make the template

Make the template

Make the template

fully yours.

fully yours.

fully yours.

Everything you need to rebrand, rewrite and relaunch Rafan Code — without code, and without waiting on the author. Every chapter names the exact panel, property and page involved.

No code required

Framer-native

15 chapters

≈ 20 min read

(01)

Start here

Four layers. Everything lives in one of them.

Pages hold content, components hold structure, styles hold branding, effects hold motion. If you cannot find a setting, it is in one of these four places.

01

Pages

18 routed pages with Desktop 1200, Tablet 810 and Phone 390 breakpoints. Select a page in the Pages panel on the left to edit its content.

02

Components

Buttons, header, menu, footer chrome, logo mark and CMS cards live in Assets → Components. Edit once to update every instance.

03

Styles

Color styles and text styles live in Assets → Styles. They are the fastest way to rebrand every page at once.

04

Effects

Motion lives on individual layers in the right-hand Effects panel, plus the sitewide chrome component. Nothing is locked in code.

(02)

Brand & identity

One wordmark. Every surface.

The logo is a text layer inside the Rafan Chrome component. Edit it once and the header, menu and footer update together.

STEP 01

Open the Chrome

Open the Chrome

Select the header on any page. In the right panel open Components → Rafan Chrome, then the Brand group.

Select the header on any page. In the right panel open Components → Rafan Chrome, then the Brand group.

STEP 02

Edit Logo and Brand

Edit Logo and Brand

Logo is the wordmark shown in the header. Brand is the company name used in metadata. Keep the closing dot — it is the acid accent.

Logo is the wordmark shown in the header. Brand is the company name used in metadata. Keep the closing dot — it is the acid accent.

STEP 03

Upload a favicon

Upload a favicon

Project Settings → General → Favicon. Use a square SVG or 512×512 PNG, then set the site title and description.

Project Settings → General → Favicon. Use a square SVG or 512×512 PNG, then set the site title and description.

NOTE

The dot is part of the mark. The final character of the logo is an acid-colored period. Keep it, and keep the logo short — one or two words render best at every breakpoint.

The dot is part of the mark. The final character of the logo is an acid-colored period. Keep it, and keep the logo short — one or two words render best at every breakpoint.

01

Header

Wordmark on the left, navigation on the right. The lockup is fixed; only the text changes.

02

Menu

The full-screen menu repeats the wordmark and the contact email. Both come from the same Chrome controls.

03

Favicon

Browser tabs and bookmarks read the favicon from Project Settings, not from the page tree.

(03)

Typography

Three typefaces. One scale.

Aspekta Variable runs the interface, Instrument Serif carries the italic accent, and Geist Mono labels technical values. Type is managed with Text Styles, never by hand.

Aa

Aspekta Variable

The workhorse: headings, body, buttons and navigation in weights 400 to 700.

Aa

Instrument Serif

Italic display accent. One line per heading, always in sentence case.

00

Geist Mono

Small labels, counters and file paths. Uppercase with wide tracking.

STYLE

DESKTOP

TABLET

PHONE

Display heading

100.8

76

52

Section heading

60

44

32

Card heading

22.4

20

18

Body

16

16

15

Eyebrow

13

13

12

STEP 01

Change the font globally

Change the font globally

Assets → Styles → Text Styles → select a style → Typeface. Every layer using that style updates on all breakpoints.

Assets → Styles → Text Styles → select a style → Typeface. Every layer using that style updates on all breakpoints.

STEP 02

Add a custom font

Add a custom font

Assets → Fonts → Upload, then pick the family in the same Text Style panel. Use WOFF2 for the web.

Assets → Fonts → Upload, then pick the family in the same Text Style panel. Use WOFF2 for the web.

NEVER SCALE TYPE BY HAND

Font size, line height and letter spacing live in the Text Style preset. Editing a single layer creates an override that will not follow the tablet or phone layout.

Font size, line height and letter spacing live in the Text Style preset. Editing a single layer creates an override that will not follow the tablet or phone layout.

(04)

Color

Eight tokens. One palette.

Every surface uses a named color style. Recolor the token once and every page, component and breakpoint follows.

Paper

#F3EDE3

Page background

Surface

#FBF7F0

Cards and panels

Peach

#FFD9B8

Hero bands and notes

Ink

#2B1D22

Headings and primary text

Ink Soft

#6A575D

Secondary labels

Acid

#D8FF6E

Accent dot and highlights

Violet

#DFB1DF

Secondary accent

Red

#C50000

Errors and destructive states

STEP 01

Recolor the whole site

Recolor the whole site

Assets → Styles → Color Styles → select a token → change the value. Every layer using that token updates at once.

Assets → Styles → Color Styles → select a token → change the value. Every layer using that token updates at once.

STEP 02

Recolor one element

Recolor one element

Select the layer and open Fill in the right panel. This detaches the layer from the token — fine for a one-off, wrong for a rebrand.

Select the layer and open Fill in the right panel. This detaches the layer from the token — fine for a one-off, wrong for a rebrand.

HAIRLINES ARE SEPARATE

Borders use rgba(43,29,34,0.14) so they stay subtle on light paper. If you switch Paper to a dark tone, also update Ink and change the borders to rgba(255,255,255,0.16).

Borders use rgba(43,29,34,0.14) so they stay subtle on light paper. If you switch Paper to a dark tone, also update Ink and change the borders to rgba(255,255,255,0.16).

(05)

Copy & actions

Every word is editable.

Headlines, body copy, labels and button text are native text layers. Double-click, type, and the layout reflows around your words.

01

Text layers

Double-click any heading or paragraph and type. Press Escape to finish. Line breaks follow the container, not the copy.

02

Links

Select an element, open Link, and choose a page, an anchor or an external URL. Open in a new tab only for external links.

03

Buttons

The Rafan Button component exposes Label, Variant and Size. Change the label, never the structure.

STEP 01

Edit the primary CTA

Edit the primary CTA

Select the button instance, open its Content controls, and replace Label. Primary is acid, Secondary is outlined ink.

Select the button instance, open its Content controls, and replace Label. Primary is acid, Secondary is outlined ink.

STEP 02

Link to a section

Link to a section

Give the target section a unique element ID in the right panel, then link the button to #that-id.

Give the target section a unique element ID in the right panel, then link the button to #that-id.

STEP 03

Add a nav or footer link

Add a nav or footer link

Header items live in Rafan Chrome → Nav. Footer links are native text layers in the layout template, so one edit updates every page.

Header items live in Rafan Chrome → Nav. Footer links are native text layers in the layout template, so one edit updates every page.

KEEP COPY CLOSE TO THE ORIGINAL LENGTH

Long labels push buttons and navigation out of shape on the phone breakpoint. If a CTA must be much longer, shorten it on the phone breakpoint instead of shrinking the type.

Long labels push buttons and navigation out of shape on the phone breakpoint. If a CTA must be much longer, shorten it on the phone breakpoint instead of shrinking the type.

(06)

Images & media

Replace, do not rebuild.

Every visual is a native frame with an image fill or a code-rendered mockup. Swap the source without touching the layout.

STEP 01

Replace a photo

Replace a photo

Select the frame, open Fill → Image → Replace, and choose a new file from Assets. Framer keeps the existing crop and radius.

Select the frame, open Fill → Image → Replace, and choose a new file from Assets. Framer keeps the existing crop and radius.

STEP 02

Upload assets

Upload assets

Drag files into Assets → Images. Keep photos under 400 KB and around 1600 px wide; use WebP where possible.

Drag files into Assets → Images. Keep photos under 400 KB and around 1600 px wide; use WebP where possible.

STEP 03

Write alt text

Write alt text

Select the image fill and add a short description. Screen readers and search engines both use it.

Select the image fill and add a short description. Screen readers and search engines both use it.

01

Hero mockups

The terminal, dashboard and aurora are code-rendered. Edit their copy through the component controls, not an image.

02

Photo sets

Replace a whole set in one style. Mixing new portraits with the original stock photography breaks the visual rhythm.

03

Video

Use an uploaded MP4 in a Video layer with muted autoplay and a poster image. Never autoplay with sound.

KEEP ASPECT RATIOS

Image fills crop from the center. If a new photo has a very different ratio, adjust the focal point instead of resizing the frame — resizing breaks the responsive grid.

Image fills crop from the center. If a new photo has a very different ratio, adjust the focal point instead of resizing the frame — resizing breaks the responsive grid.

(07)

Navigation & footer

One header, one footer, every page.

Navigation and footer live in the Rafan Chrome layout template. Change them once and the whole site follows.

01

Nav items

Rafan Chrome → Nav controls. Each item has a label and a page link. Reorder them in the component.

02

Menu

The full-screen menu mirrors the nav and adds the contact email. Change the email in Chrome → Email.

03

Footer

The footer is native in the layout template. Edit links, legal text and social icons directly on the canvas.

STEP 01

Rename a nav item

Rename a nav item

Open the Rafan Chrome component, find the Nav group, and edit the label. The menu reads from the same list.

Open the Rafan Chrome component, find the Nav group, and edit the label. The menu reads from the same list.

STEP 02

Add a page

Add a page

Pages panel → + → blank page → choose the Rafan Chrome layout. Add the new page to Nav so it appears everywhere.

Pages panel → + → blank page → choose the Rafan Chrome layout. Add the new page to Nav so it appears everywhere.

STEP 03

Change footer links

Change footer links

Select the footer on any page, then edit its text layers. Use the Link panel to point them at pages or anchors.

Select the footer on any page, then edit its text layers. Use the Link panel to point them at pages or anchors.

DO NOT DELETE THE LAYOUT TEMPLATE

Rafan Chrome carries the loader, smooth scroll, header and footer. Deleting or detaching it removes all of that from every page.

Rafan Chrome carries the loader, smooth scroll, header and footer. Deleting or detaching it removes all of that from every page.

(08)

Forms & email

Where enquiries land.

The contact and waitlist forms send to a single inbox configured in the form settings. Fields, labels and messages are editable on the canvas.

STEP 01

Check the destination

Check the destination

Select the form, open Form settings, and confirm the destination email. Test a real submission after publishing — previews do not send.

Select the form, open Form settings, and confirm the destination email. Test a real submission after publishing — previews do not send.

STEP 02

Edit the fields

Edit the fields

Each field has Label, Placeholder, Required and Type controls. Keep Name, Email and Message so submissions stay readable.

Each field has Label, Placeholder, Required and Type controls. Keep Name, Email and Message so submissions stay readable.

STEP 03

Edit the messages

Edit the messages

Success and Error are separate layers inside the form. Edit their text on the canvas and keep both variants wired.

Success and Error are separate layers inside the form. Edit their text on the canvas and keep both variants wired.

01

Contact form

Full name, email and project brief. Used on the Contact page and the support contact block.

02

Waitlist

Email only. Used on the home hero and the pricing CTA.

03

Delivery

Submissions arrive by email. Check spam once, mark as not spam, and re-verify the address if delivery stops.

CHANGING THE DESTINATION NEEDS VERIFICATION

Framer sends a confirmation link to the new address. The form will not deliver until that link is clicked.

Framer sends a confirmation link to the new address. The form will not deliver until that link is clicked.

(09)

Blog & changelog

Publish without touching the layout.

Posts, releases and roles are CMS collections. The listing cards and detail pages are templates — add an item and the design repeats.

01

Blog posts

Fields: title, slug, excerpt, cover, category, author, date and body. The card and article bind to these.

02

Changelog

Fields: version, date, tag and notes. Each release renders in the timeline automatically.

03

Careers

Fields: role, team, location, type and description. Open roles appear on the Careers page.

STEP 01

Add an item

Add an item

CMS → collection → + Add item → fill the fields → Publish. Draft items stay invisible on the live site.

CMS → collection → + Add item → fill the fields → Publish. Draft items stay invisible on the live site.

STEP 02

Edit the card design

Edit the card design

Open the listing page and edit the collection card. Changes apply to every item, never to one card.

Open the listing page and edit the collection card. Changes apply to every item, never to one card.

STEP 03

SEO per item

SEO per item

Each item has its own page settings. Set a title, description and share image from the item SEO panel.

Each item has its own page settings. Set a title, description and share image from the item SEO panel.

NEVER DELETE A BOUND FIELD

Removing a field leaves empty text and broken images on every card. Hide the layer first, then remove the field once the binding is gone.

Removing a field leaves empty text and broken images on every card. Hide the layer first, then remove the field once the binding is gone.

(10)

Motion

Motion is part of the design.

Reveals, word-by-word headlines, hover lifts and the intro loader are built in. Adjust them from the Effects panel without changing the static design.

01

Appear

Sections, cards and images fade and rise as they enter the viewport. Set the distance, duration and delay.

02

Text

Headlines reveal word by word. Keep it on section titles and statement lines, not on body copy.

03

Hover

Buttons and cards lift 6 px with a soft shadow. Disable it only on cards that are not interactive.

STEP 01

Edit an effect

Edit an effect

Select a layer → Effects → open the effect → change distance, duration or delay. The easing curve is shared sitewide.

Select a layer → Effects → open the effect → change distance, duration or delay. The easing curve is shared sitewide.

STEP 02

Remove an effect

Remove an effect

Select the layer, open the effect and click Remove. Do not add a second Appear under a Text effect — they will fight.

Select the layer, open the effect and click Remove. Do not add a second Appear under a Text effect — they will fight.

STEP 03

Hero and loader

Hero and loader

The home hero intro is timed with the loader inside Rafan Chrome. Do not add an onMount effect to hero elements.

The home hero intro is timed with the loader inside Rafan Chrome. Do not add an onMount effect to hero elements.

REDUCED MOTION IS RESPECTED

The loader and hero intro switch off when the visitor asks for reduced motion. Keep that behavior when you add new animation.

The loader and hero intro switch off when the visitor asks for reduced motion. Keep that behavior when you add new animation.

(11)

Responsive

Three canvases, one site.

Every page has Desktop 1200, Tablet 810 and Phone 390 breakpoints. Edits on a breakpoint only affect that screen size.

01

Desktop 1200

The base layout. Start every change here, then check the smaller canvases.

02

Tablet 810

Grids drop to two columns and spacing tightens while the header keeps its full navigation.

03

Phone 390

One column with tighter padding. Long labels wrap earlier, so keep CTAs short.

STEP 01

Edit a breakpoint

Edit a breakpoint

Switch the canvas at the top, select the layer and change it. The override is marked; other breakpoints keep their values.

Switch the canvas at the top, select the layer and change it. The override is marked; other breakpoints keep their values.

STEP 02

Reset an override

Reset an override

Open the layer breakpoint menu and reset the property to follow the desktop value again.

Open the layer breakpoint menu and reset the property to follow the desktop value again.

STEP 03

Check all three screens

Check all three screens

Preview each one before publishing. Text overlap and cropped buttons usually appear at only one size.

Preview each one before publishing. Text overlap and cropped buttons usually appear at only one size.

GRIDS WRAP AUTOMATICALLY

Four cards become two on tablet and one on phone. If you add a fifth card, the grid wraps without extra layout work.

Four cards become two on tablet and one on phone. If you add a fifth card, the grid wraps without extra layout work.

(12)

SEO & sharing

Be found. Look right when shared.

Titles, descriptions and share images live in each page settings. The root defaults cover any page you have not customised.

STEP 01

Page title

Page title

Keep it under 60 characters. Use the page name plus the brand, not a full sentence.

Keep it under 60 characters. Use the page name plus the brand, not a full sentence.

STEP 02

Description

Description

Under 155 characters. One clear sentence about what the page offers and who it is for.

Under 155 characters. One clear sentence about what the page offers and who it is for.

STEP 03

Share image

Share image

Upload 1200×630. It appears in social cards, Slack and messaging apps.

Upload 1200×630. It appears in social cards, Slack and messaging apps.

01

Page settings

Open a page, click the gear, then SEO. Each page can override the site defaults.

02

Root defaults

Set the site name, favicon and default share image once in Project Settings → General.

03

CMS items

Blog posts and changelog entries carry their own SEO fields inside each item.

PREVIEW THE CARD

Use the share preview in page settings to check the crop. Text near the edges gets cut off on some platforms.

Use the share preview in page settings to check the crop. Text near the edges gets cut off on some platforms.

(13)

Publishing

Preview, then publish.

The editor is not the live site. Publish when the three breakpoints and the forms are verified.

STEP 01

Preview

Preview

Use Preview to test links, the menu, the loader and form validation. Preview changes never affect the live site.

Use Preview to test links, the menu, the loader and form validation. Preview changes never affect the live site.

STEP 02

Publish

Publish

Click Publish → select the main branch → publish. The live site updates within seconds.

Click Publish → select the main branch → publish. The live site updates within seconds.

STEP 03

Connect a domain

Connect a domain

Project Settings → Domains → add your domain and follow the DNS records. Keep the Framer subdomain active until DNS resolves.

Project Settings → Domains → add your domain and follow the DNS records. Keep the Framer subdomain active until DNS resolves.

STEP 04

After a redesign

After a redesign

Check the homepage, one CMS item and the contact form on the live URL, at all three screen sizes.

Check the homepage, one CMS item and the contact form on the live URL, at all three screen sizes.

01

Staging

Use a branch for a large redesign. Publish the branch to a staging URL and merge when approved.

02

Redirects

If you rename a page, add a redirect from the old slug in page settings so existing links keep working.

03

404

The 404 page is editable like any other page. Keep the link back home visible.

NEVER PUBLISH WITHOUT CHECKING PHONES

Most layout regressions appear at 390 px. Use the phone preview before every publish.

Most layout regressions appear at 390 px. Use the phone preview before every publish.

(14)

Troubleshooting

Seven quick fixes.

Most issues come from a single override, a missing link or a form that has not been verified. Check these before editing code.

01

Content is invisible

Content is invisible

An Appear effect may have left opacity at 0. Select the parent, open Effects and reset or remove it. Preview shows the final state.

An Appear effect may have left opacity at 0. Select the parent, open Effects and reset or remove it. Preview shows the final state.

02

A section is missing on one breakpoint

A section is missing on one breakpoint

Content can be hidden per breakpoint. Switch to that canvas and check the layer visibility.

Content can be hidden per breakpoint. Switch to that canvas and check the layer visibility.

03

The form does not arrive

The form does not arrive

Confirm the destination email and click the verification link. Test on the published site, not in preview.

Confirm the destination email and click the verification link. Test on the published site, not in preview.

04

A font change did not apply

A font change did not apply

The layer may carry a manual override. Select it and reapply the Text Style preset.

The layer may carry a manual override. Select it and reapply the Text Style preset.

05

One color changed everywhere

One color changed everywhere

That layer uses a color token. Detach it with a local fill if only that element should change.

That layer uses a color token. Detach it with a local fill if only that element should change.

06

A link opens a 404

A link opens a 404

The page slug changed or the link points to a deleted page. Update the destination in the Link panel.

The page slug changed or the link points to a deleted page. Update the destination in the Link panel.

07

Undo a mistake

Undo a mistake

Cmd or Ctrl + Z steps back. For older work, open the version history from the branch menu.

Cmd or Ctrl + Z steps back. For older work, open the version history from the branch menu.

WHEN IN DOUBT, DUPLICATE THE PAGE

Duplicate before a risky edit, then delete the copy once the new version works.

Duplicate before a risky edit, then delete the copy once the new version works.

(15)

File map

What lives where.

You do not need to touch code for logo, type, colour, copy or images. This map is for the few behaviours that are code-driven.

RafanChrome.tsx

Layout template: loader, smooth scroll, hero intro, navigation and footer visuals.

RafanButton.tsx

Button variants, acid hover sweep and magnetic pull.

RafanTerminal.tsx

Animated terminal inside the hero.

RafanMarquee.tsx

Infinite logo marquee.

RafanCountUp.tsx

Stat counters that animate on scroll.

RafanFeatured.tsx

Pinned featured-project slider.

RafanAurora.tsx

Animated aurora background.

RafanLinkUnderline.tsx

Left-to-right underline on inline links.

CODE IS OPTIONAL

Every brand, copy, layout and motion edit in this guide can be done on the canvas. Open the code files only when you want to change a behaviour.

Every brand, copy, layout and motion edit in this guide can be done on the canvas. Open the code files only when you want to change a behaviour.

(DONE)

You are ready

Change the brand. Keep the build.

Work through this guide once and the template is yours. Preview all three breakpoints, send a test form, then publish.

01

Rebrand

Logo, favicon, colours, fonts and copy are swapped for yours.

02

Check

All three breakpoints, links, menu and forms are verified.

03

Launch

SEO is filled, a domain is connected, and the site is published.

Create a free website with Framer, the website builder loved by startups, designers and agencies.