Customize Your Job Board Design: Colors, Typography & Branding

Create a consistent, professional look across your entire job board. The design system controls colors, fonts, and visual styling that apply to all pages.

AI-generated themes

When you create your board, Cavuno's AI automatically generates a complete color theme (light and dark mode) and selects fonts tailored to your niche based on your board description. For example, a tech-focused board might get cool blues with a modern sans-serif, while a healthcare board might get greens with a clean, professional typeface.

The AI-generated theme is a starting point — you can customize any value afterward using the design system settings below.

What is a design system?

A design system is a collection of reusable design tokens (colors, fonts, spacing) that ensure visual consistency across your entire job board. Instead of styling each element individually, you configure a small set of values that automatically apply everywhere. This approach saves time, prevents inconsistencies, and produces professional results without design expertise.

Why use a design system?

Most website builders give you total control over every element: pick any color, any size, any spacing. The result? Hours spent tweaking pixels, inconsistent designs, and sites that look amateur despite the effort.

We take a different approach. The design system gives you meaningful choices (your brand colors, your fonts) while automatically handling the details that make designs look professional. You configure a small set of design tokens, and they cascade throughout your entire job board. Buttons, cards, forms, and more all stay consistent without manual effort.

This is what engineers call "falling into the pit of success": the right outcome should be the easy outcome. You shouldn't need design expertise to create a job board that looks polished.

How tokens work

Behind the scenes, your choices become design tokens: a small set of values that cascade throughout the entire job board.

• One primary color generates button styles, link colors, focus states, and accent highlights
• One font choice applies to all headings with consistent sizing and weight
• One border radius ensures buttons, cards, and inputs all feel cohesive

This token-based approach means:

• Consistency by default: Every page looks like it belongs together
• Fewer decisions: Focus on your brand, not individual UI elements
• Professional results: Design best practices are baked in
• Easy updates: Change one value, update everywhere

Accessing design settings

1. Open the Website Builder
2. Select any page to edit
3. Click Design in the right panel

Changes to the design system apply globally to all pages on your job board.

Board logo

Your logo appears in the header navigation and throughout your job board.

Upload a logo

1. In the Design panel, find the Logo section
2. Click Upload or drag and drop your logo file
3. Click Save to apply

Logo requirements

• Format: PNG, JPG, or SVG
• Dimensions: Recommended minimum 200×200 pixels for square logos
• Background: Transparent PNG works best, especially for dark mode
• File size: Keep under 500KB for fast page loads

For best results, provide a logo that works well at small sizes (as it appears in the header).

Color schemes

Rather than exposing dozens of color pickers, we use a constrained palette system. You configure a small set of meaningful color tokens, and they apply consistently across your entire job board. Buttons, cards, links, and interactive states all stay coordinated.

Select a preset scheme

Preset schemes are designed by professionals and guaranteed to look good together:

1. In the Design panel, find the Colors section
2. Browse the available color presets
3. Click a preset to apply it instantly
4. Preview the changes across your entire job board

Each preset includes carefully balanced values for light mode, dark mode, and all interactive states.

Custom colors

If the presets don't match your brand, customize your palette:

1. Click Customize to enter custom color mode
2. Adjust individual color values to match your brand
3. Preview changes in real-time

The constrained set of color tokens means you're only adjusting meaningful values, not picking colors for every button, border, and background individually.

Light and dark mode

Your job board supports both light and dark themes. Visitors can switch between modes, and you can set a default.

Configure dark mode

1. In the Design panel, find the Theme section
2. Choose your default theme: Light, Dark, or System (follows user preference)
3. Toggle the preview between modes to test your design

Preview both modes

Use the theme toggle in the editor toolbar to preview how your job board looks in light and dark mode. Ensure your logo and colors work well in both.

Tips for dark mode

• Use a transparent PNG logo that's visible on dark backgrounds
• Test that your brand colors have sufficient contrast in both modes
• Preview key pages like job listings and company profiles in dark mode

Typography

Choose fonts that reflect your brand's personality and ensure readability.

Heading font

Controls the appearance of titles and headlines throughout your job board.

1. In the Design panel, find the Typography section
2. Select a heading font from the available options
3. Preview how headlines look on the page

Body font

Controls paragraph text, descriptions, and other content.

1. Select a body font from the available options
2. Check readability in the preview

Font pairing tips

• Contrast: Pair a distinctive heading font with a readable body font
• Consistency: Stick to 1-2 font families for a professional look
• Readability: Prioritize legibility, especially for body text

Design best practices

Brand consistency

• Use the same logo and colors across your website, social media, and job board
• Apply your brand's typography consistently

Accessibility

• Ensure sufficient color contrast (WCAG recommends a ratio of at least 4.5:1 for text)
• Test that text remains readable at different sizes
• Verify that interactive elements are clearly distinguishable

Mobile-first design

• Preview your design on mobile viewport
• Ensure logos scale properly on small screens
• Test that touch targets are large enough