Logo Usage Guide
Rules for using the Askara logo correctly
Rules for using the Askara logo correctly
| Layout | When to Use | Dimensions |
|---|---|---|
| Horizontal | Headers, navigation bars, wide contexts, email signatures | 671 x 192px |
| Stacked | Square contexts, social avatars, compact placements | 456 x 432px |
| Square Icon | Social media avatars, app stores, 1:1 contexts | 800 x 800px |
| Wordmark | Text-only contexts where the icon is already visible | 457 x 156px |
| Background | Use This Theme |
|---|---|
| Light / parchment / white | Dark variant |
| Dark / navy / black | Light or White variant |
| Coloured / photographic | White variant (best contrast) |
The auto theme (in the AskaraLogo component) renders both dark and light, toggling with the CSS dark: modifier.
Highlight variants add a phosphor green glow effect. They are only for interactive hover states in the website (using the interactive prop on the AskaraLogo component).
Do not use highlight variants for:
Available for: horizontal, stacked, square icon, icon. Not available for wordmark.
Phosphor green is reserved for (a) hover and focus states on interactive elements, (b) primary CTA fills, and (c) the logo mark.
Never use phosphor green for:
Where {layout} = horizontal, stacked, icon, icon-square · {theme} = dark, light, white
Below these sizes the logo becomes illegible.
| Layout | Minimum Height |
|---|---|
| Horizontal | 28px |
| Stacked | 60px |
| Wordmark | 24px |
Maintain clear space around the logo equal to at least the height of the icon mark. No other visual elements should intrude into this space.