The Design settings are the perfect starting point for building your career site. In the Career site editor, you’ll find the design settings at the top of the overview page.
Here, you can set the brand identity of your career site by adding your logo, colors, and typography. Your chosen design settings will automatically be applied across all pages.
Logotypes
Uploading your company logos strengthens your employer branding and builds trust with candidates. The logos appear at the top of your career site, when communicating with candidates through email, and will be used for some job board promotions.
There are three types of logotype settings available:
Default logotype
The logo provided here is your default logotype. It will be used in external communication, including emails and job board promotions, so make sure it looks good against a white background.
The logo will also appear across your career site, allowing candidates to click it at any time to easily return to the Home page.
Optional logotype
You can also upload an optional logotype that will only appear on your career site and won’t be used in any external communication. This is ideal if, for example, you plan to use a white logo on your career site. On the right-hand side, you’ll see a helpful preview of how your logos will appear against white and grey backgrounds when viewing your design settings.
Favicon
A favicon is an icon that represents your career site, displayed in the browser's address bar. Usually, this is your logotype or the logotype of the service you're using.
You can use your own favicon on your career site by uploading your own image or by clicking the Get favicon from website button. This will automatically sync the favicon from the link you’ve added under the Website field in your Footer block on your Home page.
In the Career menu section, you will also be able to define if the logo should be positioned Left, Center, or Right.
Colors
Maintaining a consistent color scheme is key to staying within your brand’s theme, and Teamtailor makes this easy. The color settings in your global design apply across every page of your career site and in your communication with candidates.
The color set as Main is used by default for all links and graphical details, so it's best to use your brand’s primary color here. This setting overrides the color options for links, secondary backgrounds, and button backgrounds, meaning any updates will apply across these elements.
The preview on the right-hand side in Global design shows how your content, primary, and secondary background colors will look
Links
In this section, you can define the link style for the career site. The links will use the Link color specified in the settings.
Option | Visuals |
Bold |  |
Underline |  |
Highlight |  |
Underline + Highlight |  |
Typography
In your typography settings, you can choose your preferred font and font weight (the thickness of the text). When designing your career site, you can select from the available fonts or upload a custom one.
Custom fonts can be added via Google Fonts, Adobe Fonts (Typekit), or by sending .woff files to our Support team.
Read more about using default or custom fonts here.
Buttons
You can customize the buttons on your career site by selecting a style and setting a border radius between 0–40px (where 0px creates sharp corners).
Colors
Outlined: Uses the Button bg color.
Filled: Uses the Button bg and Button text colors.
Option | Visuals |
Outlined + Border-radius 0px |  |
Outlined + Border-radius 40px |  |
Filled + Border-radius 0px |  |
Filled + Border-radius 40px |  |
Career menu
Option | Description |
Apperance | Default: The default version of the career menu with pre-selected options. 
Custom: Editing the default options will create a custom version of the career menu settings. 
|
Menu orientation | Vertical: Pages are placed inside a collapsible career menu, both on desktop and mobile. 
Horizontal: Pages are displayed horizontally on desktop, but placed in a collapsible career menu on mobile.  |
Logo position | Center: Placement of the uploaded logotype is center-aligned in the navigation bar. 
Right: Placement of the uploaded logotype is right-aligned in the navigation bar.  |
Menu text | On: "Career menu" is added next to the menu button 
Off: Only the menu button is displayed.  |
Secondary button | Off: No secondary button displayed. 
Share: Share button displayed, allowing visitors to share the career site on social platforms. 
Language: Navigation to language versions of the career site set up using the Multiple languages feature.  |
Background | Changes the color of the navigation bar. This color setting is only applied to pages without a Cover block.
 |
Color | Changes the color of the navigation items. This color setting is only applied to pages without a Cover block.
 |
Miscellaneous
Confetti
Enable a fun confetti animation on the page where candidates land after submitting their application – a great way to celebrate their efforts!
Employee picture shape
Choose the style of your employees profile pictures visible on the career site, either Square or Circle.
Custom styles
You can enable custom coding for your career site, which allows you to add custom CSS and JavaScript. When you enable this option, you'll be asked to provide context about what you're planning to add. This feedback is valuable as it provides insights that help us improve the Content Editor.
Please note that we do not offer support for custom coding or edits. You are responsible for managing your code and ensuring its compatibility with future platform updates.
Learn more about custom coding on your career site here.
Prefer reading in your own language? Check out our other support centers available at the top of the page 🌍