Kyb/DocsBeta

Theming & Custom Branding

Kyb ships with multiple built-in colour themes and supports full custom branding for organisations — including logo replacement, app name override, and colour customisation.

1. Choosing a built-in theme

Navigate to Settings > Appearance to see the available themes. Click a theme card to switch instantly — your choice is saved to your profile and persists across sessions.

Kyb currently ships three built-in themes:

  • Midnight — Deep dark theme, the default Kyb look. Best for low-light environments.
  • Slate — Lighter dark theme with softer contrast. A good middle ground.
  • Daylight — Full light mode for bright environments and projector displays.

Theme selection is per-user — each team member can choose their preferred theme independently.

2. Custom branding (organisations)

Organisation admins can customise the app branding so it looks like an internal corporate tool. Custom branding applies to all members of the organisation.

Go to Settings > Appearance, then scroll down to the Custom Branding section (visible to org admins only). You can customise:

  • Logo URL — Provide a URL to your company logo. The Kyb logo throughout the app will be replaced with yours.
  • App name— Replace “Kyb” with your company or tool name in the header bar.
  • Colour overrides — Override any of the core UI colours (background, surface, accent, text, borders) to match your brand palette.

3. Logo guidelines

For the best results, your logo should follow these guidelines:

  • Format: SVG (preferred) or PNG.
  • Dimensions: Square, at least 32×32 pixels. The logo is displayed at 22–28px in the header.
  • Background:Transparent. The logo sits on the app's surface colour.
  • Hosting: The URL must be publicly accessible (HTTPS). You can use a CDN, your company website, or a service like Cloudinary.

4. Colour token reference

The following colour tokens can be overridden via the Appearance settings. Each token controls a specific part of the UI.

TokenDescriptionMidnight default
BackgroundPage / canvas background#08090d
SurfaceCards, panels, dialogs#111318
Surface hoverHover state for surfaces#191c24
BorderDividers, outlines#232736
TextPrimary text colour#e8e8ed
Text mutedSecondary / helper text#9ea0b0
AccentPrimary brand colour, buttons, links#c9a84c
Accent hoverHover state for accent elements#d9bc6a

5. ArchiMate layer colours

The ArchiMate layer colours (Motivation, Strategy, Business, Application, Technology, Implementation & Migration) remain constant across all themes for domain consistency. These are not customisable.