Design — Findit Framer
Colours and text in Findit come from styles. Change a style and every page, component and state that uses it follows. Find them in the left panel → Assets → Styles.
Colour styles
Section titled “Colour styles”| Style | Value | Used for |
|---|---|---|
| Black | #000000 | Headings, buttons, dark sections |
| Body | #333333 | Paragraphs |
| Grey | #747474 | Menu links, icons, secondary text |
| Black 50 · 10 · 05 · 03 | #000000 at 50 / 10 / 5 / 3 % | Placeholders, hairline borders, light fills |
| Background | #F2F4F7 | Cards and tinted sections |
| Cultured 50 | #F5F5F5 at 50 % | The soft gradient behind the home hero |
| White | #FFFFFF | Text on dark, page background |
| White 80 · 10 | #FFFFFF at 80 / 10 % | Footer text, lines on dark |
| Yellow | #FFA800 | Rating stars |
| Transparant | #FFFFFF at 0 % | Invisible fills (the name is spelled that way in the project) |
Click a style to edit its value. Keep the Black tints on one base colour, and keep text on its background at a contrast of 4.5:1 or more — the template’s Grey on the Background colour is just under it, which matters for small text.
Findit is black and white with one soft grey: there is no accent colour. To add one, create a colour style (+ next to Color) and use it where you want it, for example as the fill of the Primary button.
Link styles
Section titled “Link styles”Three link styles colour the text links: Black, Body and White Footer. Edit them in Assets → Styles → Link.
Text styles
Section titled “Text styles”| Style | Desktop | Tablet | Phone | Line height |
|---|---|---|---|---|
| Display 1 | 72 | 50 | 38 | 1.2 |
| Heading 1 | 54 | 42 | 34 | 1.2 |
| Heading 2 | 42 | 34 | 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 |
| Big Paragraph | 18 | 18 | 18 | 1.4 |
| Medium Paragraph | 16 | 16 | 16 | 1.4 |
| Small Paragraph | 14 | 14 | 14 | 1.4 |
| Menu | 16 | 16 | 16 | 1.2 |
| Buton | 15 | 15 | 15 | 1.2 |
| Label | 14 | 14 | 14 | 1.2 |
| Small Button | 13 | 13 | 13 | 1.2 |
| Tiny | 12 | 12 | 12 | 1.2 |
Text styles in Framer are responsive: open a style to see and change its size for Tablet and Phone as well. “Buton” is spelled that way in the project.
The template uses Manrope, from Framer’s Google Fonts 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: another font may run wider.
Components
Section titled “Components”Assets → Components → Project holds the building blocks, in folders:
| Folder | Components |
|---|---|
| Misc | Logo, Label, Icon Text, Rating, Property Nav |
| Button | Menu, Primary, Hamburger, Tab, Form, Arrow |
| Section | Nav, Footer, Process, FAQ |
| Card | Hero Video, Property, Property Tab, City, Benefit, Step, Testimonials, Post, Timeline, Team, Agent, Accordions, Property Image |
| Ticker | Testimonials |
| MIsc | Feature List |
Double-click a component to edit it; every copy on every page updates. Components from Framer itself (Carousel, Phosphor icons, Spinner, Ticker, Video, YouTube) sit in the Framer folder, and Marcframe → More Template is the floating promotion described in Going live.
Edit the Logo component (Misc folder) once — replace its vector with yours — and the header and the footer of every page follow. It is shown 93 × 30 px on Desktop and Tablet, a little smaller on Phone.
The icons — bed, bath, map pin, stars and the rest — are Phosphor icons (Assets → Components → Framer → Phosphor). Select an icon on the canvas and change it in the right panel; the colour is the text colour around it.
Images and video
Section titled “Images and video”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: replace them with your own before you publish.
The video on the Home page is the Hero Video component (Card folder), a short property clip from Pexels (free to use under the Pexels license). Select it and change its video and poster image in the right panel, or delete it. The property video on a property page is a YouTube player fed by the property’s Video Link.
Motion
Section titled “Motion”Findit has no scroll animations. The motion is in the components: hover effects on buttons, menu links, tabs and cards, the two moving rows of testimonials (Ticker, set the speed there), the carousel, the accordions and the video. A hover effect is a variant of its component; the tickers and the carousel have their own settings in the right panel.
Accessibility: turn on Settings → General → Accessibility (“Disable movement animations and custom cursors if the user prefers reduced motion”), which is off in the template, so visitors who asked their system for less motion get a calm site. We recommend it for every site.