Design — Tustel Framer
Colours and text in Tustel for Framer come from styles: change a style, and every page, component and state that uses it follows.
Find them in the left panel → Assets → Styles; the general guide is Colours and fonts.
Colour styles
Section titled “Colour styles”| Style | Value | Used for |
|---|---|---|
| Black | #000000 | Headings and text, black buttons, the menu links, the menu button |
| Soft Black | #434343 | Intros and descriptions, card details, labels above page titles, form labels, testimonial quotes, the footer note |
| Black 60 | #000000 at 60 % | The dark layer over the photos of the Home hero and the 404, the arrows of the testimonials |
| Black 30 | #000000 at 30 % | The labels of a project’s details, field placeholders, the line above the links of the About page |
| Orange | #EB4B3D | Button and menu hovers, the chosen service, the title pointed at in the List view, the asterisks of the form |
| Background | #F5F4F2 | The page, the solid header, the open phone menu |
| White | #FFFFFF | The footer, white buttons, the specialities card, the form fields, text over photos |
| Transparant | White at 0 % | The header over the Home and 404 photos (the name is spelled that way in the project) |
| Black 10 | #000000 at 10 % | Field borders, the lines of the “Project Details” list |
Click a style to edit its value. Change Orange to your brand colour and every accent and hover follows. Keep text on its background at a contrast of 4.5:1 or more: white on the demo’s Orange measures 3.7:1 (the labels of hovered buttons and menu links), and Orange on the Background 3.4:1, fine for the large service names but under it for small text. A darker orange reads better. The labels of a project’s details, in Black 30, measure 2.1:1: Black 60 or Soft Black reads better there.
Link style
Section titled “Link style”One link style, Link, sets the look of text links. Edit it in Assets → Styles. The menu, the social links and the buttons are components, with hovers of their own (Components).
Text styles
Section titled “Text styles”| Style | Desktop | Tablet | Phone | Line height |
|---|---|---|---|---|
| Display 1 | 92 | 62 | 54 | 1.0 (1.1 on Tablet and Phone) |
| Heading 1 | 54 | 44 | 36 | 1.2 |
| Heading 2 | 42 | 36 | 32 | 1.2 |
| Heading 3 | 36 | 32 | 28 | 1.2 |
| Heading 4 | 28 | 26 | 24 | 1.2 |
| Heading 5 | 24 | 22 | 20 | 1.2 |
| Heading 6 | 20 | 19 | 18 | 1.2 |
| Medium Paragraph | 16 | 16 | 16 | 1.4 |
| Small Paragraph | 14 | 14 | 14 | 1.4 |
| Menu | 14 | 14 | 14 | 1.2 |
| Button | 15 | 15 | 15 | 1.2 |
| Tiny | 12 | 12 | 12 | 1.2 |
| Label | 15 | 15 | 15 | 1.4 |
Text styles in Framer are responsive: open a style to see and change its size for Tablet and Phone as well. Display 1 is the name in the Home and About heroes, the title of a project page and the “404”; Heading 1 the title of the Works, Blog, Contact and post pages. Label is set in capitals: the small labels above section and page titles.
The template uses Inter Display for Display 1 and the headings, and Inter for the other styles, both from Framer’s font library and set slightly tight (letter spacing −0.03em). To use another font, open each text style and pick the family. A font you have licensed can be uploaded from the font picker and used the same way. Check the longest headings afterwards, because another font may run wider.
Components
Section titled “Components”Assets → Components → Project holds the building blocks, in folders:
| Folder | Components |
|---|---|
| Misc | Logo, Stats (the four counters, on Home and About) |
| Button | Menu (the menu and social links), Primary (the buttons with an arrow), Hamburger (the phone menu button), Form (the form’s Submit button: Default, Loading, Success and Error) |
| Section | Header, Portfolio (the projects on Home), Contact (“Let’s work together”), Footer, CTA (the photo band “Creating Visual Stories That Inspire”) |
| Icon | Phosphor (the icons) |
| Card | Point List (the specialities in the Home hero), Portfoilo (a project card), Service, Testimonial, Post, Step (a step of “How I work”) |
| Part | Portfolio List (the List view on Home), Service List (the services on Home) |
| Slideshow | Hero Background (the three photos of the Home hero), Testimonial |
Portfoilo is spelled that way in the project. One more component, Counter, is a single counting number. Open a component from Assets → Components (or from a copy on the canvas) to edit it; every copy on every page updates. Two components from Framer itself sit in the Framer folder: Slideshow and Spinner, the loading ring under the Works and Blog lists.
Two code files sit in Assets → Code: Phosphor.tsx draws the icons, and Counter1.tsx the counting numbers (80+ Years Experience, 120+ Projects Completed, 45+ Happy Clients, 18 Awards Received), which count up when they come into view. To change a number, open Misc/Stats, select the counter and set, in the right panel, where it stops counting (its end value); it also has a start value, a speed, and the “+” as its suffix.
Edit the Logo component (Misc folder) once, replacing its vector with yours, and the header and the footer of every page follow. The demo’s is Alex Carter’s: an “AC” monogram in a ring, then the name. It has a black and a white version: white in the header over the Home and 404 photos, black in the solid header and the footer. Check both. It is shown 104 × 24 px everywhere.
The arrows in the buttons are Phosphor icons (Assets → Components → Project → Icon → Phosphor, drawn by the code file Phosphor.tsx). Change them inside Button/Primary, and every copy follows.
Images
Section titled “Images”Select an image on the canvas or in a CMS item, and choose a new one in the right panel (the Image or Fill section). Images from the CMS change in the CMS, not on the canvas (The CMS). Use photos at least twice the size they appear, so they stay sharp on high-density screens; Framer serves resized versions to visitors automatically. The demo’s photos come from Unsplash, and the client logos are samples drawn for the template: replace them with your own before you publish. The demo’s photos have no alt text: describe yours in the right panel as you add them, for screen readers and search engines.
Motion
Section titled “Motion”The motion is in the components and on the layers:
- the Home hero builds up on load: its texts appear letter by letter and its buttons, card and links rise into place; its three photos change every 5 seconds, and the specialities scroll up slowly in their card;
- the client logos scroll left in a ticker; the counters count up when they come into view;
- blocks fade up as they scroll into view; page titles blur in word by word;
- one spring (no bounce, 0.5 s) drives most hovers: on buttons an orange band rises, the label rolls, the square turns and the arrow slides; menu links fill with orange; on project cards the photo shrinks inside a blurred frame and the title rolls to an orange copy;
- on Home, the portfolio switches between Catalog and List (desktop), the services open as described in The CMS, and the testimonials change every 8 seconds, with arrows;
- Works and Blog show six cards (four on tablets and phones), and more as the visitor scrolls;
- the header lies over the photo on Home and 404, and elsewhere hides as you scroll down and comes back as you scroll up (Getting started); on phones the menu opens from the menu button.
A hover effect is a variant of its component.
Accessibility: turn on Settings → General → Accessibility (“Disable movement animations and custom cursors if the user prefers reduced motion”). It is off in the template; turning it on gives visitors who asked their system for less motion a calm site. We recommend it for every site.