Design — Kalme Framer
Colours and text in Kalme 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, text, buttons, dark cards |
| Gray | #4F4F4F | Paragraphs, secondary text |
| Line | #D9D9D9 | Dividers, borders, category chips |
| Background | #F7F7F7 | The page, the header and the footer |
| Black 20 · Black 05 | #000000 at 20 / 5 % | Form fields and light fills |
| White | #FFFFFF | Cards and panels, text on dark |
| Red | #FA2837 | The accent: the dot in every button, the current menu item, the brackets of section labels |
| Transparant | #FFFFFF at 0 % | Invisible fills (the name is spelled that way in the project) |
Click a style to edit its value. Red is Kalme’s only accent, so changing it to your brand colour changes every dot and bracket at once. Keep text on its background at a contrast of 4.5:1 or more.
Link style
Section titled “Link style”One link style, Gray, colours the text links. Edit it in Assets → Styles → Link.
Text styles
Section titled “Text styles”| Style | Desktop | Tablet | Phone | Line height |
|---|---|---|---|---|
| Display 1 | 100 | 68 | 52 | 1.1 |
| Heading 1 | 64 | 52 | 42 | 1.2 |
| Heading 2 | 54 | 42 | 36 | 1.2 |
| Heading 3 | 42 | 36 | 32 | 1.2 |
| Heading 4 | 36 | 32 | 28 | 1.2 |
| Heading 5 | 28 | 26 | 24 | 1.2 |
| Heading 6 | 24 | 22 | 20 | 1.2 |
| Number | 72 | 64 | 56 | 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 |
| Button | 16 | 16 | 16 | 1.2 |
| Subtitle | 14 | 14 | 14 | 1.4 |
Text styles in Framer are responsive: open a style to see and change its size for Tablet and Phone as well. Every style
has a slightly tight letter spacing, and Subtitle is in capitals — the section labels such as [ EXPERTISE ].
The template uses Inter, 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: another font may run wider, and the tight letter spacing suits Inter.
Components
Section titled “Components”Assets → Components → Project holds the building blocks, in folders:
| Folder | Components |
|---|---|
| Misc | Logo, Subtitle (the section label), Icon Text, Rating, Switch (the Weekly / Monthly switch) |
| Button | Menu, Hamburger, Primary, Secondary, Radio, Text Link |
| Section | Header, Footer, CTA |
| Card | Project, Service, Testimonial, Post, Value, Team, Pricing |
| Ticker | Gallery (the images above the footer) |
Double-click a component to edit it; every copy on every page updates. Components from Framer itself (Phosphor icons, Slideshow, Spinner, Ticker, Video) sit in the Framer folder.
Edit the Logo component (Misc folder) once — replace 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 the About hero). It is shown 100 × 25 px in the header on Desktop and Tablet, a little smaller on Phone, and much larger in the footer.
The icons — arrows, checks, stars — 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
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: replace them with your own before you publish.
Two sets of images are set in components rather than the CMS: the showreel in the Home hero (four project photos that change every two seconds) and the six images of the Gallery ticker above the footer.
Videos
Section titled “Videos”Three stock clips from Pexels (free to use under the Pexels license) play on the site:
| Video | Where |
|---|---|
| The wide clip under the Home hero | Home, section Page Video — it moves up as the page scrolls |
| The portrait clip between the testimonials | Home, section Testimonial |
| The studio clip between the values and the team | About |
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. The scroll movement of the Home and About videos is an effect on the video layer (Effects → Scroll Transform).
Motion
Section titled “Motion”The motion is in the components: buttons swap their label upwards and grow their red dot on hover, cards move their image and lift their caption, the services accordion opens one row at a time, the pricing switch slides between Weekly and Monthly, the showreel changes picture, and the Gallery ticker moves the images above the footer (its speed is a setting of the Ticker inside the Gallery component). 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”), 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.