Branding

You can easily swap out the default Pace logo with your own logo. The logo is located at resources/images/logo.svg. You can sway out the white logo located at resources/images/logo-white.svg

Pace uses Encore to compile frontend assets. Therefore, when compiled, the logos will be copied over to public/assets/images.

Favicon

Just as with the logo, you can also replace the default favicon with your own. The favicon and its associated file are located inside the public directory. You can a platform like RealFaviconGenerator to generate your favicon and extract the generated images to the public.

Colors

You'd most likely want to change the colors to match your application. You can do that inside tailwind.config.js:

// tailwind.config.js

colors: {
  transparent: 'transparent',
  current: 'currentColor',
  white: '#fff',
  red: colors.red,
  green: colors.green,
  blue: colors.blue,
  brand: {
    50: '#f6fafc',
    100: '#ecf4fa',
    200: '#d0e4f2',
    300: '#b3d4ea',
    400: '#7bb4db',
    500: '#4294CB',
    600: '#3b85b7',
    700: '#326f98',
    800: '#28597a',
    900: '#204963',
  },
  gray: {
    50: '#f4f4f4',
    100: '#e9e9e9',
    200: '#c8c8c8',
    300: '#a7a7a7',
    400: '#646464',
    500: '#222222',
    600: '#1f1f1f',
    700: '#1a1a1a',
    800: '#141414',
    900: '#111111',
  },
},

Fonts

Pace uses Inter as the default font. To use a different font, you can specify it inside tailwind.config.js:

// tailwind.config.js

fontFamily: {
  sans: ['Inter', ...defaultTheme.fontFamily.sans],
},
API Token