Design — Titen Framer
Colours and text in Titen 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 |
|---|---|---|
| Background | #F5F1E5 | The page, and the header once you scroll |
| Black | #121212 | Text, dark buttons, the footer and dark sections |
| Black 80 · 60 · 40 · 30 · 05 · 03 | #121212 at 80 / 60 / 40 / 30 / 5 / 3 % | Labels, meta text, divider lines, form fields and light card fills |
| Accent | #C36036 | Button hovers, award names, the accent buttons |
| Orange | #E8481C | The current page in the menu, the rating star |
| Soft Brown | #E0DCD7 | The Projects band on Home, the Beginnings section on About |
| White | #FFFFFF | Text and buttons on dark |
| White 80 · 50 · 10 · 05 | #FFFFFF at 80 / 50 / 10 / 5 % | Text, lines and glass cards on dark |
| Transparant | #FFFFFF at 0 % | Invisible fills (the name is spelled that way in the project) |
Click a style to edit its value. Change Accent to your brand colour and every accent button and hover follows. Keep text on its background at a contrast of 4.5:1 or more: white on the demo’s Accent measures 4.16:1, a little under, so a slightly darker accent reads better.
Link styles
Section titled “Link styles”Three link styles colour the text links: White, White 80 and Black. Edit them in Assets → Styles → Link.
Text styles
Section titled “Text styles”| Style | Desktop | Tablet | Phone | Line height |
|---|---|---|---|---|
| Display 01 | 64 | 56 | 48 | 1.2 |
| Heading 1 | 56 | 48 | 40 | 1.2 |
| Heading 2 | 42 | 36 | 30 | 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 |
| Tiny Paragraph | 12 | 12 | 12 | 1.2 |
| Menu | 12 | 12 | 12 | 1.2 |
| Button | 11 | 11 | 11 | 1.2 |
Text styles in Framer are responsive: open a style to see and change its size for Tablet and Phone as well. Menu and Button are in capitals with a little letter spacing: the menu, the section labels and the button labels.
The template uses Plus Jakarta Sans, from Framer’s font library. 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. The search panel uses Framer’s own search component, set in Inter.
Components
Section titled “Components”Assets → Components → Project holds the building blocks, in folders:
| Folder | Components |
|---|---|
| Misc | Logo, Icon Text (the check list), Accordions, Service Value (the principles accordion), Divider, Value |
| Button | Menu, Search, Primary, Hamburger, Secondary, Form (the Submit button), Text Line, Download |
| Section | Header, Service List, CTA, Footer |
| Card | Testimonial, Project 01, Project 02 (the wide card), Service 01, Service 02, Post, Approach, Team, Award |
| Slideshow | Testimonials (the Home hero), Approach (About) |
Double-click a component to edit it; every copy on every page updates. Components from Framer itself (Download, Phosphor icons, Search, Slideshow, Spinner, Video) sit in the Framer folder. More Template in the Marcframe folder is the template’s own advertisement: see Going live.
Edit the Logo component (Misc folder) once, replacing its vector with yours, and the header and the footer of every page follow. It has a black and a white variant: the white one sits on dark covers and in the footer. It is shown 62 × 25 px in the header (49 × 20 px on phones) and 74 × 30 px in the footer.
The icons (arrows, checks, the star, the search) are Phosphor icons (Assets → Components → Framer → Phosphor). Select an icon on the canvas and change it in the right panel; its colour is the text colour around it.
Images
Section titled “Images”Select an image on the canvas or in a CMS item, and choose a new one in the right panel (Fill → Image). Images from the CMS change in the CMS, not on the canvas. 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 Pexels: replace them with your own before you publish.
Videos
Section titled “Videos”Two stock clips play on the site:
| Video | Where | Source |
|---|---|---|
| The hero video | Home, behind the title | Magnific (Freepik). Its free license asks for a visible credit, “Designed by Magnific” linked to www.magnific.com, unless you have a Magnific Premium plan |
| The studio video | About, between the approach slideshow and the team | Pexels (free to use, no credit needed) |
Select the video and change its file (or link) and poster in the right panel, or delete it. Keep them short and small: they play muted and in a loop. Replacing the hero video with your own footage also removes the need for the credit.
Motion
Section titled “Motion”The motion is in the components and on the layers:
- headings appear word by word, and paragraphs and blocks rise in as they scroll into view (Effects on the layer);
- buttons change colour and turn their arrow on hover;
- project cards settle their photo, and post cards grow theirs;
- the principles accordion and the service list open one row at a time;
- the Home testimonials change every 4 seconds, and the About approach slideshow moves with its arrows;
- the header turns solid as you scroll down.
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.