Customize Your Design

Your design system is a small set of choices (logo, colors, fonts) that cascade across your entire job board. Instead of styling every button, card, and heading individually, you configure a few meaningful tokens and the system applies them consistently everywhere. Change your brand color once and every button, link, and accent updates automatically.

When you create a new board, Cavuno's AI generates a complete color theme (light and dark mode) and selects fonts tailored to your niche. Everything it picks is a starting point you can customize.

Access design settings

1. Go to Board settings in the sidebar
2. Scroll to the Website builder section and click Edit
3. Click the Design system panel in the right sidebar

The panel heading says "Set your logo, color palette, and typography." Changes you make here apply globally to every page on your board.

Upload your logo

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

Your logo appears in the header of every page. Use a transparent PNG (minimum 200×200px) so it works on both light and dark backgrounds. Keep the file under 500KB since it loads on every page view. Test your logo in both theme modes using the toggle in the editor. A logo that looks great on white can disappear on a dark background.

Color schemes

Color schemes define the entire visual palette for your board. Rather than picking colors for each individual element, you choose a scheme and every element inherits the right color for its role.

Select a preset

1. In the Design system panel, find the Color scheme section
2. Browse the available presets
3. Click a preset to apply it instantly

Cavuno includes seven professionally designed presets, each balanced for both light and dark mode:

• Obsidian: High-contrast monochrome. Sharp, modern, focused.
• Slate: Cool blue accent. Professional, enterprise-ready.
• Sand: Warm tones. Human, approachable, inviting.
• Coral: Warm accents. Energetic, lively, bold.
• Indigo: Strong blue-purple. Confident tech vibe.
• Emerald: Green accent. Fresh, growth-oriented, clean.
• Charcoal: Classic grayscale. Content-focused, minimal.

Customize colors

If the presets don't match your brand, select Custom or click into any preset to override individual values. Each color token controls a specific role in your UI:

• Accent color: Links, focus rings, interactive highlights, featured job card accents
• Button background / Button text: Primary action buttons (Apply, Subscribe)
• Page background: Main layout background
• Surface background: Inputs, dropdowns, cards, menus
• Subtle background: Tags, badges, secondary sections
• Primary text: Headings and body text
• Subtle text: Subheadings, labels, secondary content
• Muted text: Hints, timestamps, supporting details
• Border color: Card edges, dividers, input outlines

The editor includes built-in WCAG contrast checking. As you adjust colors, you can see the contrast ratio between text and background combinations and whether they meet AA (4.5:1 for body text) or AAA (7:1) standards. This matters because low-contrast text drives visitors away, and accessibility compliance is increasingly a legal requirement in many jurisdictions.

Light and dark mode

Your board supports both light and dark themes. Each color scheme includes values for both modes, so your board looks intentional in either one.

1. In the Design system panel, find the Theme mode toggle
2. Switch between Light and Dark to preview each mode

When customizing colors, make sure to check your choices in both modes. A color that provides great contrast on a white background might be unreadable on a dark one.

Typography

Fonts set the personality of your board. A clean sans-serif says "modern tech company." A serif heading font says "established, editorial."

1. In the Design system panel, find the Typography section
2. Choose a body font (used for paragraphs, descriptions, and most text)
3. Choose a heading font (used for page titles, section headers, and card titles)

For the heading font, you can also select Same as body to use one font throughout.

The preview shows a sample sentence in your chosen fonts so you can evaluate readability before saving. Stick to one or two font families for a professional look. If you're unsure, using the same font for both headings and body text is a safe choice that always looks clean.

Available fonts

Cavuno includes 20 fonts from Google Fonts, all self-hosted through Next.js for fast loading and zero layout shift.

Sans-serif: Be Vietnam Pro, DM Sans, Figtree, Fira Sans, Geist, Hind, Inter, Lexend, Manrope, Open Sans, Outfit, Plus Jakarta Sans, Poppins, Public Sans, Source Sans Pro, Space Grotesk, Work Sans

Serif: Crimson Pro, Lora, Source Serif 4

Best practices

Your design system is one of the first things visitors notice, even if subconsciously. A polished visual identity builds trust with both job seekers and employers, which directly affects application rates and willingness to pay for job postings. Keep your logo, colors, and fonts consistent with your brand across your website, social media, and any email communications. If employers see a cohesive brand, they're more likely to perceive your board as established and worth investing in.

Test your design on mobile. That's where the majority of job seekers will see it first.