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.
| Token | Description | Midnight default |
|---|---|---|
| Background | Page / canvas background | #08090d |
| Surface | Cards, panels, dialogs | #111318 |
| Surface hover | Hover state for surfaces | #191c24 |
| Border | Dividers, outlines | #232736 |
| Text | Primary text colour | #e8e8ed |
| Text muted | Secondary / helper text | #9ea0b0 |
| Accent | Primary brand colour, buttons, links | #c9a84c |
| Accent hover | Hover 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.