Making it look like your brand
Colours and text in Nitip 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 | #101010 | Text, buttons, dark sections |
| Black 80 · 50 · 05 · 03 | #101010 at 80 / 50 / 5 / 3 % | Softer text, overlays, light fills |
| Grey | #818181 | Secondary text |
| Line | #D9D9D9 | Dividers, menu hover |
| Background | #F6F6F6 | Page background |
| White | #FFFFFF | Text on dark, cards |
| Transparant | #FFFFFF at 0 % | Invisible fills |
| Accent | #FC5000 | Highlights of your own |
| Yellow | #FDCA49 | Rating stars |
Click a style to edit its value. Keep the Black tints on one base colour, and keep dark text on a light background at a contrast of 4.5:1 or more.
Text styles
Section titled “Text styles”| Style | Desktop size / line height |
|---|---|
| Display 01 | 72 / 1.1 |
| Display 02 | 64 / 1.2 |
| Heading 1 – 6 | 54, 42, 36, 28, 24, 20 / 1.2 |
| Huge Paragraph | 32 / 1.2 |
| Big Paragraph | 18 / 1.4 |
| Medium Paragraph | 16 / 1.4 |
| Small Paragraph | 14 / 1.2 |
| Menu | 13 / 1.1 |
| Button | 14 / 1.4 |
Text styles in Framer are responsive: open a style to see and change its size for Tablet and Phone as well.
The template uses Inter, 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 holds the building blocks, in folders:
| Folder | Components |
|---|---|
| Button | Menu, Hamburger, Primary, Secondary, Big Footer, Switch, Form, Load More |
| Misc | Logo, Navigation, Project Recent List, Text Point, Project Grid/List, Switch, Text Icon, Cursor |
| Section | Header, Footer |
| Card | Project Simple, Chart, Service, Career, Project With Details, Testimonial, Post, Team, Value, Pricing |
| Slideshow | Testimonials |
| Ticker | Gallery |
Double-click a component to edit it; every copy on every page updates. Components from Framer itself (Load More, Slideshow, Ticker, Phosphor icons, Spinner) sit in the Framer folder.
Edit the Logo component (Misc folder) once — replace its image or vector with yours — and the header and footer of every page follow.
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.
Motion and the cursor
Section titled “Motion and the cursor”Scroll reveals, parallax and hover effects are Effects on layers and components: select a layer and look at the Effects section in the right panel to change or remove one.
The custom cursor and its labels (“View Project”, “Read”) are the Cursor component (Misc folder), assigned to layers through the Cursor setting in the right panel. Set a layer’s cursor back to the default to show the normal pointer there.
Accessibility: turn on Settings → General → Accessibility (“Disable movement animations and custom cursors if the user prefers reduced motion”) so visitors who asked their system for less motion get a calm site. We recommend it for every site.