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.

Before you begin

Prepare a square logo with a transparent background and note your brand's primary color. Decide whether the board must match an existing website; if it does, copy the exact colors and font choices instead of approximating them by eye.

Access design settings

1. Click Website builder in the sidebar
2. 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.

Your board's favicon (the small icon in browser tabs) is generated automatically from your logo, so there is no separate favicon to upload.

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. Under WCAG 2.2, normal text needs 4.5:1 for AA and 7:1 for AAA; large text needs 3:1 for AA and 4.5:1 for AAA. Logos and incidental text have separate exceptions. Contrast is one part of accessibility, and the legal requirements that apply depend on your organization and jurisdiction.

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.

Verify the design

Use the editor's theme control to inspect the logo, primary text, buttons, links, surfaces, and borders in both light and dark mode. Confirm the contrast indicator passes for the text and background combinations you use. Click Save, then open a public job page in a private browsing window and confirm the saved logo, colors, and fonts match the preview. Check both desktop and mobile widths before considering the design finished.

Example palette check

For example, if your accent color is dark blue, preview it as a link, focus ring, and featured-job accent—not only as a swatch. Then check primary text on the page background and button text on the button background in both themes. A token can work in one pairing and fail in another.

Troubleshoot design changes

If the public board does not match the editor, confirm you selected Save, then reload the public page in a private window. If a logo is missing, check its file type and size before uploading it again. If the contrast indicator fails, change the foreground or background token it names rather than compensating with an unrelated color.

Available fonts

Cavuno includes 20 fonts from Google Fonts, self-hosted through Next.js to avoid a browser request to Google's font servers and help minimize layout shift. Actual loading performance still depends on the selected fonts, page, device, and network.

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 shapes how easily visitors can recognize and use the board. Keep your logo, colors, and fonts consistent across your website, social profiles, and email communications, then validate readability and navigation with real users instead of assuming polish will change application or purchase behavior.

Test your design on mobile as well as desktop. Give the smallest viewport the same attention as the editor preview.

Next steps

• Website builder: arrange the sections that use your design tokens
• Navigation and footer: apply clear labels and complete your global page frame