Avalonia UI
Get started

Avalonia UI Brand Guidelines

Our visual identity system — logos, typography, color palette, and usage rules for every touchpoint.

Scroll
01
Company Logo

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 OrientationMin Height 24px
Tall OrientationMin Height 48px
Isolated MarkMin Height 24px
www
02
Company Logo

Typography

The logotype is set in Youth Medium. It defines the visual identity of every Avalonia product name.

View Font Online

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
avaloniaparceldev toolsreframemedia playerxpf
03
Company Logo

Logo Usage

Our logo can be used on a variety of backgrounds. Always ensure sufficient contrast and respect the approved color combinations.

Rules

Logo must maintain proficient contrast with background
Do not use on top of overly complex visuals
Scale and alignment are based on x-height
Logotype should only be used when paired with logo marks
BeigeBlue gradient background
Dark BeigeDark navy background
WhiteCanyon photo background
Deep Space
Avalonia logo dark
BlackSandy desert background
04
Color

Brand Palette

The primary brand color usage should mostly consist of Bone, Snow and Timberwolf with Azure being used sparingly to maintain our professional and clean visual identity.

Brand Color
Azure
Brand Secondary
Ocean
Brand Tertiary
Glacier
Primary Neutral - Light
Bone
Neutral
Snow
Neutral
Timberwolf
Primary Neutral - Dark
Obsidian
Secondary Neutral - Dark
Midnight

(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.

05
Color

Sub Products

Each Avalonia sub-product follows its own color identity within the broader brand system.

Dev Tools Primary
Amethyst
Dev Tools Secondary
Grape
Dev Tools Tertiary
Heliotrope
Reframe Primary
Mint
Reframe Secondary
Spruce
Reframe Tertiary
Agave
Media Player Primary
Telemagenta
Media Player Secondary
Rose
Media Player Tertiary
Blush
Parcel Primary
Bronze
Parcel Secondary
Acorn
Parcel Tertiary
Gold

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.

Want to use the ‘Avalonia’ trademark?

Find out how to use our name the right way, and stay within our trademark policy.