Instructions

   A step by step guide on how to customize this template to reflect your brand. Changes made here will be global.

Customize Logo

Logo SVG

If you have an SVG version of your logo, here's how to update it:

  • Edit the Logo SVG component
  • Open the code editor
  • Copy the SVG code from Figma
  • Paste and replace the SVG code
  • Set width="100%" height="100%"
  • Set fill="currentColor"

Logo Image

Alternatively, you can upload the image version of your logo. Here's how to update the image:

  • Edit the Logo Image component
  • Upload and replace the image
  • Image formats: png or svg with transparent background

Customize Font

Primary Font

Primary font is set on the Body element. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Secondary Font

Secondary font is set on headings

  • To customize fonts, go to the Variables panel (V)
  • Select the Typography tab
  • Choose from any existing fonts or upload your own fonts

Customize Color

Color

The Color tab consists of all set of color available for use in the project.

  • To customize color, go to the Variables panel (V)
  • You only need to change the Main 500 and Accent 500
  • The lighter and darker shades will update automatically

Main Color

25

50

75

100

200

300

400

450

500

550

600

700

800

900

925

950

975

Accent Color

25

50

75

100

200

300

400

450

500

550

600

700

800

900

925

950

975

Customize SVG Icon

SVG Icon Properties

In the SVG Icon Properties, you can customize:

  • SVG ViewBox
  • SVG Path
  • SVG Fill

To copy SVG Properties from Figma:

  1. In Figma, select the Icon
  2. Right click > Copy/Paste as > Copy as SVG
  3. While in Figma, paste into a text block
  4. Copy & paste each individual properties you'd like to replace