Design — Ciketo Framer

Colours and text in Ciketo 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

Style	Value	Used for
Black	#000000	Headings and text, black buttons, the open card of the services accordion, the footer
Black 70 · 50 · 20	#000000 at 70 / 50 / 20 %	The dark layer over the photos of Home, Contact and 404 (70) and of the call to action (50); divider lines, field placeholders and the quote mark (20)
Soft Black	#4B4A4A	Body text, intros, card details and form labels
Orange	#E2652A	The squares before labels, the current page in the menu, step numbers, button hovers, the stars, the field being typed in
Grey	#E5E5E5	Labels on dark, field borders, divider lines, the menu hover
Background	#F4F0F0	The page, the header once you scroll, the form fields
White	#FFFFFF	Cards, white buttons, the boxes of the header, text on dark
White 10	#FFFFFF at 10 %	The line in the footer, the “98.5% on time” tag in the Home hero
Transparant	Transparent	Invisible fills (the name is spelled that way in the project)

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: the demo’s Orange measures 3.0:1 on the Background and 3.4:1 on White, fine for the squares but under that for the small orange labels and step numbers, and for the white menu item on orange. A darker orange reads better.

Link styles

Two link styles colour the text links: Black, on light backgrounds, and White, in the footer and on the Contact page. Both turn orange on hover. Edit them in Assets → Styles → Link.

Text styles

Style	Desktop	Tablet	Phone	Line height
Display 1	64	54	44	1.1 (1.2 on Tablet and Phone)
Heading 1	52	44	36	1.1
Heading 2	42	36	30	1.2
Heading 3	32	28	24	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	12	12	12	1.2
Menu	14	14	14	1.2
Button	16	16	16	1.2
Label	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. Display 1 and the headings are set slightly tighter than the other styles. Display 1 is the big title of the Home and Contact heroes and the “404”; Heading 1 the title of the other pages.

Fonts

The template uses Inter, from the Google Fonts in 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.

Components

Assets → Components → Project holds the building blocks, in folders:

Folder	Components
Misc	Logo, Label, Rating (the stars), Icon Text, Icon Text Details
Button	Menu, Primary, Hamburger (the phone menu button), Plus Min (the plus and minus of the accordions), Form (the Submit button)
Icon	Phosphor (the icons)
Section	Header, Qoutes (the quote form), Testimonials, CTA, Footer, How it Work (“How it works”), Industries
Card	Sevice (a card of the services accordion), Step, Testimonial, Post, Question (the FAQ), Service (a row on /services), Lane
Part	Service (the services accordion on Home), Step (the “How it works” steps)

Qoutes, Sevice and How it Work are spelled that way in the project. 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: Time & Date, the header clock, which shows each visitor’s own local time and date, and Spinner, the loading ring.

Logo

Edit the Logo component (Misc folder) once, replacing its vector with yours, and the header and the footer of every page follow. It is black in the header’s white box, and white in the footer and, on phones, over the dark photos of Home, Contact and 404: check both. It is shown 94 × 18 px everywhere.

Icons

The arrows in the buttons and the stars of the rating are Phosphor icons (Assets → Components → Project → Icon → Phosphor, drawn by the project’s code file Phosphor.tsx). Change them inside the button and rating components, and every copy follows.

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. 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 made-up samples: replace them with your own before you publish.

Motion

The motion is in the components and on the layers:

• the Home hero appears on load: the title word by word, then the text, the buttons and the cards rise into place;
• buttons fill with orange from the left and turn their arrow on hover; menu items turn grey; post cards zoom their photo;
• the client logos scroll past in a ticker, on Home and About;
• the services accordion opens one service at a time; the “How it works” steps open the one you click; the testimonials show the quote of the portrait you click; the FAQ questions open and close;
• /blog shows six posts and loads six more as the visitor scrolls;
• on Home, Contact and 404 the header is transparent over the photo and turns solid as you scroll; on phones the menu opens from the three-line 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.