Brand Guidelines
How to use Avalonia UI brands
COmpany Logo
Spacing
In order to ensure clarity of our logo, it must always maintain a minimum clear space surrounding it.
Sizing Legend
w
Baseline Size
x
50% of w
y
33.3% of w
z
25% of w
Rules
Resize logos proportionally
Adhere to spacing guides
Do not pair logo with other text or logos
Wide Orientation
Minimum Height 24px
Tall Orientation
Minimum Height 48px
Isolated Mark
Minimum Height 24px
COmpany Logo
Typography
Rules
Always lowercase with the exception of ‘UI’ in Avalonia UI
-1% letterspacing / -0.02 rems
Scale and alignment are based on x-height
Logotype should only be used when paired with logo marks
COmpany Logo
Color
In order to ensure clarity of our logo, it must always maintain a minimum clear space surrounding it.
Rules
Logo must maintain proficient contrast with background
Do not use background on top of overly complex visuals
Scale and alignment are based on x-height
Logotype should only be used when paired with logo marks
Beige
Dark Beige
White
Deep Space
Black
Color
Brand Palette
The primary brand color usage should mostly consist of Bone, Snow and Timberwolf with Azure being used in a limited fashion as to maintain the professional and clean approach of the visual identity.
(EX. A) Web page
For a web page with many sections, Azure should only be used in 1-2 primary sections, such as the Hero and Final CTA. With a limited amount of smaller elements (i.e. Button) using Azure.
(EX. B) Marketing Graphic
Azure may be used to fill an entire space for a marketing graphic, however out of 10 marketing posts, ideally only 3-4 would utilize a full Azure background in order to maintain diversity.
Brand Color
Azure
#007DF9
Brand Secondary
Ocean
#005CFE
Brand Tertiary
Glacier
#00ADFE
Primary neutral - light
Bone
#F3F1F0
Brand Tertiary
Snow
#FFFFFF
Brand Tertiary
Timberwolf
#DBD5D2
Primary neutral - dark
Obsidian
#05051E
Secondary Neutral - Dark
Midnight
#22284A
Color
Sub Products
Apps
Apps are any sub product that has a downloadable application paired with an interface. Apps have their own dedicated brand color.
Tools
Tools are any sub product that does NOT have a downloadable application paired with an interface. Tools adhere to the primary Avalonia UI brand color, rather than having their own unique colors.
Dev Tools Primary
Amethyst
#9742D8
Dev Tools Secondary
Grape
#7932AF
Dev Tools Tertiary
Heliotrope
#DBD5D2
Reframe Primary
Mint
#30C5C5
Media Player Primary
Telemagenta
#C4286A
Media Player Secondary
rose
#9B2055
Media Pplayer Tertiary
Blush
#D76078
Parcel Primary
Bronze
#C68335
Parcel - Secondary
Acorn
#A26926
Parcel - Tertiary
Gold
#DDBA56
Want to use the ‘Avalonia’ trademark?
Find out how to use our name the right way, and stay within our trademark policy.