Usage Guide — Askara Brand

Selection

Choosing a Layout

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

Selection

Choosing a Theme

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.

Interactive States

Highlight Variants

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:

Static print materials
Documents or presentations
Social media profile pictures
Email signatures

Available for: horizontal, stacked, square icon, icon. Not available for wordmark.

Colour Rules

Phosphor Green

#8dff35 — Reserved

Phosphor green is reserved for CTAs and the logo only.

Never use phosphor green as:

A background colour
Body text colour
Decorative borders or accents
Chart or data visualisation colours

Assets

File Naming Convention

askara-logo-{layout}-{theme}.png — standard
askara-logo-{layout}-{theme}-highlight.png — hover state
askara-wordmark-horizontal-{theme}.png — wordmark

Where {layout} = horizontal, stacked, icon, icon-square · {theme} = dark, light, white

Sizing

Minimum Sizes

Below these sizes the logo becomes illegible.

Layout	Minimum Height
Horizontal	28px
Stacked	60px
Wordmark	24px

Spacing

Clear Space

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.