Cavuno
  • Documentation
  • Pricing
  • Contact
Sign In
Cavuno

The AI-native job board platform that runs itself

© Copyright 2026 Cavuno. All Rights Reserved.

About
  • Contact
Product
  • Documentation
Legal
  • Terms of Service
  • Privacy Policy
  • Cookie Policy
  • Getting Started
    • Quick Start
    • Cavuno Overview
  • Create a Job Board
    • What is a Job Board
    • Why Start
    • Choosing Your Niche
    • Launch Checklist
    • Launch Marketing
    • Getting First Jobs
    • Growing Audience
  • Board Setup
    • Custom Domain
    • Website Builder
    • Design System
    • SEO Settings
    • Navigation & Footer
    • Legal Pages
    • Password Protection
  • Team
    • Invite Members
    • Roles
  • Managing Jobs
    • Create Job
    • Edit/Delete
    • Search
    • Job Workflow
  • Managing Companies
    • Add Company
    • Edit Profile
    • Markets
  • Blog
    • Create Posts
    • Authors & Tags
  • Backfill
    • About Backfill
    • Configure
    • Job Wrapping
  • Job Alerts
    • How It Works
    • Subscribers
    • Email Types
  • SEO Guide
    • Fundamentals
    • Technical SEO
    • Landing Pages
    • Google for Jobs
    • Expired Jobs
    • Content Marketing
    • Backlinks
  • Analytics
    • Dashboard
    • Google Analytics
    • Search Console
  • Monetization
    • Stripe Setup
    • Pricing Plans
    • Subscriptions
    • Advertising
  • Revenue Strategies
    • Overview
    • Job Posting Fees
    • Employer Subscriptions
    • Advertising
    • Additional Revenue
    • Affiliate Programs
  • Billing
    • Subscription
    • Portal
  • Use Cases
    • For Associations
    • For VC Firms
    • For Universities
    • For Staffing Agencies
    • For Communities
    • For Churches
    • For SaaS Companies
    • For Economic Development
DocsBoard SetupDesign System

Customize Your Job Board Design: Colors, Typography & Branding

Configure your job board's visual identity with color schemes, typography, logo, and dark mode settings.

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

Why 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).

PreviousWebsite BuilderNextDesign System

On this page

  1. Why a design system?
  2. How tokens work
  3. Accessing design settings
  4. Board logo
  5. Upload a logo
  6. Logo requirements
  7. Color schemes
  8. Select a preset scheme
  9. Custom colors
  10. Light and dark mode
  11. Configure dark mode
  12. Preview both modes
  13. Tips for dark mode
  14. Typography
  15. Heading font
  16. Body font
  17. Font pairing tips
  18. Design best practices
  19. Brand consistency
  20. Accessibility
  21. Mobile-first design

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, or 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