Colours and text styles — Findit 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 Findit 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, buttons, the footer and other dark surfaces |
| Body | #333333 | Paragraphs |
| Grey | #747474 | Menu links, icons, secondary text |
| Black 50 | #000000 at 50 % | Placeholder text in form fields |
| Black 10 | #000000 at 10 % | Dividers and hairline borders |
| Black 05 | #000000 at 5 % | Form field fills |
| Black 03 | #000000 at 3 % | Light fills |
| Background | #F2F4F7 | Cards and tinted sections |
| Cultured 50 | #F5F5F5 at 50 % | The soft gradient behind the home hero |
| White | #FFFFFF | Page background, text on dark, cards |
| White 80 | #FFFFFF at 80 % | Footer text |
| White 10 | #FFFFFF at 10 % | Lines on dark surfaces |
| Yellow | #FFA800 | Rating stars |
| Transparent | #FFFFFF at 0 % | Invisible fills that keep a layer clickable |
| Error, Error 15 | #FF2244, and at 15 % | The error state of the submit button |
| Body 80 | #333333 at 80 % | The submit button’s hover state |
| Video Overlay | #212121 at 80 % | The play button of the property video |
| Placeholder | #D9D9D9 | Every photo slot — replace it with your image |
Findit is black and white with one soft grey: there is no accent colour. To add one, create a colour style (+ next to Color styles) and apply it where you want it — the Primary button is a good place to start.
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 four Black tints together, and the two White tints: they are the same colour at different opacities.
Keep the contrast between text and background readable: 4.5:1 or more. (The design’s Grey on Background is 4.24:1 — fine for large text, just under the mark for the small text on property cards; darken Grey a little if your project needs to meet WCAG AA.)
Text styles
Section titled “Text styles”Manrope throughout. Headings are Medium (500), the Display style SemiBold (600), paragraphs Regular (400), buttons SemiBold.
Headings — one style per breakpoint
Section titled “Headings — one style per breakpoint”| Style | Desktop | Tablet | Phone | Line height |
|---|---|---|---|---|
| Display 1 | 72 | 50 | 38 | 120 % |
| Heading 1 | 54 | 42 | 34 | 120 % |
| Heading 2 | 42 | 34 | 30 | 120 % |
| Heading 3 | 36 | 32 | 28 | 120 % |
| Heading 4 | 28 | 26 | 24 | 120 % |
| Heading 5 | 24 | 22 | 20 | 120 % |
| Heading 6 | 20 | 19 | 18 | 120 % |
| Display 404 (the 404 number) | 271 | 245 | 146 | 120 % |
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, and check the style already on a layer before replacing it.
Paragraphs and interface text
Section titled “Paragraphs and interface text”| Style | Size | Weight | Line height |
|---|---|---|---|
| Paragraph / Big Paragraph | 18 | Regular | 140 % |
| Paragraph / Medium Paragraph | 16 | Regular | 140 % |
| Paragraph / Small Paragraph | 14 | Regular | 140 % |
| Paragraph / Menu | 16 | Medium | 120 % |
| Paragraph / Button | 15 | SemiBold | 120 % |
| Paragraph / Label | 14 | Medium, uppercase | 120 % |
| Paragraph / Small Button | 13 | SemiBold | 120 % |
| Paragraph / Tiny | 12 | Regular | 120 % |
The Docs/ text styles set the labels 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 |
|---|---|---|
| Desktop | 1200 px | 30 px |
| Tablet | 810 px | 20 px |
| Phone | 390 px | 15 px |
Layout grids
Section titled “Layout grids”Every page frame has a grid style that matches its breakpoint:
| Grid style | Columns | Gutter | Margins |
|---|---|---|---|
| Grid/Desktop | 12 | 20 px | 30 px |
| Grid/Tablet | 8 | 20 px | 20 px |
| Grid/Phone | 4 | 15 px | 15 px |
They are hidden by default so they don’t cover the design. Show them with Ctrl + G (Mac) or Ctrl + Shift + 4 (Windows), or with the eye icon in the frame’s Layout grid panel. 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.