Colours and text styles

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 Nitip 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

Style	Value	Used for
Black	#101010	Text, buttons, dark sections
Black 80	#101010 at 80 %	Link hover, checkbox labels
Black 50	#101010 at 50 %	Testimonial panel over the photo, the “/5.0” in ratings
Black 05	#101010 at 5 %	Checkbox fill, light fact cards
Black 03	#101010 at 3 %	Form fields, pricing cards
Grey	#818181	Secondary text, meta information
Line	#D9D9D9	Dividers, borders, menu hover
Background	#F6F6F6	Page background
White	#FFFFFF	Text on dark, cards, header pill
Accent	#FC5000	Kept in reserve for highlights of your own
Yellow	#FDCA49	Rating stars
Transparent	#FFFFFF at 0 %	Invisible fills that keep a layer clickable
Placeholder	#D9D9D9	Every photo slot — replace it with your image

Two more, Docs/Surface and Docs/Surface Strong, colour the boards on the Style Guide and Components pages. They are not used by the page designs.

Rebranding the palette

1. Deselect everything, open Local styles, and click the edit icon next to a colour style.
2. Change the hex value — keep the style’s name, so everything that uses it follows.
3. Change the four Black tints together: they are the same colour at different opacities.

Keep the contrast between text and background readable: dark text on a light background at 4.5:1 or more. (The design’s Grey on Background is 3.6:1 — fine for large text, light for small print; darken it if your project needs to meet WCAG AA.)

Text styles

Inter throughout. Headings are Medium (500), paragraphs Regular (400).

Headings — one style per breakpoint

Style	Desktop	Tablet	Phone	Line height
Heading 01	72	58	46	110 %
Heading 02	64	52	44	120 %
Heading 1	54	44	36	120 %
Heading 2	42	36	32	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 %
Huge Paragraph	32	28	24	120 %
Display (the 404 number)	285	228	143	110 %
Big Footer (“Let’s work together.”)	76, Regular	76, Regular	37, Regular	110 %

Styles are grouped by breakpoint: Desktop/Heading 01, Tablet/Heading 01, Phone/Heading 01 and so on. Pick the group of the frame you are working in; a few phone layouts deliberately use a Tablet size where the phone one would be too small, so check the style already on a layer before replacing it.

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	120 %
Paragraph / Button	14	Medium	140 %
Paragraph / Menu	13	Medium	110 %

The Docs/ text styles (Display, Title, Heading, Subheading, Caption, Body, Label) set the labels on the Style Guide and Components boards. The page designs don’t use them.

Changing the font

1. Open Local styles and edit a text style: change the font family.
2. 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

Size	Frame width	Side margins
Desktop	1200 px	40 px
Tablet	810 px	30 px
Phone	390 px	20 px

Layout grids

Every page frame has a grid style that matches its breakpoint:

Grid style	Columns	Gutter	Margins
Grid/Desktop	12	30 px	40 px
Grid/Tablet	8	20 px	30 px
Grid/Phone	4	20 px	20 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.