Branding Guide

Overview

Byteion was designed for white-label SaaS, client dashboards, admin templates, and starter kits. Most brand changes should happen through CSS variables and Tailwind configuration — not component markup. A brand theme typically includes color, typography, radius, logo assets, metadata, and dark-mode values.

Branding workflow

1. Choose the primary brand color.
2. Set --primary and --primary-foreground in HSL format.
3. Align --ring with the brand color for focus states.
4. Update secondary / accent colors if the brand needs them.
5. Load and configure the brand font in Tailwind config.
6. Adjust radius tokens to match the brand personality.
7. Replace logos, favicon, social image, and app metadata.
8. Update dark-mode variables.
9. Test key screens and contrast ratios.

Brand colors

Start with the primary color. Use raw HSL channels — no hsl() wrapper, no hex, no rgb():

:root {
 --primary: 270 100% 50%;           /* Brand purple */
 --primary-foreground: 0 0% 100%;   /* Text on primary — must contrast */
 --ring: 270 100% 50%;              /* Focus ring — align with brand */
}

This single change updates every button, link, focus ring, active indicator, and primary-colored element across all components. The --primary-foreground token must have enough contrast against --primary (aim for WCAG AA 4.5:1). The --ring variable controls focus ring color and should usually align with the brand.

Full brand palette

For a more complete brand palette, include secondary and accent tokens. Use these for subtle surfaces, tabs, sidebars, highlights, and non-primary UI:

:root {
 --primary: 270 100% 50%;
 --primary-foreground: 0 0% 100%;

 --secondary: 240 4.8% 95.9%;
 --secondary-foreground: 240 5.9% 10%;

 --accent: 270 100% 97%;
 --accent-foreground: 270 70% 30%;

 --ring: 270 100% 50%;
}

Do not change status colors like --success, --warning, --danger, or --info unless the brand system requires it and you verify contrast remains safe on all surfaces.

Brand typography

Load the font first (via Google Fonts, rsms.me, or self-hosted), then configure Tailwind. For production templates, self-hosting improves reliability and privacy:

module.exports = {
 theme: {
  extend: {
   fontFamily: {
    sans: ['Inter', 'system-ui', 'sans-serif'],
   },
  },
 },
};

Keep fonts readable for dashboards and dense tables. Avoid decorative fonts for forms, tables, and admin workflows — prioritize legibility at small sizes.

Border radius

Radius expresses brand personality through component corners. Each token targets a specific component family:

• Lower radius — enterprise, finance, technical, serious (0.25rem–0.375rem)
• Medium radius — balanced SaaS / admin default (0.5rem–0.75rem)
• Larger radius — friendly, education, consumer, playful (0.75rem–1.25rem)

:root {
 --radius-button: 0.375rem;  /* Buttons */
 --radius-input: 0.5rem;     /* Inputs, selects, textareas */
 --radius-badge: 9999px;     /* Badges, tags, pills */
 --radius-card: 0.75rem;     /* Cards, panels */
 --radius-panel: 1rem;       /* Sidebars, drawer panels */
 --radius-overlay: 1.25rem;  /* Modals, dialogs, popovers */
}

Logo and asset replacement

Dark mode branding

Do not only update light-mode variables. Add matching .dark overrides so the brand looks intentional in both modes. You may need to lighten or darken the primary color for dark-mode contrast:

.dark, [data-theme="dark"] {
 --primary: 270 95% 65%;          /* Lighter on dark bg */
 --primary-foreground: 240 10% 3.9%;
 --ring: 270 95% 65%;
}

Ensure --primary and --primary-foreground still pass WCAG AA contrast against the dark background. See the Dark Mode page for persistence and toggling.

Multiple client brands

Scope brand variables under a [data-brand] selector to support multiple clients in a single codebase. Useful for white-label SaaS, client dashboards, template previews, admin theme switchers, and marketplace demos:

[data-brand="acme"] {
 --primary: 270 100% 50%;
 --primary-foreground: 0 0% 100%;
 --ring: 270 100% 50%;
}

[data-brand="nova"] {
 --primary: 160 84% 39%;
 --primary-foreground: 0 0% 100%;
 --ring: 160 84% 39%;
}

Apply the brand by setting data-brand="acme" on <html> or a scoped container. Each brand can also define its own .dark overrides.

White-label checklist

Do and Don't

Developer tips

Related

• Theming Guide — Full customization reference
• CSS Variables — Runtime token reference
• Colors — Semantic and palette color tokens
• Dark Mode — Light / dark brand values and toggling
• Tailwind Preset — How variables map into utilities