Branding
Logo
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],
},