Brand
Logo Guidelines
Official LOKE logo usage, formats, downloads, and implementation guidance.
LOKE Logo Guidelines
This page documents the official LOKE logos, formats, and best practices for usage across product and marketing surfaces.
Assets are served from the docs site public/ directory. Use absolute public paths like /logos/... when embedding images.
Logo Formats
LOKE’s identity includes multiple formats for different contexts. Use the tabs to explore and download assets.
Standard Logo — Dark on Light Background
The default dark LOKE logo for light backgrounds. Use this for most web/app headers, docs, and presentations.
Download Options
Standard Logo — Dark with Transparent Background
Use the transparent dark logo on custom light backgrounds while preserving the dark brand color.
Download Options
Need Help?
For questions regarding logo usage or to request custom sizes, please contact the brand team:brand@loke.example.comUsage Guidelines
General Logo Guidelines
Do's
- Use the dark logo on light backgrounds; use the light logo on dark backgrounds
- Maintain clear space around the logo equal to the height of the letter “L”
- Use appropriate size and format for your application
- Use circle/square variants for avatars and app icons
- Use “Powered by LOKE” for partner integrations
Don'ts
- Don’t stretch, distort, or rotate the logo
- Don’t change the logo colors
- Don’t place the logo on busy backgrounds without sufficient contrast
- Don’t add shadows, outlines, or glow effects
- Don’t create new variations or modify the logo
Technical Usage
For developers, embed the logo with public asset paths and responsive best practices.
// Responsive standard logo on light background
<img
src="/logos/LOKE_LOGO_DARK_Light-Bg-400px.png"
alt="LOKE logo"
className="max-w-full h-auto"
/>
// Dark mode support (switches asset by theme)
<div className="dark:hidden">
<img src="/logos/LOKE_LOGO_DARK_Light-Bg-400px.png" alt="LOKE logo" />
</div>
<div className="hidden dark:block">
<img src="/logos/LOKE_LOGO_LIGHT_Dark-Bg-400px.png" alt="LOKE logo" />
</div>
// Partner applications: Powered by LOKE
<div className="mt-8 text-center">
<p className="text-sm text-gray-500 mb-2">Powered by</p>
<img src="/logos/powered-by-LOKE-Dark-200px.png" alt="Powered by LOKE" />
</div>
// Partner applications with dark mode
<div className="mt-8 text-center">
<p className="text-sm text-gray-500 dark:text-gray-400 mb-2">Powered by</p>
<div className="dark:hidden">
<img src="/logos/powered-by-LOKE-Dark-200px.png" alt="Powered by LOKE" />
</div>
<div className="hidden dark:block">
<img src="/logos/powered-by-LOKE-Light-200px.png" alt="Powered by LOKE" />
</div>
</div>