Branding Customization

1Kosmos can be styled to reflect your brand so that, to your customers, it feels like a seamless extension of your own product. This page covers everything you can customize and how to apply it.

---

What you can customize

Element	Customizable	Notes
Logo	✅	Light and dark variants
Primary color	✅	Used for primary buttons, links, active states
Secondary color	✅	Used for secondary actions, accents
Text / content color	✅	Body and heading text
Background color	✅	—
Typography / fonts	✅	—
Content & copy (labels, messages)	✅	—

Logo

Upload your logo to replace the default 1Kosmos branding across the interface.

Recommended specifications:

• Formats: SVG (preferred for crispness at any size), PNG with transparent background

• Dimensions: recommended max height 40px in the header

• File size: under 1 MB

Colors

Set your brand palette to carry your identity through every screen.

• Primary color — Your main brand color. Applied to: primary buttons, links, selected states, progress indicators.

• Secondary color — A complementary color for :secondary buttons, highlights.

• Text color — The color of body and heading text.

Custom colors must maintain sufficient contrast against their backgrounds (WCAG 2.2 AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and UI components.

Content & text

Beyond visual styling, you can tailor the words your customers see.

• Custom labels and copy

• Custom links

• Email / notification templates

Best practices

• Provide both light and dark logo variants for a polished result in every theme.

• Test your palette against the built-in contrast checker before publishing.

• Keep copy concise and consistent with the rest of your product's voice.

• Preview changes before publishing to all users.