Colours and text styles — Ciketo Figma
Every colour and every piece of text in the file uses a style. Change a style and every frame, component and state that uses it updates — this is how you rebrand Ciketo in minutes instead of recolouring layers one by one.
Open them from the right sidebar with nothing selected (Local styles), or see them laid out on the Style Guide page.
Colour styles
Section titled “Colour styles”| Style | Value | Used for |
|---|---|---|
| Black | #000000 | Headings, dark buttons and cards, the footer |
| Black 70 | #000000 at 70 % | The cover over the Home, Contact and 404 photos |
| Black 50 | #000000 at 50 % | The cover over the call-to-action photo |
| Black 20 | #000000 at 20 % | Lines, the small squares between meta, the quote mark |
| Soft Black | #4B4A4A | Body text, meta, the clock on light headers |
| Orange | #E2652A | Section labels, the current menu item, step numbers, button hovers, stars |
| Grey | #E5E5E5 | Text on dark, lines, form field borders |
| Background | #F4F0F0 | The page, form fields, the header once scrolled |
| White | #FFFFFF | Cards, the form card, text on dark |
| White 10 | #FFFFFF at 10 % | The footer line and the glass boxes on the Home hero |
| Error, Error 15 | #FF2244, and at 15 % | The submit button’s error state |
| Transparent | #FFFFFF at 0 % | An empty fill for layers that must keep a fill slot (the header at the top of a cover page) |
| Placeholder | #D9D9D9 | Every photo slot — replace it with your image |
Six more, the Docs/ styles, colour the boards on the Style Guide, Components, Icons, Read Me and Cover pages. The page designs don’t use them.
Rebranding the palette
Section titled “Rebranding the palette”- Deselect everything, open Local styles, and click the edit icon next to a colour style.
- Change the hex value — keep the style’s name, so everything that uses it follows.
- Change the Black tints together (Black, Black 70, Black 50, Black 20): they are the same colour at different opacities. The same goes for White and White 10.
Change Orange to your brand colour and every label, current menu item, step number, button hover and star follows. Keep text on its background at a contrast of 4.5:1 or more: the demo’s Orange measures 3.4:1 on white and 3.0:1 on the page background — fine for the large step numbers and the square markers, low for small text — so a slightly darker accent reads better on labels.
Text styles
Section titled “Text styles”Inter throughout. Headings, buttons and the menu are Medium (500), paragraphs and labels Regular (400). Every style is set slightly tight: −3 % letter spacing on headings, −2 % on the rest.
Headings — one style per breakpoint
Section titled “Headings — one style per breakpoint”| Style | Desktop | Tablet | Phone | Line height | Used for |
|---|---|---|---|---|---|
| Display 1 | 64 | 54 | 44 | 110 % (120 % on tablet and phone) | The Home hero and Contact titles, “404” |
| Heading 1 | 52 | 44 | 36 | 110 % | Page titles |
| Heading 2 | 42 | 36 | 30 | 120 % | Section titles, the testimonial quote title |
| Heading 3 | 32 | 28 | 24 | 120 % | Subheadings in the legal text |
| Heading 4 | 28 | 26 | 24 | 120 % | Figures in the hero cards |
| Heading 5 | 24 | 22 | 20 | 120 % | Service names, step numbers, the testimonial name, figures |
| Heading 6 | 20 | 19 | 18 | 120 % | Card titles, step titles, industries, the help card |
Styles are grouped by breakpoint: Desktop/Heading 1, Tablet/Heading 1, Phone/Heading 1 and so on. Pick the group of the frame you are working in.
Paragraphs and interface text
Section titled “Paragraphs and interface text”| Style | Size | Weight | Line height | Used for |
|---|---|---|---|---|
| Paragraph / Medium Paragraph | 16 | Regular | 140 % | Body text, intros, descriptions |
| Paragraph / Rich Text | 16 | Regular | 140 %, 20 after each paragraph | Post bodies |
| Paragraph / Small Paragraph | 14 | Regular | 140 % | Card meta, fact descriptions, form labels and fields, footer links, the clock |
| Paragraph / Tiny Paragraph | 12 | Regular | 120 % | Captions, the consent text, small labels as written |
| Paragraph / Label | 12 | Regular, uppercase | 120 % | Section labels, tags, the small capitals on cards |
| Paragraph / Menu | 14 | Medium | 120 % | Menu links, small button labels, the header button |
| Paragraph / Button | 16 | Medium | 120 % | Button labels, the Submit button |
| Paragraph / Field | 16 | Regular, no letter spacing | 120 % | The text and placeholders in the form fields |
Label sets the capitals itself (text case Upper): type labels in normal case (“Since 2011”) and they show in capitals.
The Docs/ text styles (Display, Subheading, Title, Heading, Swatch Name, Body, Caption and Label) set the text on the Style Guide, Components, Icons, Read Me and Cover pages. The page designs don’t use them.
Changing the font
Section titled “Changing the font”- Open Local styles and edit a text style: change the font family.
- Repeat for every text style — Figma has no single “font” setting.
The quickest route is a plugin that swaps fonts across styles (search the Figma Community for “font replacer”). Check long headings afterwards: another font may run wider and wrap differently.
Breakpoints
Section titled “Breakpoints”| Size | Frame width | Side margins | Section padding (top and bottom) |
|---|---|---|---|
| Desktop | 1200 px | 40 px | 100 px |
| Tablet | 810 px | 20 px | 80 px |
| Phone | 390 px | 15 px | 60 px |
Layout grids
Section titled “Layout grids”Every page frame has a grid style that matches its breakpoint:
| Grid style | Columns | Gutter | Margins | Fits |
|---|---|---|---|---|
| Grid/Desktop | 12 | 20 px | 40 px | Three- and four-column card grids |
| Grid/Tablet | 8 | 20 px | 20 px | Two-column grids |
| Grid/Phone | 4 | 20 px | 15 px | One column of 360 |
They are hidden by default so they don’t cover the design: select a frame and click the eye icon in its Layout grid panel to show its grid (the Ctrl + G / Ctrl + Shift + 4 shortcut shows or hides only the grids whose eye is on). New frames get the same grid by picking the style in that panel.
These are the widths the Framer, Next.js, Astro and HTML editions switch layouts at, so a design you adjust here translates directly.